JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのSet（セット）とは？基本構文と使い方を実行例つきで解説

Set（セット）とは

Setは、ES6（ECMAScript 2015）で新たに追加されたオブジェクト型の一つです。「一意な（重複しない）値」だけを格納できるコレクションであり、扱える値は文字列や数値といったプリミティブ型から、オブジェクトリテラルや配列などの複雑なオブジェクト型まで幅広く対応しています。

同じ値を複数回追加しても、Setには一度しか登録されません。この特性により、重複除去などの場面で非常に役立ちます。

基本構文

new Set([iterable]);

パラメータ

iterable
反復可能（イテラブル）なオブジェクトを指定します。ここに渡した要素が新しいSetへ追加されます。引数を省略した場合やnullを渡した場合には、空のSetが生成されます。

例1：重複する値は無視される

Setは一意の値しか受け付けないため、すでに存在する要素を後から追加しても、Setのサイズ（sizeプロパティの値）は変化しません。

<html>
<body>
<script>
    var set1 = new Set(["a","a","b","b","c"]); // 一意な要素は3つ（a、b、c）
    set1.add('c').add('d')                     // 2つの要素を追加（cとd）
    set1.forEach(alphabet => {                 // 合計7要素だが、一意な値は4つのみ
    document.write(`alphabet ${alphabet}!`);
    document.write("</br>");
    });
    document.write(set1.size);                 // 一意の値のみ許可されるため「4」と表示される
</script>
</body>
</html>

出力結果

alphabet a!
alphabet b!
alphabet c!
alphabet d!
4

例2：has()メソッドで要素の存在を確認する

Setでは、指定した要素がそのSet内に存在するかどうかを真偽値（boolean）として確認できます。これにはhas()メソッドを使用します。

<html>
<body>
<script>
    var set1 = new Set(["a","a","b","b","c"]);
    set1.add('c').add('d')
    set1.forEach(alphabet => {
    document.write(`alphabet ${alphabet}!`);
    document.write("</br>");
    });
    document.write(set1.has('a'));   // aはset1に存在するため「true」と表示される
    document.write("</br>");
    document.write(set1.has('8'));   // 8はset1に存在しないため「false」と表示される
    document.write("</br>");
    document.write(set1.size);       // 一意の値のみが許可されるため「4」と表示される
</script>
</body>
</html>

出力結果

alphabet a!
alphabet b!
alphabet c!
alphabet d!
true
false
4

まとめ

Setは、重複を自動的に排除してくれる便利なコレクションです。主なポイントを整理すると以下の通りです。

  • add()： 要素をSetに追加する
  • has()： 特定の要素が存在するかどうかを真偽値で判定する
  • size： 一意な要素の個数を取得する
  • forEach()： すべての要素に対して順番に処理を実行する

配列から重複を取り除きたい場合や、値の存在チェックを効率的に行いたい場合などに、Setはぜひ活用したい機能です。

  1. JavaScriptの「for...in」ステートメントとは？オブジェクトのプロパティをループ処理する方法を解説

    JavaScriptのfor...in文は、オブジェクトが持つすべてのプロパティ（列挙可能なプロパティ）を順番に取り出して処理するためのループ構文です。オブジェクト内の各キー（プロパティ名）にアクセスしながら、対応する値を取得したい場合に非常に便利です。for...inの基本的な構文for (let 変数名 in オブジェクト) { // 各プロパティに対して実行したい処理 }ループ変数には、各反復ごとにオブジェクトのプロパティ名（キー）が文字列として代入されます。値そのものを取得するには、「オブジェクト[変数名]」のようにブラケット記法を使ってアクセスします。サンプルコード以下は、for

  2. 【図解付き】JavaScriptにおけるオブジェクトの等価性をわかりやすく解説

    JavaScriptでは、文字列・数値・真偽値などのプリミティブ型はその「値」に基づいて比較されます。一方、オブジェクト(ネイティブオブジェクトでも独自に定義したカスタムオブジェクトでも)は「参照」に基づいて比較されます。 「参照による比較」とは、複数のオブジェクトがメモリ上の同じ場所を指しているかどうかを判定するという意味です。つまり、プロパティの中身が完全に一致していても、別々に生成された2つのオブジェクトは等しいとみなされません。 押さえておきたいポイント プリミティブ型: 値が同じであれば == や === の比較で true になる オブジェクト型: 同じインスタンス(同一の参照