展開運算子

展開運算子（spread）是三個點（…）,可以將陣列轉為用逗號分隔的引數序列。如同rest引數的逆運算。

語法

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

console.log(1, ...[2, 3, 4], 5);
// 1 2 3 4 5

[...document.querySelectorAll('div')]
// [<div>, <div>, <div>...]

用於陣列字面量：

[...iterableObj, 4, 5, 6]

用於函式呼叫：

myFunction(...iterableObj
 
);

展開運算子主要用於函式呼叫，如下：

function func(x, y, z, a, b) {
    console.log(x, y, z, a, b);
}

var args = [1, 2];
func(0, ...args, 3, ...[4]);
// 0 1 2 3 4

注意：任何實現了Iterator介面的物件，都可以用展開運算子轉為真正的陣列。

用法

1. 替換apply方法

展開運算子可以展開陣列，因此可以替換apply方法，將陣列轉為函式的引數。

function func(x, y, z) { }
var args = [0, 1, 2];

// ES5寫法
 

func.apply(null, args);

// ES6寫法
func(...args);

1. 更強大的陣列字面量操作

如果由一個已知陣列建立一個新陣列，陣列字面量語法則不足以達到目的，必須結合push, splice, concat等方法。而展開運算子可以輕鬆實現這個目標：

var parts = ['shoulders', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes'];
// ["head", "shoulders", "knees", "and", "toes"]

展開運算子可以用於任何陣列字面量，並可以多次使用。

1. 適用new

JS的函式只能返回一個值，如果返回多個值就需要用到陣列或物件。展開運算子提供了一種處理這種返回值的有效方法

1. 替換push方法

push方法常用於將一個數組加入到另一個數組的結尾。在ES5中是這樣做的：

var arr1 = [0, 1, 2], arr2 = [3, 4, 5];
// Append all items in arr2 onto arr1
Array.prototype.push.apply(arr1, arr2);

push方法的引數不能是陣列，所以只好通過apply方法變通使用push方法。有了展開運算子，就可以像下面直接將陣列傳入push方法。

var arr1 = [0, 1, 2], arr2 = [3, 4, 5];
arr1.push(...arr2);
arr1 // [0, 1, 2, 3, 4, 5]

上面可以將返回的陣列使用展開運算直接傳入建構函式。

1. 只用於可迭代的變數

下面的用法就會報錯：

var obj = {key1: 'value1'};
var args = [...obj]; // 報錯

function func(x) {
    console.log(x);
}
func(...obj); // 報錯