[Javascript] スプレッド演算子(Spread Operator)の使い方

スプレッド演算子とは

Javascript(ES6) には スプレッド演算子 (Spread Operator)と呼ばれる演算子があります。これは ” … “(カンマ3つ)で表現され、分割代入(複数値の展開)の為に用いられるものです。検索しにくいですが。

例えば引数を3つ取る関数に配列をスプレッド演算子で展開して渡したりすることができます。具体的には以下のコードを見ます。

複数の引数を持つ関数に配列を展開して渡す

次のコードでは、引数 a, b, c を引数とする関数(合計値を求める)を定義しています。そこに、要素5つの配列をスプレッド演算子で展開して引数とし、呼び出しています。処理結果は 配列の先頭3要素 1, 2, 3 の合計値 6 となります。

function f(a, b, c) {
  console.log(a + b + c);
}

var array = [1, 2, 3, 4, 5];
f(...array); // 6

配列リテラルに使用する

配列リテラルを使用する際、要素の指定にスプレッド演算子が使用できます。それぞれの要素に対して展開されます。

var array1 = [1, 2, 3, 4, 5];
var array2 = [...array1, 6, 7, 8, 9]
console.log(array2); // [1,2,3,4,5,6,7,8,9]

配列の複製

スプレッド演算子を使えば配列の複製も簡単に行えます。ES5 までの array.slice(); とだいたい同じです。

var array1 = [1, 2, 3, 4, 5];
var array2 = [...array1, 6, 7, 8, 9]
var array3 = array1;
array1.pop(); // 末尾の 5 を取り出す

console.log(array1); // [1,2,3,4]
console.log(array2); // [1,2,3,4,5,6,7,8,9]
console.log(array3); // [1,2,3,4]

反復適用

配列の中身を一つの引数をとる関数に反復適用できます。これを使えば配列の要素を1行のコードでまとめて push したりもでるので便利です。

var array1 = [1, 2, 3];
var array2 = [4, 5];
array1.push(...array2);
console.log(array1); // [1, 2, 3, 4, 5]

console.log(...["hoge", "foo", "bar"]);
// hoge foo bar

可変長引数として扱う

関数側の引数にスプレッド演算子を付けた配列にすることで、可変長の引数を受け取ることができます。

function f(...args) {
console.log(args);
}
f(1, 2, 3); // [1, 2, 3]

まとめ

いろいろと応用できる便利なスプレッド演算子ですが、ES6の機能なのでブラウザ対応がまだ完全ではありません。トランスパイルして利用しましょう。ちなみに私は以下のサイトでサンプルの動作確認をしています。手抜きですが …

http://es6console.com/