ES6 の Set および WeakSet コレクションの詳細な説明

ES6 の Set および WeakSet コレクションの詳細な説明

セットは値が重複しない特別なコレクションです。

配列は毎日使用します。重複した値を挿入してしまうのではないかと心配になったことはありませんか?セットコレクションをご利用ください! Set には、挿入された値が重複しないようにする特別なデータ構造があります。

セットコレクション基本API

Set.prototype.constructorコンストラクタを介してSetインスタンスを作成する

/*
 * インスタンス化のみ: パラメータを渡さずにコンストラクタを呼び出す*/ 
empty_set = new Set() とする    


/*
 * インスタンス化と初期化: 任意の反復オブジェクトを渡し、それを Set コレクションに変換します */ 
transfer_set4arr = new Set([1, 2, 3]) とします。
// Set(3) {1, 2, 3} を返す

transfer_set4string = new Set("huilin") とします。
// Set(5) {"h", "u", "i", "l", "n"} を返します

transfer_set4set = new Set(new Set([5, 6])) とします。
// Set(2) { 5, 6 } を返す

Set.prototype.sizeプロパティにアクセスして、セット内の要素の数を返します。

console.log(empty_set.size) // 0
コンソール.log(transfer_set4arr.size) // 3

Set.prototype.has(value)メソッドを呼び出して、要素が存在するかどうかを判断します。

// Array.includes() と比較すると、Set.has() はメンバーシップテストに最適化されているため、パフォーマンスが高くなります console.log(empty_set.has(1)) // false
console.log(transfer_set4arr.has('h')) // 真

独自の価値判断

  • 値の一意性を保証するために、Set コレクションは === (同一性シンボル) シンボルの代わりに Object.is(value1, value2) を使用して判定します。これは、同一性判定によって両側の変数の型変換が強制されるためです。
  • 例えば、2 つの変数の値が両方とも NaN の場合、または 0 と -0 の場合、JS で判断すると等しくありませんが、Object.is() では同じとみなされるため、Set コレクションに格納することはできません。

Object.is() の詳細については、developer.mozilla.org/zh-CN/docs/… をご覧ください。

n1 = NaNとする
n2 = NaNとする

コンソールログ(n1 === n2)  
// 同一性シンボルが2つが矛盾していると判断した場合は、falseを出力します

コンソールログ(Object.is(n1,n2)) 
// しかしObject.is()は2つが同じであると判断し、falseを出力します

// Set コレクションでは 2 つの NaN をコレクションに入れることはできません。let set = new Set()
設定します。追加します(n1)。追加します(n2)
コンソールログ(サイズ設定)   
// サイズ: 1

複雑なデータ型に直面した場合、判断は主にオブジェクト参照を通じて行われます。参照が矛盾している場合、データ構造が同じであっても、それらは異なるものと見なされ、Set コレクションに格納される可能性があります。

同じ値セットを新しいSet()にします。
// まずオブジェクトを保存します same_value_set.add({num: 0});
// 同じ構造を持つ新しいオブジェクトを保存します。let obj = {num: 0};
同じ値セットを追加します(obj);
// 両方とも正常に保存できます console.log(same_value_set.size); // 2

Set.prototype.add(value)メソッドを呼び出してセットにデータを追加します。

// add() メソッドは、プリミティブ値でもオブジェクト参照でも、任意のタイプのデータを追加できます。let set1 = new Set()
// add() メソッドは常に現在のインスタンスへの参照を返すため、連鎖呼び出しが行われます: set1.add(1).add(2).add(3)
console.log(set1) // Set(3) {1, 2, 3}

// 注意: add() が配列に渡されると、Set は配列の要素ではなく、配列インスタンスをセットに挿入します。set1.add([4, 5])
console.log(set1) // Set(4) {1, 2, 3, [4, 5]}

Set.prototype.delete(value)メソッドを呼び出してセットから要素を削除します。

// delete() メソッドは、.has() メソッドと同様に、削除操作が成功したかどうかを返します。let success = set1.delete(1)
console.log(成功)
// 真実

Set.prototype.clear() メソッドを呼び出してセットをクリアします。

num_set = new Set([1, 6, 3]) とします。
コンソール.log(数値セット)
// セット(3) { 1, 6, 3 }

set1.クリア()
コンソール.log(数値セット)
// セット(0) {}

セットをトラバースする3つの方法

セットには添え字やインデックスがないため、「順序なしセット」と見なされることがよくあります。しかし、JavaScript は要素が挿入された順序を記憶しているため、トラバース時に要素を順番に反復します。

Setコレクションを直接走査する

