MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

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

構文

function(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) {
  
}

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

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

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

仕様

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

ブラウザの実装状況

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 47 (有) 15.0 (15.0) 未サポート 34 未サポート
機能 Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
基本サポート 未サポート 47 15.0 (15.0) 未サポート 未サポート 未サポート 47

関連項目

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

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