はじめに

ES2015から使えるようになり、徐々にコード内でも市民権を得てきた スプレッド構文。
とても便利な構文なので備忘録もかねてまとめてみました。

スプレッド構文とは

よく見るピリオド3つのコイツです。

...

組織によっては可読性等の問題から使用を控えるように教えられているところもあるかもしれません。
初めて見る方もいると思うので、リファレンスから説明を引用します。

スプレッド構文を使うと、配列式や文字列などの反復可能オブジェクトを、 0 個以上の引数 (関数呼び出しの場合) や要素 (配列リテラルの場合) を期待された場所で展開したり、オブジェクト式を、 0 個以上のキーと値のペア (オブジェクトリテラルの場合) を期待された場所で展開したりすることができます。

反復可能なオブジェクトとは

iterablesなオブジェクトとも言われます。
簡単にいうと for..ofループで動作できるものになります。

一番イメージがつきやすいのは配列ではないでしょうか。

配列を展開？

簡単にいうと配列から中身を全部出してくれるという様なイメージです。
以下のサンプルコードでは、スプレッド構文を使う事で配列を 展開して sum関数の引数にセットしてくれます。

functionsum(x,y,z){returnx+y+z;}constnumbers=[1,2,3];console.log(sum(...numbers));// 6

使いこなすととても便利

組織のローカルルールやサービスの対象とするブラウザによっては使えない構文ではありますが、使いこなすととても便利なので是非、チートシートとして読んでみてください。

配列の複製

既存の配列から新たに配列を作成します。

constsampleArr=[{'key1':100},{'key2':200}];constcopyArr=[...sampleArr];// スプレッド構文でコピーconsole.log(copyArr);// [{ key1: 100 }, { key2: 200 }]

このように Array.from()などを使わないスマートなコードになります。

ただしシャローコピーなので注意

スプレッド構文や Array.from()などではコピー元の配列と参照元は同じになるので、しっかりと意識しておきましょう。
ディープコピーがしたい場合は JSON.stringify()で文字列変換してから再び JSON.perse()で配列に戻すなどの対処が必要です。

constsampleArr=[{'key1':100},{'key2':200}];constcopyArr=[...sampleArr];// スプレッド構文でコピーcopyArr['0'].key1='changed';// key1を'changed'に変更console.log(copyArr['0'].key1);// changed

配列の先頭に要素を追加

もちろん配列の先頭に既存の配列を追加することも可能です。

constsampleArr1=[1,2,3];constsampleArr2=['d','e','f'];sampleArr1.unshift(...sampleArr2);console.log(sampleArr1);// ['a', 'b', 'c', 1, 2, 3]

配列の末尾に要素を追加

配列の末尾に既存の配列を追加したい時もスプレッド構文の出番です。

constsampleArr1=[1,2,3];constsampleArr2=['d','e','f'];sampleArr1.push(...sampleArr2);// スプレッド構文で末尾に追加console.log(sampleArr1);// [1, 2, 3, 'a', 'b', 'c']

複数の配列を合成

複数の配列をひとつにまとめることも可能です。

constsampleArr1=[1,2,3];constsampleArr2=['d','e','f'];constmergeArr=[...sampleArr1,...sampleArr2];console.log(mergeArr);// [ 1, 2, 3, 'd', 'e', 'f' ]

配列から重複する要素を取り除く

スプレッド構文HACKの中でも一番便利な使い方だと思ってます。

重複を許容しない Setオブジェクトを使うことで配列から重複を取り除き、スプレッド構文と組み合わせることで、配列に戻してあげることができます。

constsampleArr=['a','b','b','c','d','d'];constremovedArr=[...(newSet(sampleArr))];console.log(removedArr);// [ 'a', 'b', 'c', 'd' ]

文字列を配列に変換

今までは .split('')などを用いていた処理もこんなに簡単にかけてしまいます。

conststring='Hello World';constconvertedArr=[...string];console.log(convertedArr);//  [ 'H', 'e', 'l', 'l', 'o', ' ', 'W', 'o', 'r', 'l', 'd' ]

オブジェクトの複製

スプレッド構文の出番は配列だけではありません。
反復可能であれば何でも使えてしまいます。

配列と同様にオブジェクトの複製も、こんなにスマートに書けるんです。

constsampleObj={key1:1,key2:2,key3:3,};constcopyObj={...sampleObj};console.log(copyObj);// { key1: 1, key2: 2, key3: 3 }

ただしシャローコピーなので注意

配列編と同じように、これもまたシャローコピーなので使用方法には注意してください。
ディープコピーがしたい場合は JSON.stringify()で文字列変換してから再び JSON.perse()でオブジェクトに戻すなどの対処が必要です。

オブジェクトの合成

配列と同様にオブジェクトも簡単に合成することができます。

constsampleObj1={key1:1,key2:2,key3:3,};constsampleObj2={key4:4,key5:5,key6:6,};constcopyObj={...sampleObj1,...sampleObj2};console.log(copyObj);// { key1: 1, key2: 2, key3: 3, key4: 4, key5: 5, key6: 6 }

まとめ

スプレッド構文はまだまだ新しい構文なので、組織やブラウザによっては禁止されているところもあるかもしれませんが、上手に使い分けることでスマートなコーディングが可能になるのではないでしょうか。