Zenn
👽

Setオブジェクトに関して

2022/01/31に公開
JavaScript
TypeScript
tech

どうもフロントエンドエンジニアのoreoです。今回は、前回の投稿したMapオブジェクトに関してに関連して、配列の重複値削除で大活躍するSetオブジェクトに関して、改めて整理してみたいと思います。

Setとは?

Setとは、Arrayと似た(キーなしの)値のコレクションです。Arrayとは、主に下記のような違いがあります(詳細後述)。

①値が一意である(重複して持つことができない)。

②列挙可能でない

Setの主なメソッド

  • new Set(iterable)
    • setを作成することができます。引数に配列を与えるとその配列の値をもったsetを作成できる。
  • set.add(value)
    • 引数に値を渡して、設定することができる。
  • set.delete(value)
    • 引数に渡した値を削除することができる。また、引数に渡した値が存在すれば true, 存在しなければ false を返す。
  • set.has(value)
    • 引数に渡した値が存在すれば true, 存在しなければ false を返す。
  • set.clear()
    • 値を全て削除することができる。
  • set.size
    • set の要素数を取得することができる。
  • set.forEach((val1,val2,set)=>{})
    • .forEachメソッドで、反復処理が実行可能。第一引数(val1)と第二引数(val2)には同じ値が入り、第三引数(set)には、setオブジェクト自身が入る。

違い①　値が一意である(重複して値を持つことができない)

Arrayでは、下記のように重複値('hoge2')を持つことができます

const array = [];

array.push("hoge1");
array.push("hoge2");
array.push("hoge2");
array.push("hoge3");

console.log(array)  //[ 'hoge1', 'hoge2', 'hoge2', 'hoge3' ]と出力

一方、setでは、重複値('hoge2')を持つことができません。

const set = new Set();

set.add("hoge1");
set.add("hoge2");
set.add("hoge2");
set.add("hoge3");

console.log(set);  //Set(3) { 'hoge1', 'hoge2', 'hoge3' } と出力

new set()の引数にArrayを与えると、ArrayをSetオブジェクトに変換し、与えたArrayの重複値を削除することができる。

const array = [ 'hoge1', 'hoge2', 'hoge2', 'hoge3' ]
const set = new Set(array);

console.log(set);  //Set(3) { 'hoge1', 'hoge2', 'hoge3' } と出力

なお、SetオブジェクトをArrayに変換したい場合は、Array.from(setオブジェクト)

やスプレッド構文を使うと変換できます。

const set = new Set();
set.add("hoge1");
set.add("hoge2");
set.add("hoge3");

const array1 = Array.from(set);
console.log(array1);　//[ 'hoge1', 'hoge2', 'hoge3' ]と出力

const array2 = [...set];
console.log(array2);　//[ 'hoge1', 'hoge2', 'hoge3' ]と出力

違い②　列挙可能でない

Arrayでは、for...inを使って、要素番号の列挙が可能です。

const array = [ 'hoge1', 'hoge2', 'hoge3' ]

for(const key in array){
    console.log(key);  
}

//以下のように出力される
//0
//1
//2

一方、setでは、for...inを用いた列挙ができません。

const set = new Set();
set.add("hoge1");
set.add("hoge2");
set.add("hoge3");

for(const s in set){
    console.log(s); //何も出力されない
}

尚、Setはイテレーターなので、Arrayと同じくfor...ofでの反復処理は可能

const set = new Set();

set.add("hoge1");
set.add("hoge2");
set.add("hoge3");

//for...ofで反復可能
for(const s of set){
    console.log(s);
}
//以下のように出力される
//hoge1
//hoge2
//hoge3

//forEachで反復処理も可能
set.forEach((val1,val2,set)=>{
    console.log(val1,val2,set);
})
//以下のように出力される
//hoge1 hoge1 Set(3) { 'hoge1', 'hoge2', 'hoge3' }
//hoge2 hoge2 Set(3) { 'hoge1', 'hoge2', 'hoge3' }
//hoge3 hoge3 Set(3) { 'hoge1', 'hoge2', 'hoge3' }

最後に

重複値の削除にはもってこいですね。これからもどんどん活用していきたいです！

参考

Set - JavaScript | MDN

Map と Set

Discussion