JavaScript の Set

JavaScript の Set とは

Set は値の集合を表します。特に、値の重複を許さない (同じ値の要素が複数存在できない) 集合になります。

Set のそれぞれの要素は値と型を含めて区別されます。つまり、数値の 1 と文字列の '1' は区別されます。

Set は has() メソッドを持ち、引数として渡した要素が Set 内に存在するかチェックすることができます。

JavaScript の Set オブジェクトの作成

JavaScript の Set オブジェクトは new Set() として作成します。

次の例では、空の Set が作成されます。

let s = new Set()
console.log(s) // Set {}

Set オブジェクト作成時に要素をセットするには、初期値として配列を渡します。

let s = new Set([1, 3, 5])
console.log(s) // Set { 1, 3, 5 }

文字列を渡すと文字のイテラブルとして扱われて、一文字一文字が Set の要素になります。

let s = new Set('Hello')
console.log(s) // Set { 'H', 'e', 'l', 'o' }

文字列を文字に分解しないようにするには、配列として渡します。

let s = new Set(['Hi', 'Hello'])
console.log(s) // Set { 'Hi', 'Hello' }

Set を初期値として渡すと、コンストラクタに渡した Set オブジェクトのクローンが作成されます。

let s = new Set([1, 3, 5])
let t = new Set(s)
t.add(7)
console.log(s) // Set { 1, 3, 5 }
console.log(t) // Set { 1, 3, 5, 7 }

JavaScript の Set への要素の追加と削除

JavaScript の Set オブジェクトへ要素を追加するには add() メソッドを使います。

let s = new Set([1, 3, 5])
s.add(7)
s.add(9)
console.log(s) // Set { 1, 3, 5, 7, 9 }

Set オブジェクトから要素を削除するには delete() メソッドを使います。

let s = new Set([1, 3, 5])
console.log(s) // Set { 1, 3, 5 }
s.delete(3)
console.log(s) // Set { 1, 5 }

JavaScript の Set の要素の存在確認

JavaScript の Set オブジェクトに特定の要素が含まれているかチェックするには has() メソッドを使います。

let s = new Set([1, 3, 5])
console.log(`${s.has(5)}`) // true

JavaScript の Set を配列に変換する方法

JavaScript の Set オブジェクトを配列に変換するには、 Array.from() メソッドが使えます。

let s = new Set([1, 3, 5])
let a = Array.from(s)
console.log(a) // [ 1, 3, 5 ]

その他、Set オブジェクトから配列を作成するには、スプレッド構文を用いる方法もあります。

let s = new Set([1, 3, 5])
let a = [...s, 7, 9] // 7 と 9 を追加
console.log(a) // [ 1, 3, 5, 7, 9 ]

スプレッド構文を利用した場合には、配列作成時に同時に要素を追加する操作も簡単にできるので便利です。

JavaScript の Set の要素、キーの列挙

JavaScript の Set オブジェクトのキー、値、エントリーそれぞれの列挙には、それぞれ keys() メソッド、 values() メソッド、 entries() メソッドが使えます。

console.log(s.keys())    // { 1, 3, 5 }
console.log(s.values())  // { 1, 3, 5 }
console.log(s.entries()) // { [ 1, 1 ], [ 3, 3 ], [ 5, 5 ] }

JavaScript の Set の forEach() メソッド

JavaScript の Set オブジェクトの forEach() メソッドを用いると、 Set オブジェクト内のそれぞれの要素を引数にして、関数を呼び出すことができます。

s.forEach((val) => console.log(` * ${val}`))
// * 1
// * 3
// * 5

Set オブジェクトの forEach() メソッドを利用して配列を作成するには,次のようにできます。

let s = new Set([1, 3, 5])
let a = []
s.forEach((v) => a.push(v))
console.log(a) // [ 1, 3, 5 ]

以上、JavaScript の Set の使い方を説明しました。

ここまでお読みいただき、誠にありがとうございます。SNS 等でこの記事をシェアしていただけますと、大変励みになります。どうぞよろしくお願いします。

© 2024 JavaScript 入門