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 の操作手順とエンコード形式の変更方法

推薦する

MySQLソートにおけるCASE WHENの使用例

序文以前のプロジェクトでは、SQL の CASE WHEN ソート関数が使用されました。ではブログメ...

個人的な意見: デザインについて語る

<br />最も実用的なものを選んで話しましょう。まず、勤務先の都市を慎重に選ぶ必要があ...

JS ベースの Ajax 同時リクエスト制御を実装する方法

目次序文Ajax シリアルおよびパラレルAjaxの同時リクエスト制御のための2つのソリューションPr...

vue3 を使用してカウント関数コンポーネントのカプセル化例を実装する

目次序文1. カプセル化の重要性2. どのようにカプセル化しますか? 1. アイデア2. 準備2. ...

Nginxは特定のページへのIPアクセスを制限します

1.すべてのIPアドレスが3つのページa1.htm、a2.htm、a3.htmにアクセスするのを禁止...

ウェブサイトのフッター沈下現象に対する3つの解決策を詳しく解説

背景多くのウェブサイトのデザインは、一般的にコンテンツ+フッターの2つの部分で構成されています。コン...

Win10 64 ビットで圧縮パッケージを使用して最新の MySQL 8.0.18 をインストールするチュートリアル (画像とテキスト付き)

WIN10 64ビットに最新のMySQL8.0.18をインストールダウンロード公式サイトから最新バ...

vue_drf は SMS 認証コードを実装します

目次1. 需要1. 需要2. SDKパラメータ設定1. ディレクトリ構造3. コードの実装1. バッ...

フロントエンドが習得すべき、複数列の等高レイアウトを実現するための CSS テクニック

1. はじめにページを作成しているときに、複数列のレイアウトに遭遇することがあります。各列の内容が異...

nginxを使用して取得したIPアドレスが127.0.0.1である問題を解決する

IPツールを取得 lombok.extern.slf4j.Slf4j をインポートします。 org....

vue-seamless-scrollがスクロールしていいねをするときのデータ同期の問題を解決する

VUE は vue-seamless-scroll を使用して、自動的にスクロールしていいねします。...

Spring Boot のパッケージ化と Docker リポジトリへのアップロードの詳細な手順

重要な注意: この記事を読む前に、Docker コンテナに関する知識と、一般的な Docker 操作...

JavaScriptカルーセルの実装について

今日もとても実践的な事例です。名前を聞くだけで高度で難しそうですよね?今日はカルーセル画像の真髄を簡...

Javascript と Vue を組み合わせて、あらゆる迷路画像の自動パス検索を実現します。

目次序文2次元配列、一方向基本インターフェースのマッピング幅優先、包括的検索マップ編集経路探索アルゴ...

IDEA が Docker を統合してリモート展開を実現するための詳細な手順

1. Dockerサーバーへのリモートアクセスを有効にするdocker が配置されているリモート サ...