javascript setの使い方

javascriptで、ES6で追加されたsetの簡単な使い方を記述してます。Setは、重複する値を入れることができない特徴があります。

まずは、setに値を追加してみます。

let set = new Set();

set.add("java");
set.add("ruby");

// 格納している値の数を確認
console.log(set.size); // 2

2個追加したので「2」という結果が返ります。

また、setは、既にaddしている値は追加することができません。

let set = new Set();

set.add("java");
set.add("ruby");

// 格納している値の数を確認
console.log(set.size); //2

set.add("ruby");

console.log(set.size); //2

for-ofを使用して、setした値を取得することが可能です。

let set = new Set();

set.add("java");
set.add("ruby");

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

実行結果

forEachを使用して、setした値を取得することも可能です。

let set = new Set();

set.add("java");
set.add("ruby");

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

実行結果

スプレッド構文を使って、配列として表示することもできます。

let set = new Set();

set.add("java");
set.add("ruby");

console.log([...set]);

実行結果

値を削除する場合は、deleteを利用します。

let set = new Set();

set.add("java");
set.add("ruby");

set.delete("ruby");

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

全ての値を削除する場合は、clearを使用します。

let set = new Set();

set.add("java");
set.add("ruby");

set.clear();
console.log(set.size); // 0

まとめて配列を使って、setすることも可能です。

let set = new Set(["java", "ruby", "c#"]);

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

実行結果

チェーンメソッドを使用して追加することも可能です

let set = new Set();

set.add("java").add("ruby").add("C#");

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

実行結果

値が存在するかは、hasを使用して確認します。

let set = new Set(["java", "ruby", "c#"]);

console.log(set.has("java")); // true
console.log(set.has("python")); // false