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

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);

ここに画像の説明を挿入

セットの方法

add

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

const s = new Set([1, 2, 3]); // 1つのパラメータのみを渡すことができます s.add(5); console.log(s); // 連結できます adds.add(7).add(9); console.log(s); 

ここに画像の説明を挿入

delete

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

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

ここに画像の説明を挿入

has

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

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

ここに画像の説明を挿入

clear

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

定数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ではNaNNaNと等しい。

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>

ここに画像の説明を挿入

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • JS ハッシュ テーブル衝突処理、オープン チェーン メソッド、ハッシュ テーブル ハッシュの例
  • JSはreduce()メソッドを使用してツリー構造データを処理します
  • JavaScript の Set データ構造の詳細な説明
  • Go言語のデータ構造をJSONに変換する
  • JavaScript におけるマップデータ構造の詳細な説明
  • JavaScript データ構造番号
  • JavaScript データ構造: ハッシュ テーブルの作成

<<:  海外の無料写真素材サイトベスト9

>>:  HTMLフロートの使用法の簡単な分析

推薦する

MySQL ビューの原則と使用例の概要

この記事では、MySQL ビューの原理と使用法についてまとめます。ご参考までに、詳細は以下の通りです...

HTML でフレームセット タグを使用するチュートリアル

フレームセット ページは通常の Web ページとは多少異なります。依然として <HTML>...

Ubuntu 20.04 は Wi-Fi に接続します (2 つの方法)

最近Ubuntu 20.04をインストールしましたが、Wi-Fiに接続できず、Wi-Fiアイコンも表...

HTML のブロックレベル要素と行レベル要素、特殊文字、ネスト規則

基本的な HTML Web ページ タグのネスト ルールを紹介する場合、最初に説明する必要があるのは...

組み込み Linux 開発環境で ping と nfs を構築するためのソリューション

1. 組み込みソフトウェアレベル 1) ブートローダ -> ブートローダ組み込みシステム全体の...

高性能ウェブサイトの最適化ガイド

パフォーマンスの黄金律:エンドユーザーの応答時間のわずか 10% ~ 20% が HTML ドキュメ...

MySQL 8.0.19 では、間違ったパスワードを 3 回入力するとアカウントがロックされるようになりました (例)

MySQL 8.0.19 では、間違ったパスワードを 3 回入力するとアカウントがロックされるよう...

mysql5.5.28 のインストール チュートリアルは非常に詳細です。

参考までにmysql5.5.28のインストールチュートリアルです。具体的な内容は次のとおりです。イン...

MySQL データベースで機密データの暗号化と復号化を実装する方法

目次1. 準備2. MySQL暗号化関数方式2.1 MySQL 暗号化2.2 MYSQL 復号化3....

MySQL IN ステートメントにおける低速クエリの効率を最適化する手法の例

表の構造は以下のとおりです。記事数は690件のみです。 記事テーブル article(id,titl...

VMware Workstation 15 Pro インストール ガイド (初心者向け)

01. VMware Workstation Pro 15 のダウンロードダウンロード: VMwa...

JavaScript を使用してテーブル情報を追加および削除する

JavaScript 入門JavaScript は軽量なインタープリタ型の Web 開発言語です。言...

Docker でローカルにイメージをインポート/保存/読み込み/削除する方法

1. Dockerはローカルイメージをインポートする場合によっては、イメージをローカルまたは別の友人...

ウェブフロントエンドウェブ開発の一般的なプロセスの簡単な紹介

フロントエンド開発を行っている初心者の学生を多く見かけますが、彼らの効率は比較的遅いです。常にコード...

MySQL 8.0.18 のインストールと設定のグラフィックチュートリアル

学習目標: Windowsシステムを使用してMySQLデータベースをインストールする方法を学びます。...