Widely available すべての主要ブラウザで対応済み。安心して使用可能。

Spread syntax

スプレッド構文 (...) 構文を使うと、配列式や文字列などの反復可能オブジェクトを、0 個以上の引数（関数呼び出しの場合）や要素（配列リテラルの場合）を目的の場所に展開することができます。オブジェクトリテラルでは、スプレッド構文によりオブジェクトのプロパティを列挙し、作成するオブジェクトにキーと値の組を追加します。

スプレッド構文は、残余構文とまったく同じように見えますが、ある意味では、スプレッド構文は残余構文の反対です。スプレッド構文は配列を要素に「展開」しますが、リスト構文は複数の要素を集合し、単一の要素に「圧縮」します。残余引数と残余プロパティを参照してください。

言語コアES2015

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
spread
46
12
16
8
46
8
spread in arrays

配列リテラルで展開する
46
12
16
8
46
8
spread in function calls

関数呼び出しでの広がり
46
12
27
8
46
8
spread in object literals

オブジェクトリテラルでのスプレッド
60
79
55
11.1
60
11.3
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

JAVASCRIPT 
// Array spread
const arr = [1, 2, 3];
const copy = [...arr];
const merged = [...arr, 4, 5];

// Object spread
const obj = { a: 1, b: 2 };
const clone = { ...obj };
const updated = { ...obj, b: 3, c: 4 };

// Function arguments
Math.max(...arr); // 3

ライブデモ

配列のコピーとマージ

スプレッド構文で配列を浅いコピーしたり、複数の配列を結合できます。

JavaScript
出力
「実行」ボタンを押してください

オブジェクトのマージと上書き

オブジェクトのスプレッドでマージ。後から書いたプロパティが優先されます。

JavaScript
出力
「実行」ボタンを押してください

関数の引数に展開

配列の要素を個別の引数として関数に渡せます。

JavaScript
出力
「実行」ボタンを押してください

実務での使いどころ

  • Spread syntax の活用

    スプレッド構文 (...) 構文を使うと、配列式や文字列などの反復可能オブジェクトを、0 個以上の引数（関数呼び出しの場合）や要素（配列リテラルの場合）を目的の場所に展開することができます。

注意点

  • 特になし。すべての主要ブラウザで安定して動作する。

アクセシビリティ

  • JavaScript による動的更新時は、aria-live リージョンで変更をスクリーンリーダーに通知する。

参考リンク