應使用 Rest Parameter 全面取代 arguments

對 Function 能否傳遞 無限參數,一直是檢驗一個語言的指標。在 ECMAScrip 5 提供了 arguments Array-like Object 存取 無限參數;ECMAScript 2015 則提供了更好的 Rest Parameter 取代 arguments

Version


ECMAScript 2015

Arguments


我們希望實作 sum(),無論提供幾個參數,都能相加得到結果。

1
2
3
4
5
6
7
8
9
10
function sum() {
let result = 0;

for(let i = 0; i < arguments.length; i++)
result += arguments[i];

return result;
}

console.log(1, 2, 3); // 6

在 ECMAScript 5 提供了 arguments Array-like Object,讓我們能夠以 for loop 方式存取 無限參數

這種方式雖然可行,但有兩個缺點:

  • sum() 並沒有提供任何 parameter,使用 sum() 時無法簡單得知到底 sum() 是不用傳入任何參數,還是 無限參數,只能看 code 或者看文件
  • arguments 只是 Array-like Object,因此無法使用 Array.prototype 下的 method 操作 arguments,必須 借用 ECMAScript 5 的 Array.prototype.slice(arguments) 產生新的 array,或者使用 ECMAScript 2015 的 Array.from() 產生新的 array,都不是很方便

Rest Parameter


1
2
3
4
5
function sum(...arguments) {
return arguments.reduce((acc, elm) => acc + elm, 0);
}

console.log(sum(1, 2, 3));

arguments 前面加上 ... 為 Rest Parameter,很清楚表示為 無限參數

因為 Rest Parameter 就是 真的 array,可以直接使用 Array.prototype.reduce()

Parameter 名稱可自由命名,不一定得用 arguments

rest000

  1. ...arguments 很清楚的表示其為 無限參數
  2. argumentsprototypeArray,不是 Object,因此可放心使用 Array.prototype 下所有 method

Conclusion


  • ECMAScript 2015 的 Rest Parameter 明顯比 ECMAScript 5 的 arguments 優異,應全面使用 Rest Parameter 取代 arguments

Reference


山田祥寬, 新一代 JavaScript 程式設計精髓

2018-11-10