11.8 扩展运算符（...）

扩展操作符（...）和剩余操作符看起来很像，但是两者是对立的：

• 剩余操作符提取数组，用于剩余参数和解构。
• 扩展操作符将数组元素转换成函数调用的参数或者数组字面量的元素。

11.8.1 函数和方法调用中的扩展操作

Math.max() 是一个很好的例子，用于说明扩展操作符在方法调用中是如何运作的。 Math.max(x1, x2, ···) 返回值最大的参数。该方法接收任意数目的参数，但是不接收数组。扩展操作符弥补了这个缺陷：

> Math.max(-1, 5, 11, 3)
11
> Math.max(...[-1, 5, 11, 3])
11

相对于剩余操作符，你可以在参数序列的任何部分使用扩展操作符：

> Math.max(-1, ...[-1, 5, 11], 3)
11

另一个例子是 JavaScript 没有一种方式来追加一个数组的元素到另一个数组的后面。但是，数组确实有 push(x1, x2, ...) 方法，该方法将所有传入的参数追加到接收者。下面的代码展示了可以如何使用 push() 追加 arr2 中的元素到 arr1 中去。

let arr1 = ['a', 'b'];
let arr2 = ['c', 'd'];

arr1.push(...arr2);
// arr1 is now ['a', 'b', 'c', 'd']

11.8.2 构造器中的扩展操作

除了函数和方法调用之外，扩展操作符也对构造器调用生效：

new Date(...[1912, 11, 24]) // Christmas Eve 1912

这在 ECMAScript 5 中是难以实现的。

11.8.3 数组中的扩展操作

扩展操作符也可用于数组：

> [1, ...[2,3], 4]
[1, 2, 3, 4]

这让连接数组变得很方便：

let x = ['a', 'b'];
let y = ['c'];
let z = ['d', 'e'];

let arr = [...x, ...y, ...z]; // ['a', 'b', 'c', 'd', 'e']

11.8.3.1 将可迭代的或者类数组的对象转换成数组

扩展操作符能够将任何可迭代的对象转换成数组：

let arr = [...someIterableObject];

将 Set 转换成数组：

let set = new Set([11, -1, 6]);
let arr = [...set]; // [11, -1, 6]

自定义的可迭代对象也可以用同样的方式转换成数组：

let obj = {
    * [Symbol.iterator]() {
        yield 'a';
        yield 'b';
        yield 'c';
    }
};
let arr = [...obj]; // ['a', 'b', 'c']

注意，就像 for-of 循环，扩展操作符仅对可迭代对象有效。大多数重要的对象都是可迭代的：数组， Map ， Sets 和 arguments 。大多数 DOM 数据结构最终也将会变得可迭代。

你应该遇到过一些对象不可迭代，但是是类数组的（索引化的元素加上一个 length 属性），你可以使用 Array.from() 将它转换成一个数组：

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

// ECMAScript 5:
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// ECMAScript 6:
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

// TypeError: Cannot spread non-iterable object.
let arr3 = [...arrayLike];