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

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

JavaScriptのSet（セット）オブジェクトは、ES2015（ES6）で新たに導入されたデータ型です。従来から広く使われている配列（Array）と比べると、いくつか重要な違いがあります。

配列とSetの主な違い

  • 重複した値の扱い： 配列は同じ値をいくつでも格納できますが、Setでは同一の値は1つしか保持されません。重複した値は自動的に除外されるのが大きな特徴です。
  • 要素へのアクセス方法： 配列ではインデックス（例：arr[0]）を使って任意の位置の要素へ直接アクセスできます。一方、Setにはインデックスの概念がなく、要素は挿入された順序どおりに先頭から順番に辿ることしかできません。
  • 高速な存在チェック： Setは内部的にキーによって要素を管理しており、has()メソッドによる値の存在確認を効率的に行えるのも利点です。

サンプルコード

以下のコードは、重複した値を含む配列をSetに変換し、両者の違いをブラウザ上で実際に確認できるシンプルなデモです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</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>Array Vs Set</h1>
<div class="sample"></div>
<div class="result"></div>
<button class="Btn">Convert</button>
<h3>Click on the above button to convert the above array into a 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>

実行結果

上記のコードをブラウザで開くと、まず元の配列 arr の中身が画面に表示されます。

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

続いて「Convert」ボタンをクリックすると、配列がSetに変換され、重複が取り除かれた結果が赤字で表示されます。

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

ご覧のとおり、元の配列には「2」「3」「4」「A」「B」がそれぞれ2個ずつ含まれていますが、new Set(arr)で変換すると、各値が1つだけのユニークなコレクションになります。また、[...set1]のようにスプレッド構文を使えば、Setを再び配列形式に戻して扱うことも可能です。重複を排除したい場合や、値の存在確認を頻繁に行う処理では、配列の代わりにSetを活用するとコードがより簡潔かつ効率的になります。

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

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

  2. JavaScriptで配列をreduceする方法｜reduce()メソッドで配列要素を合計する

    JavaScriptのreduce()メソッドは、配列の各要素を先頭から順に処理し、その結果を1つの値にまとめる（畳み込む）ための配列メソッドです。数値の合計を求めるだけでなく、配列からオブジェクトを組み立てたり、条件に応じてデータを集約したりと、幅広い場面で活用されています。reduce()メソッドの基本構文 { return 戻り値; }, 初期値);accumulator（アキュムレータ）：直前のコールバック関数が返した値（累積値）。最初のループでは初期値、または配列の第1要素が代入されます。currentValue：現在処理している配列の要素。初期値：累積値の出発点となる値。省略し