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 の定義
ドラフト  

ブラウザの実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本サポート471215 無し3410
Destructuring rest parameters49 無し52 無し36 ?
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本サポート474712153410 ?
Destructuring rest parameters4949 無し5236 ? ?

関連項目

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

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