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

JavaScriptで配列をSet（セット）に変換する方法

JavaScriptで配列をSetに変換するときの基本

JavaScriptでは、Setオブジェクトを使うことで、配列から重複しない一意の値だけを持つコレクションを簡単に作成できます。SetはES6（ECMAScript 2015）で導入された組み込みオブジェクトで、同じ値が複数回追加されても自動的に1つにまとめられるのが特徴です。

変換自体は非常にシンプルで、new Set(配列)と書くだけで完了します。

コード例：配列からSetへの変換

以下は、重複を含む配列をSetに変換して画面に表示するサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>配列をSetに変換</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result,
    .sample {
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
    .result {
        color: red;
    }
</style>
</head>
<body>
<h1>配列をSetに変換する</h1>
<div class="sample"></div>
<div class="result"></div>
<button class="Btn">変換する</button>
<h3>上のボタンをクリックすると、配列がSetに変換されます</h3>
<script>
    let resultEle = document.querySelector(".result");
    let sampleEle = document.querySelector(".sample");
    let arr = [2, 3, 4, 2, 3, 4, "A", "A", "B", "B"];
    sampleEle.innerHTML = "arr = " + arr;
    document.querySelector(".Btn").addEventListener("click", () => {
        let set1 = new Set(arr);
        resultEle.innerHTML = "set1 = " + [...set1] + "<br>";
    });
</script>
</body>
</html>

実行結果

ページを読み込むと、まず元の配列（重複を含む状態）が表示されます。

JavaScriptで配列をSet（セット）に変換する方法

「変換する」ボタンをクリックすると、次のように重複が取り除かれたSetの中身が表示されます。

JavaScriptで配列をSet（セット）に変換する方法

コードのポイント解説

  • new Set(arr)：配列を引数に渡すだけで、重複を排除したSetオブジェクトが生成されます。この例では [2, 3, 4, "A", "B"] になります。
  • [...set1]：スプレッド構文（...）を使うことで、Setを再び配列に戻して表示しやすくしています。
  • addEventListener("click", ...)：ボタンクリック時に変換処理を実行するイベントリスナーです。

補足：配列に戻す他の方法

スプレッド構文以外にも、Array.from(set1) を使えば同様にSetを配列へ変換できます。状況に応じて読みやすい方を選びましょう。

このように、Setを活用すれば「配列から重複を削除したい」というよくある処理も、たった1行で実現できます。

  1. JavaScriptにおける配列とSetの違いとは？重複値の扱いと要素アクセスをわかりやすく解説

    JavaScriptのSet（セット）オブジェクトは、ES2015（ES6）で新たに導入されたデータ型です。従来から広く使われている配列（Array）と比べると、いくつか重要な違いがあります。 配列とSetの主な違い 重複した値の扱い： 配列は同じ値をいくつでも格納できますが、Setでは同一の値は1つしか保持されません。重複した値は自動的に除外されるのが大きな特徴です。 要素へのアクセス方法： 配列ではインデックス（例：arr[0]）を使って任意の位置の要素へ直接アクセスできます。一方、Setにはインデックスの概念がなく、要素は挿入された順序どおりに先頭から順番に辿ることしかできません。

  2. JavaScriptで配列をセット（Set）に変換する方法｜new Set()の使い方を解説

    JavaScriptでは、new Set() コンストラクタを使うことで、配列を簡単にセット（Setオブジェクト）へ変換できます。セットは同じ値を自動的に1つだけ保持する性質を持つため、配列から重複した要素を取り除きたい場合にも非常に便利です。 配列をセットに変換するサンプルコード 以下は、ボタンをクリックすると配列がセットに変換されて表示される、完全なHTMLサンプルです。 <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport co