其餘參數（rest parameter）

上一篇提到，箭頭函式無法使用 arguments 物件，所以 ES6 新增了一種特性「其餘參數（rest parameter）」語法可以讓我們表示不確定數量的參數，並將其視為一個陣列。
這是上篇一般函式宣告使用 arguments 物件的例子：

const sum = function () {
  let num = 0;
  for (var i = 0; i < arguments.length; i++) {
    num += arguments[i];
  }
  return num;
};
sum(3, 4, 5); // 12

改寫成箭頭函式用其餘參數的寫法，當函式的最後一個參數以 ... 作為開頭來命名，例：...args or ...rex，他會被視為一個陣列，並將所有參數帶入陣列。

... 為展開運算子 Spread syntax (...) -MDN

1. block body 寫法

const sum = (...rex) => {
  let num = 0;
  for (let i = 0; i < rex.length; i++) {
    num += rex[i];
  }
  return num;
};
sum(3, 4, 5); // 12
sum(1, 2, 3, 4, 5, 6); // 21

而陣列有 arguments 所沒有的 reduce() 方法。

reduce() 方法將一個累加器及陣列中每項元素（由左至右）傳入回呼函式，將陣列化為單一值。-MDN

2. concise body 寫法（讓這個函式更加簡短）

const sum = (...args) => args.reduce((a, b) => a + b);
sum(3, 4, 5); // 12
sum(1, 2, 3, 4, 5, 6); // 21

以「物件」作為參數

除了可以用 arguments、rest parameter 取得超出宣告的參數外，另一種常見的方式是用物件包起來。例如書上舉例的通訊錄功能宣告一個函式：

var addPerson = function (firstname, lastname, phone, email, gender, birthday, address) {
  // 略..
};

經過多次修改加入其他欄位需求，而最後在呼叫 addperson() 填資料的時候造成一個大麻煩

addperson("Stephen", "Chow", "+852 3345678", "stephen5566@mail.com", "male", "HK")

因為填入的順序不能錯、參數不能漏⋯而在實際狀況表單回收，可能每個資料都不會完整，只要少了一個，整個通訊錄欄位就亂了。

這時候用物件就是一個很好的方式：

var person = {
  firstname: "Stephen",
  lastname: "Chow",
  phone: "+852 3345678",
  email: "stephen5566@mail.com",
  gender: "male",
  birthday: "0622",
  address: "HK",
};
addPerson(person)

物件的屬性不要求順序，而且少掉幾個屬性也不會有問題，容易閱讀也好維護。

參考資料

008天重新認識JavaScript
其餘參數
Spread syntax (...)
MDN-reduce() 方法