Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
19
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

@riku-shiru

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

さいごに

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

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
19
Help us understand the problem. What are the problem?