Help us understand the problem. What is going on with this article?

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

さいごに

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

riku-shiru
普段はキーボードをぽちぽちしています。新卒3年目Webエンジニアです。
lifull
日本最大級の不動産・住宅情報サイト「LIFULL HOME'S」を始め、人々の生活に寄り添う様々な情報サービス事業を展開しています。
https://lifull.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした