...args剩余參數用法

 

剩余參數語法允許我們將一個不定數量的參數表示為一個數組。

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

語法

function(a, b, ...theArgs) {
  // ...
}

　　

描述

如果函數的最后一個命名參數以...為前綴，則它將成為一個數組，其中從0（包括）到theArgs.length（排除）的元素由傳遞給函數的實際參數提供。

在上面的例子中，theArgs將收集該函數的第三個參數（因為第一個參數被映射到a，而第二個參數映射到b）和所有后續參數。

剩余參數和 arguments對象的區別

剩余參數和 arguments對象之間的區別主要有三個：

• 剩余參數只包含那些沒有對應形參的實參，而 arguments 對象包含了傳給函數的所有實參。
• arguments對象不是一個真正的數組，而剩余參數是真正的 Array實例，也就是說你能夠在它上面直接使用所有的數組方法，比如 sort，map，forEach或pop。
• arguments對象還有一些附加的屬性 （如callee屬性）。

從 arguments 到數組

引入了剩余參數來減少由參數引起的樣板代碼。

// Before rest parameters, the following could be found:
function f(a, b) {
  var args = Array.prototype.slice.call(arguments, f.length);

  // …
}

// to be equivalent of

function f(a, b, ...args) {
  
}

 

解構剩余參數

剩余參數可以被解構，這意味着他們的數據可以被解包到不同的變量中。請參閱解構賦值。

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屬性得到剩余參數的個數：

function fun1(...theArgs) {
  alert(theArgs.length);
}
 
fun1();  // 彈出 "0", 因為theArgs沒有元素
fun1(5); // 彈出 "1", 因為theArgs只有一個元素
fun1(5, 6, 7); // 彈出 "3", 因為theArgs有三個元素

　　

下例中，剩余參數包含了從第二個到最后的所有實參，然后用第一個實參依次乘以它們：

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對象不可以：

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方法，它必須首先被轉換為一個真正的數組。

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