rest parameters とは、不特定多数の引数を配列として受け取る構文です。

構文

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

説明

関数の最後の名前付き引数に "..." の接頭辞を付けると、この最後の引数は、実際に関数に渡された残りの引数による 0 からtheArgs.length の直前までの要素の配列になります。

上記の例で、最初の引数は a に、2 番目の引数は b にマッピングされるため、theArgs は、関数に渡された引数の 3 番目から最後までを集めた配列になります。

rest parameters と arguments オブジェクトの違い

rest parameters と arguments オブジェクトの間には、主に 3 つの違いがあります:

  • 残余引数は、各引数に個別の名前が与えられていないだけです。一方で、arguments オブジェクトは、関数に渡されるすべての引数を含みます;
  • arguments オブジェクトは実配列ではありません。一方 rest parameters は、Array インスタンスです。これは、sortmapforEachpop のようなメソッドを直接適用できることを意味します。
  • arguments オブジェクトは、(callee プロパティのように) 自身固有の追加機能を持っています。

引数から配列へ

rest parameters は、arguments により引き起こされた定型コードを減らすために導入されました。

// rest parameters の登場以前は、以下のように記述していました:
function f(a, b){
  var args = Array.prototype.slice.call(arguments, f.length);

  // …
}

// これは以下と等価です:

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

rest parameter の非構造化

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 (4番目のパラメーターは非構造化されていない)

theArgs は配列なので、length プロパティを使用して要素数を取得できます:

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

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

次の例では、rest parameters を使用して 2 番目の引数から最後の引数までを集め、最初の引数とそれらを乗算します:

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]

次の例では、rest parameters に対して 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; // 前の行でエラーになるため、これは実行されません
}


console.log(sortArguments(5,3,7,1)); // TypeError を投げます: arguments.sort は関数ではありません

arguments オブジェクト上で Array メソッドを使用するには、まずオブジェクトを実配列に変換する必要があります。

function sortArguments() {
  var args = Array.from(arguments);
  var sortedArgs = args.sort();
  return sortedArgs;
}
console.log(sortArguments(5, 3, 7, 1)); // 1, 3, 5, 7

仕様

仕様 策定状況 コメント
ECMAScript 2015 (6th Edition, ECMA-262)
Function Definitions の定義
標準 初期定義。
ECMAScript Latest Draft (ECMA-262)
Function Definitions の定義
ドラフト  

ブラウザの実装状況

Update compatibility data on GitHub
デスクトップモバイルサーバー
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung InternetNode.js
基本対応Chrome 完全対応 47Edge 完全対応 12Firefox 完全対応 15IE 未対応 なしOpera 完全対応 34Safari 完全対応 10WebView Android 完全対応 47Chrome Android 完全対応 47Edge Mobile 完全対応 12Firefox Android 完全対応 15Opera Android 完全対応 34Safari iOS 完全対応 10Samsung Internet Android 完全対応 5.0nodejs 完全対応 6.0.0
完全対応 6.0.0
完全対応 4.0.0
無効
無効 From version 4.0.0: this feature is behind the --harmony runtime flag.
Destructuring rest parametersChrome 完全対応 49Edge 未対応 なしFirefox 完全対応 52IE 未対応 なしOpera 完全対応 36Safari ? WebView Android 完全対応 49Chrome Android 完全対応 49Edge Mobile 未対応 なしFirefox Android 完全対応 52Opera Android 完全対応 36Safari iOS ? Samsung Internet Android 完全対応 5.0nodejs 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連項目

ドキュメントのタグと貢献者

このページの貢献者: Uemmra3, mdmss37, hashedhyphen, Marsf, lv7777, shide55
最終更新者: Uemmra3,