綠島之北

原文地址：JavaScript & The spread operator

拓展運算符看起來像什么？ 三個點，...
它能做什么？ 拓展運算符允許一個表達式在某個地方展開成為多個元素、變量或參數

定義看上去毫無樂趣，下面通過幾個例子理解到底什么是拓展運算符。

初識

• 1、創建一個數組middle
• 2、創建第二個數組，包含第一個數組
• 3、輸出結果

var middle = [3, 4];
var arr = [1, 2, middle, 5, 6];

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

上面沒有使用拓展運算符，arr在創建的時候把middle插入到arr數組的中間，此時arr數組里面包了一個數組middle。

如果我們的目標是兩個數組，那上面的做法很不錯，但如果我們只想要一個數組呢？

我們可以通過拓展運算符實現。再提一次，拓展運算符允許數組的元素展開。來看下面的代碼，除了使用了拓展運算符，代碼和上面的沒啥區別：

var middle = [3, 4];
var arr = [1, 2, ...middle, 4, 5];

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

還記得剛才讀到的拓展運算符的定義嗎？上面的代碼發揮了拓展運算符的作用，正如你看的，我們創建了數組arr，然后對middle使用了拓展運算符，此時，middle數組并沒有直接插入到arr中，而是被展開了。middle數組中的每一個元素插入到了arr數組中。此時，arr不再是嵌套數組，而是一個從1到6的簡單數組。

1、Slice

slice是JavaScript中數組方法，允許我們拷貝數組。同樣，我們可以使用拓展運算符來拷貝數組。

var arr = ['a', 'b', 'c'];
var arr2 = [...arr];

console.log(arr2);
// ['a', 'b', 'c']

瞧，我們成功復制了數組。arr數組中的所有元素都分解成獨立的個體，然后分配到arr2數組中。我們現在可以對arr2進行任意修改，都不會影響到源數組arr

上述可以工作的原因是arr的值填充到了arr2定義的方括號中。所以，我們是讓arr2的值和arr的值相等，而不是和arr本身相等。下面的不適用拓展運算符的示例更能說明問題。

如果我們簡單的創建一個數組，然后讓另一個數組和他相等，就像這樣：

var arr = ['a', 'b', 'c'];
var arr2 = arr;

console.log(arr2);
// ['a', 'b', 'c']

現在你可能會說，這也work了，和上面的結果一樣啊。

然后，這只是看起來一樣，但是本質是完全不同。我們并沒有讓arr2的值和arr中每個值相同，而是直接讓兩個數組相等，這也就意味著任何對arr2的修改都是影響arr。

arr2.push('d');

console.log(arr2);
// ['a', 'b', 'c', 'd']

console.log(arr);
// ['a', 'b', 'c', 'd']

正如你親眼所見，即使沒有明確的向源數組arr添加新值，新值d依然會添加到arr中。

2、Concat

使用concat()可以連接數組，使用拓展運算符也能實現。首先看看使用concat()是什么樣子：

var arr = ['a', 'b', 'c'];
var arr2 = ['d', 'e', 'f'];

arr1 = arr.concat(arr2);
console.log(arr);
// ['a', 'b', 'c', 'd', 'e', 'f']

現在，使用拓展運算符：

var arr = ['a', 'b', 'c'];
var arr2 = ['d', 'e', 'f'];

arr = [...arr, ...arr2];
console.log(arr);
// ['a', 'b', 'c', 'd', 'e', 'f']

結果完全相同，每個數組都分解然后加入到新的數組arr中。

注：原文評論中有人指出使用拓展運算符連接數組可能并不高效。在測試中，使用拓展運算符要比concat慢一些。對大數組的處理，使用拓展運算符可能并不理想。

3、Math

Math函數可以與拓展運算符結合使用，我們以Math.max()為例。

簡單介紹一下，Math.max()返回一組數字中的最大值。

Math.max();
// -Infinity

Math.max(1, 2, 3);
// 3

Math.max(100, 3, 4);
// 100

如果沒有拓展運算符，我們也可以借助.apply()通過Math.max()求數組中的最大值：

var arr = [2, 4, 8, 6, 0];

function max(arr) {
  return Math.max.apply(null, arr);
}

console.log(max(arr));
// 8

這是讓人討厭的實現。

現在，我們來看通過拓展運算符如何實現。代碼更加簡潔：

var arr = [2, 4, 8, 6, 0];
var max = Math.max(...arr);

console.log(max);
// 8

4、String to Array

將字符串轉成數組有很多種方法，比如slice、split等，使用拓展運算符會更加簡單：

var str = "hello";
var chars = [...str];

console.log(chars); 
// ['h', 'e',' l',' l', 'o']

很酷吧，拓展運算符會遍歷str中的每個字符，然后分配到chars新數組中。