面试刨根问到底：[...undefined] 执行结果是什么

298次阅读 | 发布于3年以前

据说面试中只有 5% 的人能讲透彻，你会是其中之一吗？

`[...undefined]` 输出什么？

... 可以称之为 展开语法(Spread syntax)，又可以叫 扩展运算符。可以在函数调用/数组构造时, 将数组表达式或者 string 在语法层面展开；还可以在构造字面量对象时, 将对象表达式按 key-value 的方式展开。

首先我们来看数组中常见的用法：

const foo = [1, 2, 3];
const bar = [0, ...foo];

console.log(bar);
// [0, 1, 2, 3]

这种方式类似数组中的 slice() ，将 foo 浅拷贝到 bar 数组里。

我们在浏览器上输出结果：

[...undefined]

// Uncaught TypeError: undefined is not iterable

看到代码报错 Uncaught TypeError，因为 undefined 是不可迭代的。那什么可迭代呢，试试普通对象：

[...{}]

// Uncaught TypeError: {} is not iterable

从这里可以看出普通对象也不行。在数组或函数参数中使用展开语法时, 该语法只能用于 可迭代对象

什么是 `可迭代对象`？

要成为可迭代对象，一个对象必须实现 @@iterator 方法。这意味着对象（或者它原型链上的某个对象）必须有一个键为 @@iterator 的属性，可通过常量 Symbol.iterator 访问该属性

什么意思呢，看一个简单的例子最直接：

const counter = {
  *[Symbol.iterator]() {
    yield 1;
  },
};

[...counter];
// 正常执行，结果：
// [1]

一个普通对象中，必须包含一个 Symbol.iterator 属性，并规定是一个无参数的函数，其返回值为一个符合 迭代器协议 的对象。迭代器协议 属于 迭代协议。迭代协议 并不是新的内置实现或语法，而是协议。这些协议可以被任何遵循某些约定的对象来实现。

什么是迭代器？

只有实现了 迭代器协议 的一个对象才能成为迭代器。例如：

const counter = {
  next() {
    return { value: undefined, done: true };
  },
};

迭代器是通过使用 next() 方法实现 迭代器协议 的任何一个对象，该方法返回具有两个属性的对象：value，这是序列中的 next 值；和 done ，如果已经迭代到序列中的最后一个值，则它为 true 。如果 value 和 done 一起存在，则它是迭代器的返回值。

`可迭代对象` 和 `迭代器` 有什么区别呢？

如果实现了 迭代器协议 和 可迭代协议，那么它就是一个 可迭代对象。

const counter = {
  next() {
    return { value: undefined, done: true };
  },
  [Symbol.iterator]() {
    return this;
  },
};

[Symbol.iterator]() 通过返回 this 以便调用该方法后获得一个迭代器，以下方式也许会更好理解：

const counter = {
  [Symbol.iterator]() {
    // 返回一个迭代器
    return {
      next() {
        return { value: undefined, done: true };
      },
    };
  },
};

当一个对象需要被迭代的时候，首先，会不带参数调用它的 @@iterator 方法，然后使用此方法返回的迭代器获得要迭代的值。此函数可以是普通函数，也可以是生成器函数，以便在调用时返回迭代器对象。在此生成器函数的内部，可以使用 yield 提供每个条目。

如果 `@@iterator` 方法不返回迭代器呢？

const counter = {
  [Symbol.iterator]() {
    return 1;
  },
};

[...counter];
// Uncaught TypeError: Result of the Symbol.iterator method is not an object

如果一个可迭代对象的 @@iterator 方法不能返回迭代器对象，那么可以认为它是一个不符合标准的可迭代对象。

生成器（Generator）对象到底是一个迭代器，还是一个可迭代对象？

生成器对象既是迭代器，也是可迭代对象，因为它符合 可迭代协议 和 迭代器协议。

function* gen() {
  yield 1;
  yield 2;
  yield 3;
}

[...gen()];
// [1, 2, 3]

那内置可迭代对象有哪些呢？

目前所有的内置可迭代对象有：

String
Array
TypedArray
Map
Set
arguments
NodeList

它们的原型对象都实现了 @@iterator 方法。

那想实现 `[...obj]` 展开一个普通对象，有办法吗？

顾名思义，那就是要将普通对象转换为 可迭代对象。

展开对象的 key：[...Object.keys(obj)]
展开对象的 value：[...Object.values(obj)]
展开整个对象：[...Object.entries(obj)]

那 `{...undefined}` 执行结果是什么？

展开语法在字面量对象的行为细节与数组中有很大差别，可以看作是 Object.assign({}, undefined)，主要区别是 Object.assign() 函数会触发 setters，而展开语法则不会

执行结果则是返回一个 {} 空对象，{...true}、{...1}、{...null} 亦是如此。

`{ ...[1, 2, 3] }` 执行结果呢？

首先在对象中不能将 ... 后面当作 可迭代对象 看待，应该看作是一个普通对象，即包含 key：

{ ...[1, 2, 3] }
// {0: 1, 1: 2, 2: 3}

那请说 `...` 语法作为剩余参数的特性

展开语法可以用于函数的最后一个命名参数，它由剩余参数组成的真数组。它与 arguments 对象的区别主要有三个：

剩余参数只包含那些没有对应形参的实参，而 arguments 对象包含了传给函数的所有实参
arguments 对象不是一个真正的数组，而剩余参数是真正的 Array 实例
arguments 对象还有一些附加的属性（如 callee 属性）

展开语法还可以用于数组/对象解构，剩余元素必须是数组/对象的最后一个元素。

参考资料

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols

[...undefined] 输出什么？

什么是 可迭代对象？

什么是迭代器？

可迭代对象 和 迭代器 有什么区别呢？

如果 @@iterator 方法不返回迭代器呢？