JavaScript の Set データ構造の詳細な説明

1. セットとは何か

セットは単純に数学的なセットとして考えることができます。

重複する値のない順序付けられていないデータのコレクションです。

2. セットコンストラクタ

Set コンストラクターのパラメーターには、次の形式を渡すことができます。

2.1) 配列

定数s = 新しいSet([1, 2, 1]);
console.log(s);

ここに画像の説明を挿入

ここでは、配列[1, 2, 1]がパラメータとして渡されます。Set は繰り返しのない値のコレクションなので、3 番目の 1 は自動的に削除されます。

2.2) 文字列

const s = new Set("Hello World!");
console.log(s);

ここに画像の説明を挿入

2.3) 議論

関数fun() {
    const s = new Set(引数);
    console.log(s);
}

楽しい(1, 2, 3);

ここに画像の説明を挿入

2.4) ノードリスト

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>設定</title>
</head>
<本文>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    
    <スクリプト>
        const s = new Set(document.querySelectorAll('p'));
        console.log(s);
    </スクリプト>
</本文>
</html>

ここに画像の説明を挿入

ここでは、3 つのpタグへの参照がSetに配置されています。

使用する必要がある場合は、このSetを走査し、それぞれpタグの参照を取り出して、 pタグを変更することができます。

2.5) 設定

s1 = 新しいSet([1, 2, 3]);
s2 を新しい Set(s1) に変換します。
コンソールログ(s2);

ここに画像の説明を挿入

これはs1をコピーしてs2に渡すことと同じですが、同じSetではありません。

コンソールログ(s1 === s2);

ここに画像の説明を挿入

3. インスタンスのプロパティとメソッドを設定する

Set のプロパティには、メンバーの数を格納するために使用される属性sizeがあります。

定数s = 新しいSet([1, 2, 3]);
console.log(s.size);

ここに画像の説明を挿入

セットの方法

追加

セットにメンバーを追加する

定数s = 新しいSet([1, 2, 3]);
// パラメータには 1 つだけ渡すことができます s.add(5);
console.log(s);
// add と連結できる
s.add(7).add(9);
console.log(s);

ここに画像の説明を挿入

消去

セットからメンバーを削除するために使用します

定数s = 新しいSet([1, 2, 3]);
s.削除(2);
// 削除する項目がセット内に見つからない場合は何も起こらず、エラーも報告されません s.delete(5);
console.log(s);

ここに画像の説明を挿入

もっている

セットにメンバーが含まれているかどうかを判断するために使用されます

定数s = 新しいSet([1, 2, 3]);
コンソールログ(s.has(1));
コンソールログ(s.has(5));

ここに画像の説明を挿入

クリア

セットのすべてのメンバーを削除します

定数s = 新しいSet([1, 2, 3]);
s.クリア();
console.log(s);

ここに画像の説明を挿入

4. メンバーアクセスを設定する

メンバーアクセスはforEachメソッドを通じて実装され、メンバーが追加された順序で Set を走査します。

2つのパラメータがあり、最初のパラメータはコールバック関数で、2番目のパラメータはコールバック関数内のthisが指すものを設定します。

 s.forEach(コールバック関数、コールバック関数へのポインタ)

最初のパラメータを見てみましょう:

最初のパラメータコールバック関数には、次の 3 つのパラメータがあります。

 s.forEach(関数(値、キー、セット){
	値はSetのメンバーです。Setでは、値とキーは等しくなります。Setは前のSet自体です。つまり、ここではset === sです。
});

例を通して理解してみましょう:

定数s = 新しいSet([1, 2, 3]);
s.forEach(関数(値、キー、セット) {
    console.log(値、キー、値 === キー);
    console.log(設定、設定 === s);
});

ここに画像の説明を挿入

2 番目のパラメータを見てみましょう。

定数s = 新しいSet([1, 2, 3]);
s.forEach(関数(値、キー、セット) {
    console.log(これを);
}、 書類）;

ここに画像の説明を挿入

5. セットに関する注意事項

重複値に対するセットの判定は基本的に厳密な等式===判定に従う

しかし、 NaNの場合、SetではNaNはNaNと等しい。

6. Setの使用例

アレイ重複排除

arr = [1, 2, 1]とします。
const s = new Set(arr);
arr = [...s];
// これらを 1 つの文に組み合わせることもできます // arr = [...new Set(arr)];
コンソールにログ出力します。

ここに画像の説明を挿入

文字列の重複排除

str = "11231131242"とします。
const s = new Set(str);
str = [...s].join("");
// 1 つの文として記述することもできます // str = [...new Set(str)].join("");
コンソールログ(str);

ここに画像の説明を挿入

DOM要素の保存

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>設定</title>
</head>
<本文>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    
    <スクリプト>
        const s = new Set(document.querySelectorAll('p'));
        s.forEach((要素) => {
            console.log(要素)
        });
    </スクリプト>
</本文>
</html>

ここに画像の説明を挿入