JSのスプレッド演算子

JSのスプレッド演算子について

今回はJavaScriptのスプレッド演算子についてご紹介させていただきます。

スプレッド演算子ってなに？

まずは以下のコードを見てください。

const foo = [1, 2];
const bar = [...foo]; 

...foo ??
スプレッド演算子とは、...を用いた値の展開を行うオペレーターです。

上記のコードの場合barの値はどうなっているかというと、fooが展開された値が入っていることになります。

bar = [...foo]; // => [1, 2]

これは二つの配列をマージする時にも使えます。

foo = [1, 2];
bar = [3, 4];
poe = [...foo, ...bar]; // => [1, 2, 3, 4]

オブジェクトにも使えるの？

上記の例は配列によるものでしたが、オブジェクトにも使えます。
オブジェクトの場合には以下のようになります。

let foo = {a:1,b:2};
let poe = {c:3,d:4};
baz = {...foo,...poe}; // { a: 1, b: 2, c: 3, d: 4 }

つまり、配列でもオブジェクトでもどちらでも値を展開するのに利用することができます。
配列の場合にはfor(... of ...)と似た様な挙動になり、
オブジェクトの場合にはfor(... in ...)と似た挙動になります。

他にはどんなことができる？

コピー

配列の複製を簡単にすることができます。

const foo = [1, 2];
const bar = [...foo]; //[1, 2]

マージ

二つ以上の配列のマージができます。
arrayで言う所のconcat(),objectで言う所のassign()みたいなことですね。

配列の挙動の確認

foo = [1,2];
poe = [3,4];

//concat
console.log(foo.concat(poe)); //[ 1, 2, 3, 4 ]
//スプレッド演算子
console.log([...foo,...poe]); //[ 1, 2, 3, 4 ]

オブジェクトの挙動の確認

foo = {a:1,b:2};
poe = {c:3,d:4};

//assign
console.log(Object.assign({},foo,poe)); //{ a: 1, b: 2, c: 3, d: 4 }
//スプレッド演算子
console.log({...foo,...poe}); //{ a: 1, b: 2, c: 3, d: 4 }

"String".split("")

厳密には"それっぽい"ことができます。
やってみましょう。

console.log("Hello".split("")); //[ 'H', 'e', 'l', 'l', 'o']
console.log([..."Hello"]); //[ 'H', 'e', 'l', 'l', 'o']

分割代入で余った引数を...hogeで受け取る

以下のように受け取ることができます。

let [huga, poe, ...hoge] = [1, 2, 3, 4, 5];
console.log(hoge); // => [ 3, 4, 5 ]

配列から重複を取り除く

const data = ['a', 'b', 'c', 'a', 'b', 'd'];
const dist = [...(new Set(data))];
console.log(dist) //['a', 'b', 'c', 'd']

Set オブジェクトは重複しない値の集合を管理するためのオブジェクトです。
重複する値が追加された場合には、それを無視します。

さいごに

スプレッド演算子の一例についてご紹介させていただきました。
かなり使えるなと思ったので、ぜひ今後活用してみてほしいです。