set = new Set([1, 2, 3, 4, 5]) とします。
for(let 集合の項目){
    コンソール.log(アイテム)
}
// 順番に出力: 1 2 3 4 5

トラバーサル用のイテレータを作成する

/*
 * イテレータを作成する方法は3つあります * Set.prototype.entries()
 * Set.prototype.keys()
 * Set.prototype.values()
 */ 

// Set コレクションには値のみがあり、キーはありませんが、Map オブジェクトのトラバースに似せるために、Set.entries() が新しい Iterator オブジェクトを作成すると、各項目のキーと値は等しくなります (つまり、[値、値])。
for(let [キー,値] of set.entries()){
    console.log(値)
}
// 順番に出力: 1 2 3 4 5

// Set.keys() は新しい Iterator オブジェクトを作成し、各値を返します for(let key of set.keys()){
    console.log(キー)
}
// 順番に出力: 1 2 3 4 5

// Set.values() は Set.keys() と一貫性があり、各項目の値を返します for(let value of set.values()){
    console.log(値)
}
// 順番に出力: 1 2 3 4 5

Set.prototype.forEach(callbackFn)メソッドを呼び出してトラバースする

// forEach(callbackFn) は挿入順に callbackFn を呼び出し、各値を取得します。set.forEach(item => {
    コンソール.log(アイテム)
})
// 順番に出力: 1 2 3 4 5

集合コレクションケースの練習

SetコレクションとArray配列間の変換

/*
 * 配列に設定
 */
set1 = new Set([1, 2, 3]) とします。
// Array.from() メソッド let arr1 = Array.from(set1)  
// 拡張演算子 let arr2 = [...set1]  

/*
 * 設定する配列
 */
 // Setコンストラクタを使用する let set = new Set(array)

単一アレイ重複排除

set = new Set([1, 2, 4, 4, 2, 5]) とします。
コンソール.log(設定)
// セット(4) { 1, 2, 4, 5 }

複数の配列を結合して重複を削除する

arr1 = [1, 2, 4]とします。
arr2 = [1, 5, 6]とする

// Set コレクションの特性を利用して、セット内の要素は一意になります。let result = new Set([...set1, ...set2]) 
console.log(結果)
// セット(5) { 1, 2, 4, 5, 6 }

交差部分を取得する(重複要素)

set1 = new Set([1, 2, 4]) とします。
set2 = new Set([1, 5, 6]) とします。

// set1 と set2 の両方に存在する要素を返します。let result = new Set([...set1].filter(x => set2.has(x))) 
console.log(結果)
// セット(1) { 1 }

交差(重複要素)があるかどうかを判定する

set1 = new Set([1, 2, 4]) とします。
set2 = new Set([1, 5, 6]) とします。

関数 isMixed(セット、サブセット) {
    for (let 要素をサブセットとする) {
        if (set.has(elem)) {
            true を返します。
        }
    }
    false を返します。
}

コンソールログ(isMixed(set1, set2))
// 真実

差異を取得: 重複のみを返す

set1 = new Set([1, 2, 4]) とします。
set2 = new Set([1, 5, 6]) とします。

関数の差(setA, setB) {
    結果 = new Set() とする
    (setBの要素をlet) {
        (setA.has(elem))の場合{
            結果.add(要素)
        }
    }
    結果を返します。
}

console.log(差異(set1、set2))

WeakSet の「弱点」とは何でしょうか?

Set コレクションに加えて、ES6 では WeakSet と WeakMap も提供されます。コレクションの名前が「弱いコレクション」と呼ばれていますが、具体的に何が「弱い」のでしょうか?

弱い関数

WeakSet ではプリミティブ値の挿入は許可されず、オブジェクト参照のみがサポートされます。

val1 = {id: 1}とします。
    val2 = {id: 2}

ws = new WeakSet() とします。

// Setコレクションと同様に、WeakSetの値は重複しません。同時に、add()もセットインスタンスを返すため、チェーン操作ws.add(val1).add(val1).add(val2)を使用できます。

// 基本データ型の挿入は許可されていません ws.add(3)
// エラー: TypeError: WeakSet で無効な値が使用されています

// ただし、最初にオブジェクトにラップしてから挿入することもできます。let val3 = new Number(3)
ws.add(val3)
コンソールログ(ws.has(val3))
// 出力: true

  • WeakSet は、add()、has()、delete() の 3 つの操作メソッドのみを実装します。
  • WeakSet はトラバーサルを許可せず、サイズや長さの属性もありません。

弱い参照

弱参照について説明する前に、まず強参照とは何かを見てみましょう。

// オブジェクトを宣言する let handsome = {
    名前: 'huilin'、
    年齢: 30
}

