重複しない集まり Set

01 / 05

同じものが混ざってしまう

配列に色を集めていくとき、うっかり同じ色を2回足してしまうことがある。配列は並べて持つ入れものだから、同じ値でもそのまま2つ入るんだ。

「もう入っているか」を毎回 if で調べるのは面倒だよね。それを入れもの側にやってもらおう。

02 / 05

Set は同じ値を1つにまとめる

new Set() と書くと、重複しない集まりができる。入れるのは add(値) で、件数は Map と同じ size だよ。

同じ値を何度 add しても、中に入るのは1つだけ。自分で調べなくていいんだ。

const fruits = new Set();fruits.add("りんご");fruits.add("みかん");fruits.add("りんご");console.log(fruits.size);

実行結果

03 / 05

中身を見る2つの方法

Map と同じで、Set をそのまま console.log に渡しても中身は出ない。この教材の表示のしかたでは {} としか出ないよ。

中身を見たいときはこの2つ。

[...集まり] で配列に広げる（スプレッドだね）
for...of で1つずつ取り出す

const fruits = new Set();fruits.add("りんご");fruits.add("みかん");console.log(fruits);console.log([...fruits]);for (const fruit of fruits) {  console.log(fruit);}

実行結果

{}
["りんご", "みかん"]
りんご
みかん

04 / 05

番号では取り出せない

has(値) で在るかを調べ、delete(値) で1つ消せる。ここまでは Map と同じ感覚だよ。

違うのは番号で取り出せないこと。集まり[0] と書いても undefined になる。順番に意味を持たせる入れものではないんだ。番号でほしいなら、いったん配列に広げよう。

const colors = new Set();colors.add("あか");console.log(colors.has("あか"));console.log(colors[0]);console.log([...colors][0]);

実行結果

true
undefined
あか

05 / 05

重複を取りのぞく

Set がいちばん光るのはここ。new Set(配列) と書くと、配列の中身をそのまま入れた集まりができる。重複はそのとき1つにまとまるよ。

それを [... ] で配列に戻せば、重複を取りのぞいた配列が2行で作れる。for と if で書いていた処理が消えるんだ。それじゃあ試してみよう。

const list = ["あか", "あお", "あか"];const colors = new Set(list);console.log([...colors]);console.log(colors.size);

実行結果

["あか", "あお"]
2