【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"複製代碼

小節

今天的內容就到這裏，展開語法糖是否是特別的酷啊，在往後的開發中，咱們儘可能使用新的語法糖替代舊的寫法。讓咱們代碼看起來更加乾淨、整潔、易懂。

E6相關文章

【ES6基礎】let和做用域

【ES6基礎】const介紹

【ES6基礎】默認參數值

更多精彩內容，請微信關注」前端達人」公衆號！