上一篇文章中，我介紹了一些關於 ES6 解構方法的新特性。
本文中我們一起來看一下另外一個 JavaScript 新增語法 —— spread syntax（擴充套件語法）。
spread syntax 實際上非常簡單，假設你的可遍歷物件中有一些元素（如陣列），你想把這些元素應用於另一個新的陣列或者一個函式呼叫。通常的做法，你會從索引開始，利用迴圈訪問每個元素。但是通過 spread syntax 這個事情就變的很簡單了，你可以使用三個點作為字首，即 ... 應用於可遍歷物件上，問題就解決了。
為了更直觀，我們一起看幾個用例就明白了。
複製一個陣列
假設有一個陣列名字是 names。
|
1 |
const names = ['Luke','Eva','Phil']; |
如何把 names 裡面的元素複製到一個新陣列中呢？
傳統的做法是用迴圈來實現，但是使用 spread syntax，解決方法很簡潔。
|
1 2 |
const copiedList = [...names] console.log(copiedList); // ['Luke','Eva','Phil'] |
可以看到比迴圈方法簡單的多。
這裡值得一提的是，這裡複製的是引用。也就是說如果一個陣列中的元素髮生改變，那麼另一個陣列中的元素也相應地發生改變。
|
1 2 3 4 5 6 7 |
var initialArray = [{name: "Luke"}]; var copiedArray = [...initialArray]; initialArray[0]['name'] = 'Mark'; console.log(initialArray); //Array [{'name': 'Mark'}] console.log(copiedArray); //Array [{'name': 'Mark'}] |
連線陣列
spread syntax 另一個用法是連線陣列，做法是把你想要擴充套件的陣列放到一起。如下：
|
1 2 |
const concatinated = [...names, ...names]; console.log(concatinated); // ['Luke','Eva','Phil', 'Luke','Eva','Phil'] |
把獨立變數擴充套件到一起
除了把元素複製到一個新陣列中，還可以把獨立變數一起擴充套件到某陣列中。下面舉個例子，把第一個元素和 names 陣列擴充套件到一起。
|
1 2 |
const first = ['Emily', ...names]; console.log(first); // ['Emily','Luke','Eva','Phil'] |
還可以把獨立變數放到 names 的後面。
|
1 2 |
const last = [...names, 'Emily']; console.log(last); // ['Luke','Eva','Phil', 'Emily'] |
在函式呼叫中使用 spread syntax
你已經掌握瞭如何在陣列中運用 spread syntax，現在我們來看一下如何在函式呼叫中使用。
假設我們有個簡單函式 —— printer —— 接受三個引數，並且列印出來。
|
1 2 3 |
const printer = (name1, name2, name3) => { console.log(`Names: ${name1}, ${name2} and ${name3}`); }; |
依照 printer 函式定義，可以使用 spread syntax 把陣列元素應用於 printer 函式。
|
1 |
printer(...names); // Names: Luke, Eva and Phil |
和陣列的用法一樣，可以把獨立變數一起輸出。我們新增 ‘Emily’ 作為 printer 函式的第一個引數，後面跟著 ...names。
|
1 |
printer('Emily', ...names); // Names: Emily, Luke and Eva |
如果傳遞給函式過多的引數，那麼超過函式引數個數的元素將會被忽略掉。
Bonus：spread syntax 應用於物件字面值！
這個特徵是基於 ECMAScript 的附加特徵。但是目前使用它需要 babel 外掛，叫做： babel-plugin-transform-object-rest-spread。
通過 spread syntax 這種變體，你可以把兩個物件擴充套件到一起。假設你有兩個物件包含了個人資訊 —— nameAndAge 和 about。
|
1 2 3 4 5 6 7 8 9 |
const nameAndAge = { name: 'Luke', age: 24, } const about = { work: 'Developer', hobby: 'Skydiving', } |
接下來用 spread syntax 把兩個物件合併到一起。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
const person = { ...nameAndAge, ...about, } console.log(person); //{ // "age": 24, // "hobby": "Skydiving", // "name": "Luke", // "work": "Developer" //} |
OK，這篇文章介紹了 spread syntax 的用法。後面我們會繼續介紹 ES6 新特性，敬請繼續關注！