JavaScript　Setオブジェクトの使い方

JavaScriptのSetオブジェクトの使い方について配列の操作方法をサンプルプログラムを使って解説します。

Setオブジェクトってどのようなものでしょうか？

Setオブジェクトを使えば配列に要素を追加、削除、検索することができます。また、重複した要素を追加しないこともできます。

受講者数No.1！初心者からプロへ導く信頼のスクール

短期間で習得可能！未経験から実践力を磨く充実のプログラム

テックアカデミー 公式ページへ ≫

今なら無料相談でAmazonギフトカードがもらえる！

Setオブジェクトを使った配列の操作方法

　Setオブジェクトは、ES2015以降に導入された重複を許さない要素の集合を扱うことができるデータ構造です。

Setオブジェクトを使うことで配列に要素を追加することができます。Setオブジェクトに要素を追加する際に重複した要素を追加することができないため、配列内に重複した要素がないことを保証することができます。

以下は、addメソッドを使ったSetオブジェクトを使って要素を追加するサンプルコードです。

let set = new Set();
set.add(1);
set.add(2);
set.add(3);
console.log(set); // Set {1, 2, 3}

以下は、deleteメソッドを使ったSetオブジェクトから要素を削除するサンプルコードです。

let set = new Set();
set.add(1);
set.add(2);
set.add(3);
set.delete(2);
console.log(set); // Set {1, 3}

以下は、hasメソッドを使ったSetオブジェクト内の要素を検索するサンプルコードです。

let set = new Set();
set.add(1);
set.add(2);
set.add(3);
console.log(set.has(2)); // true

Setの値をforEachを使って全て取り出す

　Setオブジェクトの値を全て取り出す方法にはいくつかの方法がありますが、一つの方法としてforEachメソッドを使うことができます。forEachメソッドはSetオブジェクト内の全ての要素に対して一つ一つ処理を行うことができます。

以下はforEachメソッドを使ってSetオブジェクト内の値を全て取り出すサンプルコードです。

let set = new Set();
set.add(1);
set.add(2);
set.add(3);

set.forEach(value => {
  console.log(value);
});
// 1
// 2
// 3

　また別の方法としてArray.fromメソッドを使ってSetオブジェクトから配列を作成することもできます。配列に変換したSetオブジェクト内の値はfor文や配列のメソッドを使って全て取り出すことができます。

　以下はArray.fromメソッドを使ってSetオブジェクトから配列を作成し、その配列内の値を全て取り出すサンプルコードです。

let set = new Set();
set.add(1);
set.add(2);
set.add(3);

let array = Array.from(set);
for (let value of array) {
  console.log(value);
}
// 1
// 2
// 3

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。

最大70％の給付金が出るおすすめのプログラミングスクール！

リスキリングで給付金が出るスクールを７つ紹介 ≫

国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！

興味のある方はすぐに確認しましょう。

この記事のまとめ

Setオブジェクトの使い方について解説しました。

Setオブジェクトを使うことで、重複を気にせずに配列の要素の操作が簡単になりました！

用途に合わせて通常の配列と使い分けられるようになると読みやすいコードが書けるようになります。