スプレッド演算子

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

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]);

より強力な配列リテラル

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

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

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

new での適用

例: ES5では、newapply とともに構成することはできません。(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

仕様

仕様 策定状況 コメント
ECMAScript 2015 (6th Edition, ECMA-262) 標準 仕様の個別の章で定義: 配列イニシャライザ, 引数リスト
ECMAScript 2017 Draft (ECMA-262) ドラフト

ブラウザの実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
配列リテラルでのスプレッド演算 46 16 (16) Edge 未サポート 7.1
関数呼び出しでのスプレッド演算 46 27 (27) Edge 未サポート 7.1
分割代入でのスプレッド演算 49 34 (34) 未サポート ? ?
機能 Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
配列リテラルでのスプレッド演算 未サポート 46 16.0 (16) 未サポート 未サポート 8 46
関数呼び出しでのスプレッド演算 未サポート 46 27.0 (27) 未サポート 未サポート 8 46
分割代入でのスプレッド演算 未サポート 未サポート 34 (34) ? ? ? 未サポート

関連項目

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

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