【ES6基礎】展開語法(Spread syntax)
明天是元宵佳節，在此小編提前祝大家元宵佳節快樂！今天小編在這裡給大家繼續介紹ES6的語法糖——展開語法(Spread syntax)。
展開語法用"..."進行表示，展開語法將可迭代的物件拆分成單個的值（語法層面展開）。
展開語法通常用於將可迭代的物件的值傳遞到函式的引數中。今天小編將從以下方面進行介紹：
- 函式傳參中的應用
- 陣列的相關應用
- 剩餘引數的應用
本篇文章閱讀時間預計10分鐘
函式傳參中的應用
ES6之前，如果我們希望將陣列作為引數分別傳遞給函式中的引數，我們可以使用Function的apply()方法。如下段程式碼所示：
function myFunction(a, b) {
return a + b;
}
var data = [1, 4];
var result = myFunction.apply(null, data);
console.log(result); //Output "5”複製程式碼
從上述程式碼，apply方法接受一個數組，將它們分拆成單個引數傳遞給函式進行呼叫。
ES6的展開語法能讓我們以更簡潔的方式進行呼叫，如下段程式碼所示：
function myFunction(a, b) {
return a + b;
}
let data = [1, 4];
let result = myFunction(...data);
console.log(result); //Output "5”複製程式碼
程式碼執行期間，JavaScript直譯器呼叫myFunction之前，將會用1,4表示式替換...運算子:
let result = myFunction(...data);複製程式碼
上述程式碼將會進行如下替換：
let result = myFunction(1,4);複製程式碼
替換後，函式中的程式碼將會繼續執行。
陣列的相關應用
陣列的合併
展開語法可將陣列新增到另外一個數組中，成為其中的一部分。
let array1 = [2,3,4]; let array2 = [1, ...array1, 5, 6, 7]; console.log(array2); //Output "1, 2, 3, 4, 5, 6, 7”複製程式碼
程式碼執行期間，如下程式碼：
let array2 = [1, ...array1, 5, 6, 7];複製程式碼
上述程式碼將會替換成如下程式碼：
let array2 = [1, 2, 3, 4, 5, 6, 7];複製程式碼
在push方法中的運用
有時候，我們需要將一個數組的內容追加到另一個數組中，ES6之前我們可以這麼做，如下段程式碼所示：
var array1 = [2,3,4]; var array2 = [1]; Array.prototype.push.apply(array2, array1); console.log(array2); //Output "1, 2, 3, 4”複製程式碼
ES6的展開語法能以更簡潔的形式實現，如下段程式碼所示：
let array1 = [2,3,4]; let array2=[1]; array2.push(...array1); console.log(array2); //Output "1, 2, 3, 4”複製程式碼
程式碼執行期間，如下程式碼：
array2.push(...array1);複製程式碼
上述程式碼將會替換成如下程式碼:
array2.push(2, 3, 4);複製程式碼
傳遞多個數組引數
我們可以使用展開語法傳遞多個數組進行引數傳遞，如下段程式碼所示：
let array1 = [1];
let array2 = [2];
let array3 = [...array1, ...array2, ...[3, 4]];//multi arrayspread
let array4 = [5];
function myFunction(a, b, c, d, e) {
return a+b+c+d+e;
}
let result = myFunction(...array3, ...array4); //multi array spread
console.log(result); //Output "15”複製程式碼
剩餘引數的應用
我們知道JS函式內部有個arguments物件，可以拿到全部實參。現在ES6給我們帶來了一個新的物件，可以拿到除開始引數外的引數，即剩餘引數，我們可以使用展開語法...進行獲取。
ES6之前，我們可以這樣獲取剩餘引數，如下段程式碼所示：
function myFunction(a, b) {
const args = Array.prototype.slice.call(arguments, myFunction.length);
console.log(args);
}
myFunction(1, 2, 3, 4, 5); //Output "3, 4, 5”複製程式碼
ES6中，上述程式碼我們可以這樣改下，如下段程式碼所示：
function myFunction(a, b, ...args) {
console.log(args); //Output "3, 4, 5"
}
myFunction(1, 2, 3, 4, 5);複製程式碼
是不是很簡單，有個我們需要注意的事項，一旦函式中的引數第一個引數使用剩餘引數，便不能新增任何引數，否則將會丟擲錯誤。例如下段程式碼所示:
function fn(...rest,foo) {}
//Output "SyntaxError: Rest parameter must be last formal parameter"複製程式碼
小節
今天的內容就到這裡，展開語法糖是不是特別的酷啊，在日後的開發中，我們儘量使用新的語法糖替代舊的寫法。讓我們程式碼看起來更加乾淨、整潔、易懂。