在有些情況，Function 有不確定數量的參數時，ES6 提供的「剩餘參數」就可以幫助我們很容易 取得剩餘的所有參數，並保存在陣列裡！

剩餘參數的特性如下：

• 取得剩下的參數，並存為一個陣列。
• 剩餘參數在傳入時，必定是位於最後一位，並且只能有一個剩餘參數。
• 剩餘參數的值在沒有傳入實際值時，會變為一個空陣列，而不是undefined。
• 又叫做「剩餘運算子」「其餘參數」「其餘運算子」
• ESLint（airbnb）規則：不要使用 arguments 語法，使用 rest 語法 ... 替代

基本使用方式

函式中，最後一個參數命名開頭使用 ... 當開頭，就會將當前位置~最後一個變數組成陣列

function f(a, b, ...變數名稱) {
  //...
}

將所有參數轉成陣列

範例：有一組套餐set，將套餐的內容組成陣列

let set = function(...food){
  console.log(food)  // ['薯條','壽司','可樂','雞塊','牛肉漢堡','蘋果派']
}
set('薯條','壽司','可樂','雞塊','牛肉漢堡','蘋果派');

將所有參數轉成陣列

假如阿華要吃套餐的前兩樣產品，映萱吃掉剩下的所有餐點，我們就可以這樣寫

let set = function(first,second,...food){
  console.log(first); // 阿華要吃的第一樣 - 薯條
  console.log(second); // 阿華要吃的第二樣 - 壽司
  console.log(food);  // 映萱要吃剩下全部 - ["可樂", "雞塊", "牛肉漢堡", "蘋果派"]
}
set('薯條','壽司','可樂','雞塊','牛肉漢堡','蘋果派');

如果function有先定義別的參數，就會將傳入的參數值先給定義好的參數，剩下的就全部塞入其餘參數，所以前兩個參數會分別帶入「薯條」與「壽司」，映萱要吃的剩餘食物就會被轉成陣列囉～

將剩餘參數做運算

今天美食街的所有產品都打85折，映萱吃完一圈吃後，想來算看看每餐都花了多少錢

let count = function(disCount,...food){
  return food.map(food => disCount * food);
  // disCount 儲存參數 0.8
  // food 儲存所有食物金額，格式為陣列
  // 使用陣列內建的map方法做計算
}
console.log(count(0.8,160,200,60,80,50,160));
// 取得打折後的金額 [128, 160, 48, 64, 40, 128]

以上就是簡單的小練習拉～下一篇會介紹剩餘參數的好兄弟展開運算子 唷！

參考文章
Mozilla - 其餘參數
Spread Operator & Rest Operator
Airbnb JavaScript Style Guide