翻譯不完整。請協助 翻譯此英文文件

rest parameter 的語法可以讓我們表示不確定數量的參數,並將其視為一個陣列。

語法

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

說明

如果函釋的最後一個命名參數以...開頭,它會被視為一個陣列。該陣列的元素會被置於索引從0(含)到的theArgs.length(不含)位置,並且被視為一個函釋的參數。

在上面的範例中,theArgs會將函式f中第三個(函)以後的參數收集起來。

rest parameters 和 arguments 物件的差異

以下是 rest parameter 和 arguments 物件三個主要的差異:

  • rest parameters are only the ones that haven't been given a separate name, while the arguments object contains all arguments passed to the function;
  • arguments 物件不是一個實際的陣列,而 rest parameter 是陣列的實體,即sortmapforEach 或 pop可以直接在 rest parameter 被調用。
  • arguments 物件自身有其餘的功能,例如 callee 屬性。

將 arguments 轉成陣列

rest parameter 被介紹作為取代用 arguments 寫的範例程式。

// 在有 rest parameters 之前, 你可能見過下面的程式碼:
function f(a, b) {
  var args = Array.prototype.slice.call(arguments, f.length); // f.length 表示 arguments 的數量

  // …
}

// 現在可以寫成這樣

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

解構 rest parameters

rest parameter 可以被解構,換句話說,可以把這個陣列解開,並將各個元素取出成為個別的變數。請參考解構賦值

function f(...[a, b, c]) {
  return a + b + c;
}

f(1)          // NaN (b 和 c 都是 undefined)
f(1, 2, 3)    // 6
f(1, 2, 3, 4) // 6 (第四個參數不會被解構,因為解構式只有三個定義好的變數名稱)

範例

因為 theArgs 是一個陣列,所以它會有 length 屬性,作為表示參數數量:

function fun1(...theArgs) {
  console.log(theArgs.length);
}

fun1();  // 0
fun1(5); // 1
fun1(5, 6, 7); // 3

在接下來的範例中,rest parameter 被用來收集第一個之後的所有參數並存在陣列中。 在這個陣列裡的每個元素(數字),都會和第一個參數相乘後取代原本的元素,最後再將取代元素後的陣列回傳。

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]

下列範例展示 Array 的方法可以在 rest parameter 上被使用,但 arguments 則不行。

function sortRestArgs(...theArgs) {
  var sortedArgs = theArgs.sort();
  return sortedArgs;
}

console.log(sortRestArgs(5, 3, 7, 1)); // 顯示 1, 3, 5, 7

function sortArguments() {
  var sortedArgs = arguments.sort(); 
  return sortedArgs; // 因為前一行會因為arguments沒有sort()這個方法而造成TypeError,所以永遠不會執行此行。
}

// 會拋出 TypeError: arguments.sort is not a function
console.log(sortArguments(5, 3, 7, 1));

In order to use Array methods on the arguments object, it must be converted to a real array first. 

為了要在 arguments 物件上使用 Array 的方法,可以將它轉換成真的 Array 實體,或者以 apply() 直接調用需要的方法。

function sortArgumentsByConversion() {
  var args = Array.prototype.slice.call(arguments);
  var sortedArgs = args.sort();
  return sortedArgs;
}
console.log(sortArgumentsByConversion(5, 3, 7, 1)); // shows 1, 3, 5, 7

function sortArgumentsByApply() {
  var sortedArgs = [].sort.apply(arguments);
  return sortedArgs;
}
console.log(sortArgumentsByApply(5, 3, 7, 1)); // shows 1, 3, 5, 7

 

規範

Specification Status Comment
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Function Definitions' in that specification.
Standard Initial definition
ECMAScript Latest Draft (ECMA-262)
The definition of 'Function Definitions' in that specification.
Living Standard  

瀏覽器相容性

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 47 20 (12.10240) 15.0 (15.0) No support 34 10
Destructuring 49 No support 52.0 (52.0) No support 36 ?
Feature Android Webview Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 47 47 20 (12.10240) 15.0 (15.0) No support 34 No support
Destructuring 49 49 No support 52.0 (52.0) ? 36 ?

參見

文件標籤與貢獻者

 此頁面的貢獻者: jsgao0
 最近更新: jsgao0,