【JavaScript】Setオブジェクトとは何か？配列の中の重複した要素を削除する方法。使い方や配列にする・戻す方法を実例で解説(new Set, add, delete, clear, had)

Setオブジェクトとは何か？

Setオブジェクトは簡単に言うと、要素の重複を許可しない配列のことです。だだし、厳密には配列ではなくset型という全く別の型になります。

Setと配列（Array）の違い

配列には配列番号のように各要素に順番が割り振られています。

一方、Setオブジェクトの中の要素には順番がありません。

配列（Array）はひと升ひと升に順序を決めて要素を入れていくイメージに対し、Setは袋の中に重複のない値をごそっといれるようなイメージになります。

＞参考：Setオブジェクト（MDN）

Setオブジェクトの使い方

Setオブジェクトを作成するには、「new Set」というコンストラクターでSetオブジェクトを生成します。

通常、生成したオブジェクトは変数に代入するのが一般的です。

let 変数 = new Set()

Setオブジェクトの使い方は次の５つの方法に分かれます。

Setオブジェクト作成時に要素を渡す

書き方

「new Set」でSetオブジェクトを生成するときに、配列などのオブジェクトを渡すことができます。

let 変数 = new Set( 要素 )

new Set(1)

//エラーになる
VM3232:1 Uncaught TypeError: number 1 is not iterable (cannot read property Symbol(Symbol.iterator))
    at new Set (<anonymous>)
    at <anonymous>:1:1

実例

例えば、重複した要素をもつ配列[4,3,2,1,4,3,2,1,5,4,3,2,3,4,1,1,1,2,2]から、重複した要素を削除して一意のSetオブジェクトを作成する場合は以下のようになります。

//重複要素のある配列
a = [4,3,2,1,4,3,2,1,5,4,3,2,3,4,1,1,1,2,2]

//Setオブジェクトの作成
let res = new Set(a)
console.log(res)

//出力
{4, 3, 2, 1, 5}

Setオブジェクトにしたことで、重複した要素が削除され、{4, 3, 2, 1, 5}となります。

配列の重複を削除するには、filterメソッドやindexOfメソッドなど別のメソッドを使う方法もありますが、Setを使う方が処理工数が少なくなります。

Setオブジェクトを配列に変換する方法

書き方

Setオブジェクトを配列に変換するには「Array.from()メソッド」を使います。

Array.from(Setオブジェクト)

実例

a = [4,3,2,1,4,3,2,1,5,4,3,2,3,4,1,1,1,2,2]

//Setオブジェクト
res = new Set(a)  //{4, 3, 2, 1, 5}

//配列に変換
arr = Array.from(res)
console.log(arr)

//出力
[4, 3, 2, 1, 5]

＞参考：Array.fromメソッド（MDN）

要素を追加する（.addメソッド）

書き方

Setオブジェクトに要素を追加するには「add」メソッドを使います。

Setオブジェクト.add(追加する要素)

実例

a = [4,3,2,1,4,3,2,1,5,4,3,2,3,4,1,1,1,2,2]

res = new Set(a)  //{4, 3, 2, 1, 5}
res.clear()
res.add("aaa")

console.log(res)

//出力
[4, 3, 2, 1, 5, "aaa"]

オブジェクトの中の要素を全て削除する（clearメソッド）

書き方

Setオブジェクトの中の要素を全て削除するには「clear」メソッドを使います。

Setオブジェクト.clear()

実例

a = [4,3,2,1,4,3,2,1,5,4,3,2,3,4,1,1,1,2,2]

res = new Set(a)  //{4, 3, 2, 1, 5}
res.clear()

console.log(res)

//出力
Set(0) 

指定した要素を削除する（deleteメソッド）

書き方

Setオブジェクトの中の指定した要素を削除するには「delete」メソッドを使います。

Setオブジェクト.delete(削除したい要素)

実例

a = [4,3,2,1,4,3,2,1,5,4,3,2,3,4,1,1,1,2,2]

res = new Set(a) //{4, 3, 2, 1, 5}
res.delete(1)

console.log(res)

//出力
[4, 3, 2, 5]

指定した要素を含むか確認する（hasメソッド）

書き方

Setオブジェクトの中に指定した要素があるか確認するには「has」メソッドを使います。

Setオブジェクト.has(存在確認したい要素)

存在すれば「true」、なければ「false」が返ります。

実例

a = [4,3,2,1,4,3,2,1,5,4,3,2,3,4,1,1,1,2,2]

res = new Set(a) //{4, 3, 2, 1, 5}
res.has()

console.log(res.has(3))
//true

console.log(res.has(10))
//false