スプレッド演算子

スプレッド演算子 は、複数の引数 (関数呼び出しのため) または複数の要素 (配列リテラルのため)、あるいは複数の値 (分割代入のため) が置かれるところで式が展開されます。

Syntax

関数の呼び出しに対して:

myFunction(...iterableObj);

配列リテラルに対して:

[...iterableObj, 4, 5, 6]

分割代入に対して:

[a, b, ...iterableObj] = [1, 2, 3, 4, 5];

例

より良い適用

例: 配列を関数の引数として使用したい場面では、Function.prototype.apply が使用されます。

function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction.apply(null, args);

ES6 のスプレッド演算子を使うと、これを以下のように書けます:

function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction(...args);

引数リスト内の任意の引数に対してスプレッド構文が使用でき、それを複数回使用できます。

function myFunction(v, w, x, y, z) { }
var args = [0, 1];
myFunction(-1, ...args, 2, ...[3]);

より強力な配列リテラル

例: 今日、ある既存の配列を一部に含めた新しい配列を作成したい場合、配列リテラル構文はもはや十分ではありません。push、splice、concat 等の組み合わせを用いて、配列を命令コードにフィードバックしなければなりません。これは、スプレッド構文を使うとはるかに簡潔になります:

var parts = ['shoulder', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes']; // ["head", "shoulders", "knees", "and", "toes"]

引数リストでのスプレッド構文と同じく、... は配列リテラル内のどこでも、複数回使用できます。

new での適用

例: ES5では、new を apply とともに構成することはできません。(ES5 では、apply は [[Call]] であり、[[Construct]] ではありません)。ES6 では当然、スプレッド構文でこれをサポートしています:

var dateFields = readDateFields(database);
var d = new Date(...dateFields);

より良い push

例: push は、配列を既存の配列の末尾にプッシュするためによく使用されます。ES5では、よく次のように書かれます:

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// すべてのアイテムを arr2 から arr1 に追加します
Array.prototype.push.apply(arr1, arr2);

ES6 では、スプレッド構文で次のように書けます:

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);

反復でのみ適用

var obj = {"key1":"value1"};
function myFunction(x) {
    console.log(x); // undefined
}
myFunction(...obj);
var args = [...obj];
console.log(args, args.length) //[] 0

仕様

ブラウザの実装状況

関連項目

• 残余引数