ES6 函數傳參

《深入理解ES6》閱讀隨筆

在 ES5 中，函數的形參使用是很靈活的，沒有數量限制的，可以任意傳入多於或者少於函數定義時的參數。如果傳多了，那麼可以在函數體內通過 arguments 數組來獲取；如果傳少了，需要在函數體內進行自定義約束，避免出現異常調用的情況。下面是一個簡單的說明案例：

// 自定義函數
function readme(name) {
  let result = "I am ";
  if (name !== undefined) {
    // 正常情況
  } else {
    // 形參少的情況
    name = "default";
  }
  result += name;
  // 形參多的情況
  if (arguments.length > 1) {
    for (let i = 1; i < arguments.length; i++) {
      result += arguments[i] + " ";
    }
  }
  console.log(result);
}
// 正常情況
readme("bug"); // 輸出：I am bug
// 形參多的情況，new bug 參數可以在函數體內通過 arguments[1] 獲取
readme("bug", "new bug"); // 輸出：I am bug
// // 形參少的情況，需要判斷 name 是否爲 undefined，如果是，給一個默認值，如果不是，正常輸出
readme(); // 輸出：I am default

事實上，上面兩種方案雖然解決了問題，但是不夠安全，也不夠簡潔。在 ES6 中，有了更好的解決方案。在形參少的的情況下，可以通過在形參中設置默認參數的方式來處理，更加簡潔易懂。在形參多的情況下，可以使用新的不定參數符號 … 來代表多出來的參數。下面是一個簡單的說明案例：

// 自定義函數
function readme(name = "default", ...list) {
  let result = "I am ";
  result += name;
  // 形參多的情況
  for (let i = 0; i < list.length; i++) {
    result += list[i] + " ";
  }
  console.log(result);
}
// 正常情況
readme("bug"); // 輸出：I am bug
// 形參多的情況
readme("bug", "new bug"); // 輸出：I am bug
// 形參少的情況
readme(); // 輸出：I am default

另外，不定參數符號 … 還可以用於對象字面量的展開，就像下面這個例子，如果改爲使用 … 會方便很多：

// 數學內建函數中獲取最值，默認只支持元組數據，如果是兩個還好
let result = 0;
result = Math.max(1, 2);
console.log(result); // 輸出 2
// 如果數據一多， 比如要處理數組數組
const moreData = [1, 2, 3, 4, 5];
// 那麼就需要進行一些干預手段，才能獲取
result = Math.max.apply(Math, moreData);
console.log(result); // 輸出 5
// 使用 ...
result = Math.max(...moreData);
console.log(result); // 輸出 5

很顯然，雖然藉助 apply 的方式也可以實現數組最值的獲取，但是使用 … 以後代碼結構更清晰易懂。另外，在 ES6 中，絕大多數之前使用 apply 實現的功能，幾乎都可以通過 … 的方式來優化實現（ES6 中依然保留 apply 的用法）。