スプレッド演算子

スプレッド演算子とは

スプレッド構文 - JavaScript | MDN によると、

関数呼び出しでは 0 個以上の引数として、Array リテラルでは 0 個以上の要素として、Object リテラルでは 0 個以上の key-value のペアとして、Array や String などの iterable オブジェクトをその場で展開します

とあります。自分なりの言葉でいうと、 iterableオブジェクト(順番に値を取り出せるオブジェクト)をその場で展開してくれるものといった感じでしょうか。

プログラム

以下ではプログラムを通じてスプレッド演算子の 使い方を例示していきます。

配列の結合

// 配列をpushする。
var arrA = [0, 1, 2];
let arrB = [3, 4, 5];

// 以下は、errorとなる。引数に配列を持てないため
arrA.push(arrB); # [ 0, 1, 2, [ 3, 4, 5 ] ]
// スプレッド演算子(...)を用いると
// iterableオブジェクト(順番に値を取り出せるオブジェクト)をその場で展開してくれる
var arrA = [0, 1, 2];
arrA.push(...arrB); #[ 0, 1, 2, 3, 4, 5 ]

// スプレッド演算子を使わないケースは以下の通り
arrC = Array.prototype.push(arrA, arrB)
console.log(arrC);

配列の中から最大値を取得

// 最大値
let arrD = [1, 2, 3, 4, 5];
// 配列を引数に持つことが出来る。
console.log(Math.max(...arrD));
// 通常のケースだとapplyを用いて引数を配列化
// 第一引数はthisを指定出来るが、使わないため、null
console.log(Math.max.apply(null, arrD))

分割代入

// 分割代入
// 配列やオブジェクトの要素を取り出して個別の変数に代入する
let aryE = [1, 2, 3];
let [a, b, c] = aryE;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

参考サイト

JSのスプレッド演算子を理解する