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

javascript-prograshi(プロぐらし)-kv JavaScript
記事内に広告が含まれていることがあります。

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

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


Setと配列(Array)の違い

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

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

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

参考:Setオブジェクト(MDN)


Setオブジェクトの使い方

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

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

let 変数 = new Set()

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

Setオブジェクトの用法
  1. Setオブジェクト作成時に要素を渡す。
  2. 要素を追加する(.addメソッド)
  3. オブジェクトの中の要素を全て削除する(clearメソッド)
  4. 指定した要素を削除する(deleteメソッド)
  5. 指定した要素を含むか確認する(hasメソッド)


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

書き方

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

let 変数 = new Set( 要素 )
注意点

new Setで渡せるのはイテラブルな要素に限ります。イテラブルな要素とは、配列のようにfor文で一つ一つ取り出せる要素の事です。

単なる数値など、イテラブルでない要素を指定した場合はエラーになります。

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


タイトルとURLをコピーしました