[筆記] JavaScript ES6 中的展開運算子（spread operator）和其餘運算子（rest operator）

在 ES6 中，新增了一個 "..." 的關鍵字，這個關鍵字在不同時間點有不同的效果，有些時候它會被當作展開運算子(spread operator）使用，有些時候則是被當作其餘運算子（rest operator）使用。

其餘運算子（rest operator）

假設現在我想要寫一個函式，它可以把所有陣列的值相加後取平均，在過去如果我們要在函式中放入陣列的資料，一般我們會這樣寫：

let arr = [1,2,3,4,5];

let avg = function(arr){
  let sum = 0;
  for(let i = 0; i < arr.length; i++){
    sum += arr[i];
  }
  return sum / arr.length;
}

console.log(avg(arr));  //  3

但是在使用函式的時候，有些時候我們並不清楚我們會放入多少參數數目，假設我們把輸入的參數改成許多數值的話，最後會回傳 NaN 這樣的結果：

let avg = function(arr){
  let sum = 0;
  for(let i = 0; i < arr.length; i++){
    sum += arr[i];
  }
  return sum / arr.length;
}

console.log(avg(1,3,5,7,9));  // NaN

這時候就可以用到其餘運算字的概念（...），其餘運算字會幫助我們把輸入函式中的參數值變成陣列的形式，這時候我們就可以像這樣子撰寫程式：

let avg = function(...arr){
  console.log(arr)  // [1,3,5,7,9]
  let sum = 0;
  for(let i = 0; i < arr.length; i++){
    sum += arr[i];
  }
  return sum / arr.length;
}

console.log(avg(1,3,5,7,9));  // 5

我們可以看到在上面程式碼第二行的地方，從原本的 function(arr) 改成 function(...arr)，透過在參數的前面加上 "..." 便可以把所輸入多個參數轉成陣列（我們可以從上面程式碼中把參數 arr 呼叫出來看）。

展開運算子（spread operator）

展開運算子和其餘運算子一樣都是 "..." ，但是在應用的效果上是完全相反的，其餘運算子是把許多的參數轉換成一個陣列，而展開運算子則是可以把陣列中的元素取出。

假設我們想用 Math.max( ) 這個函式來找出最大值，但是我們輸入的參數卻是陣列：

let number = [1,2,3,4,5];

console.log(Math.max(number));  //  NaN

這時候因為帶入的參數是陣列的關係，所以我們會得到 NaN 的結果。但如果我們能夠適時的應用展開運算子，我們就可以把這個陣列展開成許多數值：

let number = [1,2,3,4,5];

console.log(Math.max(...number));  //  5

console.log(...number);  // 1,2,3,4,5

這時候我們在陣列的前面加上 "..." ，它就會把陣列從 [1,2,3,4,5] 轉換成 1,2,3,4,5，如此就可以正確的取得最大值。

資料來源：

• [Udemy] Accelerated ES6 JavaScript Training
• ECMAScript 6 入門
• 從ES6開始的JavaScript學習生活