ES6數組的擴展

1、擴展運算符

擴展運算符（spread）是三個點（...）。它好比 rest 參數的逆運算，將一個數組轉爲用逗號分隔的參數序列

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

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

該運算符主要用於函數調用。

function add(x, y) {
  return x + y;
}

const numbers = [4, 38];
add(...numbers) // 42

2、替代函數的 apply 方法

由於擴展運算符可以展開數組，所以不再需要apply方法，將數組轉爲函數的參數了

// ES5 的寫法
function f(x, y, z) {
  // ...
}
var args = [0, 1, 2];
f.apply(null, args);

// ES6的寫法
function f(x, y, z) {
  // ...
}
let args = [0, 1, 2];
f(...args);

下面是擴展運算符取代apply方法的一個實際的例子，應用Math.max方法，簡化求出一個數組最大元素的寫法。

// ES5 的寫法
Math.max.apply(null, [14, 3, 77])

// ES6 的寫法
Math.max(...[14, 3, 77])

// 等同於
Math.max(14, 3, 77);

另一個例子是通過push函數，將一個數組添加到另一個數組的尾部。

// ES5的 寫法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);

// ES6 的寫法
let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1.push(...arr2);

上面代碼的 ES5 寫法中，push方法的參數不能是數組，所以只好通過apply方法變通使用push方法。有了擴展運算符，就可以直接將數組傳入push方法。

3、擴展運算符的應用

1、複製數組

數組是複合的數據類型，直接複製的話，只是複製了指向底層數據結構的指針，而不是克隆一個全新的數組。

const a1 = [1, 2];
const a2 = a1;

a2[0] = 2;
a1 // [2, 2]

上面代碼中，a2並不是a1的克隆，而是指向同一份數據的另一個指針。修改a2，會直接導致a1的變化。

擴展運算符提供了複製數組的簡便寫法。

const a1 = [1, 2];
// 寫法一
const a2 = [...a1];
// 寫法二
const [...a2] = a1;

2、合併數組

擴展運算符提供了數組合並的新寫法。

const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];

// ES5 的合併數組
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]

// ES6 的合併數組
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]

不過，這兩種方法都是淺拷貝，使用的時候需要注意。

3、與解構賦值結合

擴展運算符可以與解構賦值結合起來，用於生成數組。

// ES5
a = list[0], rest = list.slice(1)
// ES6
[a, ...rest] = list

const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest  // [2, 3, 4, 5]

const [first, ...rest] = [];
first // undefined
rest  // []

const [first, ...rest] = ["foo"];
first  // "foo"
rest   // []

如果將擴展運算符用於數組賦值，只能放在參數的最後一位，否則會報錯。

const [...butLast, last] = [1, 2, 3, 4, 5];
// 報錯

const [first, ...middle, last] = [1, 2, 3, 4, 5];
// 報錯

4、字符串
擴展運算符還可以將字符串轉爲真正的數組。

[...'hello']
// [ "h", "e", "l", "l", "o" ]

5、Map 和 Set 結構，Generator 函數

擴展運算符內部調用的是數據結構的 Iterator 接口，因此只要具有 Iterator 接口的對象，都可以使用擴展運算符，比如 Map 結構。

let map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);

let arr = [...map.keys()]; // [1, 2, 3]

Generator 函數運行後，返回一個遍歷器對象，因此也可以使用擴展運算符。

const go = function*(){
  yield 1;
  yield 2;
  yield 3;
};

[...go()] // [1, 2, 3]