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

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

語法

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

描述

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

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

其餘參數和 arguments 物件的差異

以下是其餘參數和 arguments 物件三個主要的差異:

  • 其餘參數是 arguments 物件被傳入到函式的時候,還沒被指定變數名稱的引數。
  • arguments 物件不是一個實際的陣列,而 rest parameter 是陣列的實體,即 sortmapforEach pop 可以直接在其餘參數被調用。
  • arguments 物件自身有額外的功能,例如 callee 屬性。

將參數轉成陣列

其餘參數被介紹作為取代用 arguments 寫的範例程式。

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

  // …
}

// 現在可以寫成這樣

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

解構其餘參數 rest parameters

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

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

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

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 的方法可以在其餘參數上被使用,但 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,所以永遠不會執行此行。
}

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

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

function sortArguments() {
  var args = Array.from(arguments);
  var sortedArgs = args.sort();
  return sortedArgs;
}
console.log(sortArguments(5, 3, 7, 1)); // 顯示 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.
Draft  

瀏覽器相容性

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetNode.js
Basic supportChrome Full support 47Edge Full support 12Firefox Full support 15IE No support NoOpera Full support 34Safari Full support 10WebView Android Full support 47Chrome Android Full support 47Edge Mobile Full support 12Firefox Android Full support 15Opera Android Full support 34Safari iOS Full support 10Samsung Internet Android Full support 5.0nodejs Full support 6.0.0
Full support 6.0.0
Full support 4.0.0
Disabled
Disabled From version 4.0.0: this feature is behind the --harmony runtime flag.
Destructuring rest parametersChrome Full support 49Edge No support NoFirefox Full support 52IE No support NoOpera Full support 36Safari ? WebView Android Full support 49Chrome Android Full support 49Edge Mobile No support NoFirefox Android Full support 52Opera Android Full support 36Safari iOS ? Samsung Internet Android Full support 5.0nodejs Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
User must explicitly enable this feature.
User must explicitly enable this feature.

參見

文件標籤與貢獻者

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