JavaScriptでSetを使う（サンプルコード有り）

この記事は、以下の方を対象に書いています。

Setが何者か分からない
Setのサンプルコードを見たい

Setとは？
Setの操作
サンプルコード
1. ①２の倍数のみコンソール出力
2. ②特定のオブジェクトのみ取り出す
まとめ

Setとは？

Setは、JavaScriptの組み込みオブジェクトの一つで、

一意（ユニーク）な値の集合を管理できるものです。

利点としては、下記３点があります。

一意な値を担保できる
順序が保証されている（値を格納した順番で取り出せる）
オブジェクトや関数を格納できる

Setの宣言は以下の通りです。

const 変数名 = new Set()

宣言と同時に初期値を格納することも可能です。

予め、格納する値が決まっているような場合であれば、

以下のように記述するのが良いと思います。

const set = new Set([1,2,3,2])

console.log(set) // Set(3) { 1, 2, 3 }

Setの操作

Set内の値を変更したい場合は、便利なメソッドがありますので、いくつか紹介します。

add | 追加

addメソッドを使用すると、値の追加をすることが可能です。

これは、一番使用頻度が高いと思います。

const set = new Set()
set.add(1) // 1を追加
set.add(2) // 2を追加
set.add(1) // 1を追加（１は既にあるので、入らない）

console.log(set) // Set(2) { 1, 2 }

has | 存在チェック

hasメソッドは、Set内に対象の値が含まれているか確認するためのメソッドです。

戻り値はboolean型になるため、trueかfalseが返ってきます。

そのため、if文の判定式にもよく使われます。

const set = new Set()
set.add('aaa')
set.add('bbb')
set.add('ccc')

console.log(set.has('aaa')) // true

delete | 削除

deleteメソッドは、Set内の値を削除することができます。

つまり、引数に渡した値とSet内の値が一致している場合のみ、対象の値が削除されます。

const set = new Set()
set.add('aaa')
set.add('bbb')
set.add('ccc')

// 文字列cccを削除
set.delete('ccc')

console.log(set) // Set(2) { 'aaa', 'bbb' }

clear | 全削除

次は、clearメソッドです。

clearメソッドは、Set内に格納されている要素を全て削除します。

そのため、何らかの処理を終えたから、リセットしたいといった状況の時に使います。

const array = new Set([1, 2, 3])
array.clear()
console.log(array) // Set(0) {}

size | 要素数のカウント

sizeメソッドは、Set内に格納されている要素数をカウントします。

よって、◯個以上の要素が存在する場合はこの処理をする、

などの条件を作るときに使われたりもします。

そのほかの言語でも、sizeメソッドはありますので覚えておくと良いと思います。

const array = new Set([1, 2, 3])
console.log(array.size) // 3

forEach | 繰り返し処理

Setには、forEachメソッドも使用できます。

forEachメソッドは、繰り返し処理をするためのメソッドです。

戻り値はvoid型になるので、変数に代入することはできません。

const set = new Set()
set.add('aaa')
set.add('bbb')
set.add('ccc')

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

// aaa
// bbb
// ccc

ちなみに、forEachメソッドの代わりにfor…of文を使用すること可能です。

for…of文については、以下の記事で解説していますので、良ければ参考にしてください。

for (let obj of set) {
  console.log(obj);
}

JavaScriptでfor...inとfor...ofを使う

この記事は、以下の方を対象に書いています。 JavaScriptの便利機能をもっと知りたい JavaScriptって拡張for文ないの？って思っている方 for ... in文 for ... in文は、繰り返し処理を行える制御構文です。 ...

サンプルコード

Setを使ったサンプルコードをいくつか紹介します。

①２の倍数のみコンソール出力

ここでは、２の倍数のみをコンソール出力するプログラムを作成してみます。

２の倍数ですので、値がnumber型であることと、２で割った時のあまりが０であることを

条件に設定することで２の倍数のみコンソール出力しています。

const set = new Set()
set.add(1)
set.add(2)
set.add(3)
set.add('aaa')
set.add(4)

set.forEach(value => {
    if (typeof value === 'number' && value % 2 === 0) {
        console.log(value)
    }
})

// 2

また、今回はSetの中に数字以外の値を格納していますが、

本来は、数字のSetなら数字のみをできるだけ入れるべきです。

②特定のオブジェクトのみ取り出す

次は、Setにオブジェクトを格納し、特定のオブジェクトだけ出力してみます。

以下のコードのポイントは、Setを配列に変換しているArrays.from()メソッドです。

配列に変換することによって、filterメソッドの使用ができるようになります。

filterメソッドは、対象を任意の条件によって絞り込むことができます。

また、戻り値は配列として、条件に当てはまるもののみが返ってきます。

const set = new Set()

const obj1 = { name: 'AAA', age: 18 }
const obj2 = { name: 'BBB', age: 30 }
const obj3 = { name: 'CCC', age: 21 }

set.add(obj1)
set.add(obj2)
set.add(obj3)

// 条件: ageが20のオブジェクトを取得する
const array = Array.from(set).filter(obj => obj.age > 20)

// 出力
array.forEach(obj => {
    console.log(obj)
})

// { name: 'BBB', age: 30 }
// { name: 'CCC', age: 21 }