JavaScriptの集合(Set)の使い方！ (追加・削除・含む)

JavaScriptの集合(Set)の使い方について書いています。
最初にSetの使い方を解説して、下記の操作について書きました。

Setの使い方

JavaScriptのSetを使うと、値が重複しないコレクションを作ることができます。
例えば、下記のように使います。

const fruits = new Set()
fruits.add('apple')
fruits.add('banana')
fruits.add('orange')

fruits.forEach((value) => {
  console.log(value)
})

fruits変数にSetをnewして、Setオブジェクトを作成しました。
これで値を追加していけるので、次の行から値を追加していっています。

addメソッドを使って、文字列の「apple」・「banana」・「orange」を、Setオブジェクトのfruits変数に追加しています。
最後に値がある間、forEachメソッドを使って、ループ処理しました。

出力内容を確認すると、下記のように追加した値が出力されました。

apple
banana
orange

重複しないことの確認

値が重複しないことを確認します。
例えば、下記のように重複する値を入れてみます。

const fruits = new Set()
fruits.add('apple')
fruits.add('orange')
fruits.add('banana')
fruits.add('banana')
fruits.add('orange')
fruits.add('orange')

fruits.forEach((value) => {
  console.log(value)
})

先ほどと同じようなプログラムです。
入れる値をわざと重複させました。

文字列の「orange」を3回、「banana」を2回入れています。
このプログラムを実行して、出力を確認すると下記のようになります。

apple
orange
banana

このように重複する値は無視されて、一意の値だけ入っていることが確認できました。

宣言と一緒に値を追加する

Setのコンストラクタを使うと、宣言と同時に値を追加することができます。

const fruits = new Set(['apple', 'orange', 'banana'])

fruits.forEach((value, key) => {
  console.log(value)
})

最初にSetのコンストラクタに、配列を渡しています。
これで、渡した配列の要素が、Seオブジェクトの要素になります。

プログラムを実行すると、下記の結果になりました。

apple
orange
banana

宣言と一緒に追加した値が出力されることが確認できました。

Setの要素は指定して取得できない

Setは順序がないため、配列のように要素番号を指定して取得することはできません。
Setの要素を全てループして、ひとつずつ見ることは可能です。(後述)
基本的にSetは値を入れて、その値があるかどうかみたいな使い方をするかと思います。

Setに要素を追加する

Setオブジェクトに要素を追加する方法です。
最初に書いたようにaddメソッドを使います。

const numbers = new Set([20, 3, 12])

numbers.add(32)
numbers.add(16)

numbers.forEach((value) => {
  console.log(value)
})

numbers変数にSetを使って、3つの数値でオブジェクトを作成しました。

次の処理で、addメソッドを使って、「32」と「16」を追加しています。
プログラムを実行すると、下記のように追加された数値を含めて、全て出力されました。

20
3
12
32
16

Setの要素を含むか確認する

Setに要素があるかどうかを確認するには、hasメソッドを使えば良いです。

const fruits = new Set(['apple', 'orange', 'banana'])

if (fruits.has('apple')) {
  console.log('appleが入っています')
} else {
  console.log('appleが入っていません')
}

if (fruits.has('grape')) {
  console.log('grapeが入っています')
} else {
  console.log('grapeが入っていません')
}

fruits変数に3つの要素で、Setオブジェクトを作りました。

その次の処理で、if文を使って、fruitsに「apple」があるか確認しています。

このようにhasメソッドに、存在するか確認したい値を渡します。
そうすると、値があるときには論理値のtrue、ないときにはfalseが返ってきます。
ここでは存在するため、trueが返ってきます。

次のif文では、fruitsに「grape」があるか確認しています。
存在しないためfalseが返ってきます。

それぞれ、trueとfalseが返ってくるので、実行すると下記のようになります。

appleが入っています
grapeが入っていません

Setの要素を削除する

Setの要素を削除するには、deleteメソッドを使います。

const fruits = new Set(['apple', 'orange', 'banana'])
fruits.delete('banana')
fruits.delete('apple')

fruits.forEach((value) => {
  console.log(value)
})

fruits変数に3つの要素で、Setオブジェクトを作りました。
次の処理で、deleteメソッドを呼び出して、要素の「banana」と「apple」を削除しました。

このように削除したい要素を指定すると、Setコレクションから削除されます。
最後にforEachメソッドで、ループ処理して確認しています。

実行すると、要素が削除されて、下記のように要素がひとつになりました。

orange

全ての要素を削除する

全ての要素を削除するにはclearメソッドを使います。

const fruits = new Set(['apple', 'orange', 'banana'])
fruits.clear()

console.log(fruits) // Set(0) {}

fruits変数に3つの要素で、Setオブジェクトを作りました。
次の処理で、clearメソッドを呼び出しています。

これで、fruits変数は空になります。
console.logで出力すると、空になっていることが確認できました。

Setで配列の重複を削除する

Setを使って、配列の要素を一意にすることができます。
例えば、下記のように同じ要素が入っている配列です。

const numbers = [1, 2, 3, 2, 10, 3, 77]

const setNumbers = new Set(numbers)

setNumbers.forEach((value) => {
  console.log(value)
})

numbers変数に7つの数値で、配列を作りました。
数値の「2」と「3」重複しています。

次の処理で、Setのコンストラクタにnumbers変数を渡して、Setコレクションにしました。
これで、setNumbers変数には重複した数値が、それぞれひとつになりました。

最後にループ処理で、値を確認しています。
実行すると、下記のようになります。

1
2
3
10
77

重複した数値がひとつになって、要素が5つになりました。

Setの要素数を取得する

Setの要素数を取得するときには、sizeプロパティにアクセスします。

const fruits = new Set(['apple', 'orange', 'banana', 'peach', 'grape'])
console.log(fruits.size) // 5

fruits変数に5つの要素で、Setオブジェクトを作りました。
次の処理で、fruits変数のsizeプロパティにアクセスしています。
プログラムを実行すると、要素数の「5」が出力されました。

JavaScriptのSetのまとめ

今回はJavaScriptの集合(Set)について書きました。
記事の内容をまとめると、下記のようになります。