iT邦幫忙

2021 iThome 鐵人賽

DAY 20
0
Modern Web

從零開始的JS學習之路系列 第 20

[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
  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
  1. 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() 方法


上一篇
[Day19] 參數(上)
下一篇
[Day21] 回呼函式 Callback Function
系列文
從零開始的JS學習之路30

尚未有邦友留言

立即登入留言