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フロートの使用法の簡単な分析

推薦する

ethers.js を使用して Solidity スマート コントラクトをデプロイする方法

Ethereum 上で DApps を開発したことがある場合は、フロントエンド JavaScript...

Linux デュアル ネットワーク カード バインディング スクリプト メソッドの例

Linux の操作と構成作業では、デュアル ネットワーク カードのバインディングがよく使用されます。...

MySQL 8.0.11 MacOS 10.13 のインストールと設定方法のグラフィックチュートリアル

MacにMySQLデータベースをインストールし、環境変数を設定する手順を参考までに記録します。具体的...

JavaScript は、マウスがテーブル行を通過するときに色の識別を実装します。

この記事では、マウスがテーブルの行を通過するときにJavaScriptを使用して色ラベルを表示する方...

Select はダブルクリック dbclick イベントをサポートしていません

XML/HTML コードコンテンツをクリップボードにコピー< div クラス= "c...

Dockerコンテナ同士を接続する3つの方法の詳しい説明

Docker コンテナ間の相互接続と通信には 3 つの方法があります。 Docker 内部ネットワー...

ウェブマスターが注目すべき、ウェブサイトのユーザビリティを向上させる 9 つのコード最適化のヒント

1. ロゴに代替テキストを追加するこれには 2 つの利点があります。スクリーン リーダーがロゴ画像の...

Docker に Zookeeper を素早くインストールする方法の詳細なチュートリアル

Docker で Zookeeper を素早くインストール会社を変わってから長らくZookeeper...

Ubuntu 18.04 に vsftpd をインストールするための実装コード

vsftpdをインストールする $ sudo apt-get install vsftpd -y v...

Linux コマンドラインからファイルを削除する実用的な方法

rm コマンドrm コマンドは、ファイルを削除するときによく使用されるコマンドです。ファイルまたはデ...

MySQLのタイムゾーンを表示および設定する方法

1. データベースのタイムゾーンを確認する '%time_zone' のような変数を...

MySQL でタイムゾーンを表示および変更する方法

今日、プログラムが間違った時刻を挿入し、フィールドがデフォルト値 CURRENT_TIMESTAMP...

ウェブレスポンシブレイアウトにおけるiframe適応の方法

問題<br />レスポンシブ レイアウトでは、iframe 要素に注意する必要があります...

プロジェクトに必須の 8 つの JavaScript コード スニペット

目次1. ファイル拡張子を取得する2. コンテンツをクリップボードにコピーする3. スリープ時間は何...

モバイルレイアウト用の動的REMの実装

ダイナミックレム1. まず、現在の長さの単位を紹介しましょうpx em Mの幅 / 漢字の幅 1em...