// 配列に入れる let arr = [1, handsome, 2]
console.log('arr の長さの前に解放', arr.length) // 3

// マップに入れる
ユーザー = {
    oid: 10001,
    分類: '中国語'、
    スタッフ参考:ハンサム
}
console.log('マップの長さの前に解放', Object.keys(user).length) // 3

コンソールログ('----')

// 突然オブジェクトをnullに設定する
ハンサム = ヌル
// 強く参照されたコンテナでは、オブジェクトはまだ存在し、リサイクルされていません console.log('release after arr length', arr.length) // 3
console.log(arr[1]) // { 名前: 'huilin'、年齢: 30 }
console.log('マップの長さの後に解放', Object.keys(user).length) // 3
console.log(user.staffReference) // { 名前: 'huilin'、年齢: 30 }

テスト コードから、コンテナーが破棄されない限り、参照されたオブジェクトはリサイクルされていないことがわかります。いわゆる弱参照とは、コンテナが要素に応じて自動的に拡張および縮小されることが期待されることを意味します。オブジェクトが null になると、コンテナ内の参照もリサイクルされます。

obj1 = {
    名前: 'huilin'、
    年齢: 30
}

obj2 = {
    名前: 'cc',
    年齢: 29
}

ws1 = 新しいWeakSet() とする
ws1.add(obj1).add(obj2)
console.log(ws1.has(obj1)) // 真

// コンテナから操作された要素であるかどうかに関係なく ws1.delete(obj1)
console.log(ws1.has(obj1)) // 偽

// または、オブジェクト自体が null に設定されている場合、自動的にリサイクルされます。obj2 = null
console.log(ws1.has(obj2)) // 偽

参照

  • zh.javascript.info/マップセット
  • es6.ruanyifeng.com/#docs/set-m…

要約する

ES6 の Set コレクションと WeakSet コレクションに関するこの記事はこれで終わりです。ES6 の Set コレクションと WeakSet コレクションの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • ES6 の Map および Set コレクションの詳細な説明

<<:  Linux で Grafana をインストールし、InfluxDB モニタリングを追加する方法

>>:  CentOS7.x のアンインストールとインストール MySQL5.7 の操作手順とエンコード形式の変更方法

推薦する

Dockerfile echoは、指定されたファイル内の複数行のテキストを実装する方法を指定します。

Dockerfile内の指定されたファイルに複数の行を追加します。echoの後の「$」記号に注意し...

MySql 自動切り捨て例の詳細な説明

MySql 自動切り捨て例の詳細な説明友人が質問しました。プロジェクト内で挿入または更新ステートメン...

Windows 10 での MySQL 5.7.17 のインストールと設定方法のグラフィック チュートリアル

この記事では、最新バージョンの MySQL データベース、つまり MySQL 5.7.17 圧縮バー...

MySQL ストアド プロシージャの使用例の分析

この記事では、MySQL ストアド プロシージャの使用方法について説明します。ご参考までに、詳細は以...

VueのTodoListケースの詳しい説明

<テンプレート> <div id="ルート"> <...

CentOS8 でローカル yum ソースを構成するための詳細なチュートリアル

centos8 ディストリビューションは、BaseOS および AppStream リポジトリを通じ...

HTMLノードの追加と削除の簡単な例

HTML ノードの追加と削除の簡単な例 HTML ノードの追加と削除の簡単な例<input t...

TypeScript 開発のための 6 つの実用的なヒント

目次1. 開発前にエンティティの種類を決定する2. インターフェースをリクエストするときは、使用する...

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

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

今日と昨日の 0:00 タイムスタンプを取得する MySQL の例

以下のように表示されます。昨日: UNIX_TIMESTAMP(CAST(SYSDATE() AS ...

MySQL ベストプラクティス: パーティションテーブルの基本タイプ

MySQL パーティションテーブルの概要MySQL の人気が高まるにつれて、MySQL に保存される...

React Hooks に基づく小さな状態管理の詳細な説明

目次React Hooks に基づく状態共有の実装ユーザーエクスペリエンスこの記事では、主に Rea...

Dockerコンテナでルート権限を取得する方法

まず、コンテナが稼働している必要がありますコンテナのCONTAINER IDは、sudo docke...

MySQLのスレッド実行の急増とクエリの遅延の問題を解決する

目次背景問題の説明原因分析CPUクエリが遅い接続数分析する拡大する総括する背景新年を迎える前は、一年...

Nginx_geo モジュールを使用して CDN スケジュールを設定する方法

NginxのGeoモジュールの紹介geo ディレクティブは、ngx_http_geo_module ...