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

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

JavaScriptでは、new Set() コンストラクタを使うことで、配列を簡単にセット（Setオブジェクト）へ変換できます。セットは同じ値を自動的に1つだけ保持する性質を持つため、配列から重複した要素を取り除きたい場合にも非常に便利です。

配列をセットに変換するサンプルコード

以下は、ボタンをクリックすると配列がセットに変換されて表示される、完全なHTMLサンプルです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>配列をセットに変換</title>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample, .result {
    font-size: 18px;
    font-weight: 500;
    color: rebeccapurple;
}
.result {
    color: red;
}
</style>
</head>
<body>
<h1>配列をセットに変換する</h1>
<div class="sample"></div>
<div class="result"></div>
<button class="Btn">変換</button>
<h3>上のボタンをクリックすると、配列がセットに変換されます</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>

コードのポイント

  • new Set(arr)：配列をそのまま引数に渡すだけで、セットに変換できます。重複する値は自動的に削除されます。
  • [...set1]：スプレッド構文を使うと、セットを再度配列に戻して表示できます。
  • 元の配列には数値と文字列が混在していますが、セットはデータ型を問わず値の重複を判定します。

実行結果

上記のコードをブラウザで開くと、まず元の配列の内容が表示されます。

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

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

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

この例では、元の配列 [2, 3, 4, 2, 3, 4, "A", "A", "B", "B"] が、セット変換によって [2, 3, 4, "A", "B"] となり、重複要素がきちんと除去されていることが確認できます。
配列のユニーク化（重複削除）を行いたい場面では、new Set() とスプレッド構文を組み合わせるのが最もシンプルで一般的な方法です。

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

    JavaScriptで配列をSetに変換するときの基本JavaScriptでは、Setオブジェクトを使うことで、配列から重複しない一意の値だけを持つコレクションを簡単に作成できます。SetはES6（ECMAScript 2015）で導入された組み込みオブジェクトで、同じ値が複数回追加されても自動的に1つにまとめられるのが特徴です。変換自体は非常にシンプルで、new Set(配列)と書くだけで完了します。コード例：配列からSetへの変換以下は、重複を含む配列をSetに変換して画面に表示するサンプルコードです。<!DOCTYPE html> <html lang=ja> &

  2. 【JavaScript】NodeList（ノードリスト）を配列に変換する方法をわかりやすく解説

    JavaScriptでdocument.querySelectorAll()などのDOM操作メソッドを使うと、戻り値として「NodeList（ノードリスト）」と呼ばれるノードのコレクションが返されます。NodeListは配列に似ていますが、map()やfilter()などArrayオブジェクトが持つ便利なメソッドの多くを使用できません。そこで実践では、NodeListを本物の配列に変換してから操作するのが一般的です。 NodeListを配列に変換する主な方法 1. Array.from() を使う 最もシンプルで広く使われている方法です。NodeListを渡すと、それをもとにした新しい配列を生