# 語法 ~~~js function(a, b, ...theArgs) { // ... } ~~~ # 描述 如果函數的最后一個命名參數以`...`為前綴，則它將成為一個由剩余參數組成的真數組，其中從`0`（包括）到`theArgs.length`（排除）的元素由傳遞給函數的實際參數提供。 在上面的例子中，`theArgs`將收集該函數的第三個參數（因為第一個參數被映射到`a`，而第二個參數映射到`b`）和所有后續參數。 ## 剩余參數和?`arguments`對象的區別 剩余參數和?`[arguments]`對象之間的區別主要有三個： * 剩余參數只包含那些沒有對應形參的實參，而`arguments`對象包含了傳給函數的所有實參。 * `arguments`對象不是一個真正的數組，而剩余參數是真正的?`[Array]`實例，也就是說你能夠在它上面直接使用所有的數組方法，比如?`[sort]`，`[map]`，`[forEach]`或`[pop]`。 * `arguments`對象還有一些附加的屬性?（如`callee`屬性）。 ## 從 arguments?到數組 引入了剩余參數來減少由參數引起的樣板代碼。 ~~~js // Before rest parameters, "arguments" could be converted to a normal array using: function f(a, b) { var normalArray = Array.prototype.slice.call(arguments); // -- or -- var normalArray = [].slice.call(arguments); // -- or -- var normalArray = Array.from(arguments); var first = normalArray.shift(); // OK, gives the first argument var first = arguments.shift(); // ERROR (arguments is not a normal array) } // Now we can easily gain access to a normal array using a rest parameter function f(...args) { var normalArray = args; var first = normalArray.shift(); // OK, gives the first argument } ~~~ > 您還可以使用[`Array.from()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from "Array.from() 方法從一個類似數組或可迭代對象中創建一個新的，淺拷貝的數組實例。")方法或[擴展運算符](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_operator)將參數轉換為真實數組： ~~~js var args = Array.from(arguments); var args = [...arguments]; ~~~ ## 解構剩余參數 剩余參數可以被解構，這意味著他們的數據可以被解包到不同的變量中。 ~~~js function f(...[a, b, c]) { return a + b + c; } f(1) // NaN (b and c are undefined) f(1, 2, 3) // 6 f(1, 2, 3, 4) // 6 (the fourth parameter is not destructured) ~~~ ## 示例 因為`theArgs`是個數組，所以你可以使用`length`屬性得到剩余參數的個數： ~~~js function fun1(...theArgs) { alert(theArgs.length); } fun1(); // 彈出 "0", 因為theArgs沒有元素 fun1(5); // 彈出 "1", 因為theArgs只有一個元素 fun1(5, 6, 7); // 彈出 "3", 因為theArgs有三個元素 ~~~ 下例中，剩余參數包含了從第二個到最后的所有實參，然后用第一個實參依次乘以它們： ~~~js function multiply(multiplier, ...theArgs) { return theArgs.map(function (element) { return multiplier * element; }); } var arr = multiply(2, 1, 2, 3); console.log(arr); // [2, 4, 6] ~~~ 下例演示了你可以在剩余參數上使用任意的數組方法，而`arguments`對象不可以： ~~~js function sortRestArgs(...theArgs) { var sortedArgs = theArgs.sort(); return sortedArgs; } alert(sortRestArgs(5,3,7,1)); // 彈出 1,3,5,7 function sortArguments() { var sortedArgs = arguments.sort(); return sortedArgs; // 不會執行到這里 } alert(sortArguments(5,3,7,1)); // 拋出TypeError異常:arguments.sort is not a function ~~~ 為了在`arguments`對象上使用`Array`方法，它必須首先被轉換為一個真正的數組。 ~~~js function sortArguments() { var args = Array.prototype.slice.call(arguments); var sortedArgs = args.sort(); return sortedArgs; } console.log(sortArguments(5, 3, 7, 1)); // shows 1, 3, 5, 7 ~~~ # 實踐 ## 遍歷參數求和 ### 使用剩余參數和高階函數reduce ```js function sum(...theArgs) { return theArgs.reduce((previous, current) => { return previous + current; }); } console.log(sum(1, 2, 3)); // expected output: 6 console.log(sum(1, 2, 3, 4)); // expected output: 10 ``` ### 使用arguments ~~~js function sum() { var sigma=0, len = arguments.length; for(var i=0; i<len; i++){ sigma+= arguments[i]; } return sigma; } sum() // 0 sum(1) // 1 sum(1,2,3,4); // 10 ~~~