JavaScriptのSetを使ってみる

JavaScriptのSetオブジェクトについて、どういった挙動なのかを試してみます。

Setオブジェクト

Setオブジェクトは重複しない値の集合を管理できるオブジェクトです。
new Set()で作成できます。

const setObj = new Set(['A', 'B', 'C', 'A', 1, 2, '1']);
console.log(setObj); // Set(6) { 'A', 'B', 'C', 1, 2, '1' }

引数に配列を渡していますが、その中の重複する値(‘A’)が除去されていることが確認できます。
new Set()のデモページ

または、add()を使って追加することもできます。

const data = ['A', 'B', 'C', 'A', 1, 2, '1'];

const setObj = new Set();
for (const val of data) {
  // 要素の追加
  setObj.add(val);
}
console.log(setObj); // Set(6) { 'A', 'B', 'C', 1, 2, '1' }

add()のデモページ

要素の数を取得する場合、sizeを使用します。

const setObj = new Set(['A', 'B', 'C', 'A', 1, 2, '1']);

// 要素の数
console.log(setObj.size); // 6

sizeのデモページ

特定の要素があるかどうかはhas()を使用します。

const setObj = new Set(['A', 'B', 'C', 'A', 1, 2, '1']);

// 要素があるかどうか
console.log(setObj.has('A')); // true
console.log(setObj.has('2')); // false

has()のデモページ

要素の削除にはdelete()を使用します。

const setObj = new Set(['A', 'B', 'C', 'A', 1, 2, '1']);

// 要素の削除
setObj.delete(1);
console.log(setObj); // Set(5) { 'A', 'B', 'C', 2, '1' }

delete()のデモページ

ループ処理にはfor…ofなどが使えます。

const setObj = new Set(['A', 'B', 'C', 'A', 1, 2, '1']);

// Setのループ
for (const val of setObj) {
  console.log(val); // 'A', 'B', 'C', 1, 2, '1'
}

Setのループのデモページ

Setオブジェクトを配列に変換する場合、from()を使用します。

const setObj = new Set(['A', 'B', 'C', 'A', 1, 2, '1']);

// 配列に変換
const array = Array.from(setObj);
console.log(array); // ['A', 'B', 'C', 1, 2, '1']

from()のデモページ

すべての要素を取り除く場合はclear()を使用します。

const setObj = new Set(['A', 'B', 'C', 'A', 1, 2, '1']);

// 配列のクリア
setObj.clear();
console.log(setObj); // Set(0) {}

clear()のデモページ

注意点として、Setオブジェクトの値に配列やオブジェクトを使用する場合、見た目上同じでも重複として扱われないことがあります。

const setObj = new Set();
const data = {name: 'nozomi', id: 'wtu'};
setObj.add(data);
setObj.add({name: 'nozomi', id: 'wtu'});
console.log(setObj); // Set(2) { {name: 'nozomi', id: 'wtu'}, {name: 'nozomi', id: 'wtu'} }

値にオブジェクトを使用するデモページ

変数に格納していたオブジェクトを2回Setオブジェクトに追加する、といった場合は重複として扱われます。

const setObj = new Set();
const data = {name: 'nozomi', id: 'wtu'};
setObj.add(data);
setObj.add(data);
console.log(setObj); // Set(2) { {name: 'nozomi', id: 'wtu'} }

値にオブジェクトを使用するデモページ2