[Day20] 参数（下）

其余参数（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

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

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", "[email protected]", "male", "HK")

因为填入的顺序不能错、参数不能漏⋯而在实际状况表单回收，可能每个资料都不会完整，只要少了一个，整个通讯录栏位就乱了。

这时候用物件就是一个很好的方式：

var person = {
  firstname: "Stephen",
  lastname: "Chow",
  phone: "+852 3345678",
  email: "[email protected]",
  gender: "male",
  birthday: "0622",
  address: "HK",
};
addPerson(person)

物件的属性不要求顺序，而且少掉几个属性也不会有问题，容易阅读也好维护。