ES6 を使用して WeakMap を通じてメモリ リーク問題を解決する (詳細なチュートリアル)

この記事では、ES6 が WeakMap を通じてメモリ リーク問題をどのように解決するかについての詳細な説明を主に紹介し、参考として共有します。

1. Map

1. 定義

Map オブジェクトは、文字列のみをキーとして使用できる従来のオブジェクトとは異なり、キーと値のペアを保存します。値はキーとして機能します。

2. 構文

new Map([iterable])

属性

size: キーと値のペアの数を返します。

操作メソッド

1. set(key, value): key keyの値をvalueに設定(追加・更新)し、Mapオブジェクトを返します。

2. get(key): key の値を読み取り、そうでない場合は、unknown を返します。

3. has(key): Map オブジェクトにキーと値のペアが存在するかどうかを判断し、true/false を返します。

4. delete(key): キーと値のペアを削除し、true/false を返します。

5. clear(): Map オブジェクト内のすべてのキーと値のペアをクリアします。

Traversal メソッド

1. keys(): キー名の Iterator オブジェクトを返します。

2. values(): キー値の Iterator オブジェクトを返します。

3. entries(): キーと値のペアの Iterator オブジェクトを返します。

4. forEach((value, key, map) => {}): Map オブジェクトのすべてのキーと値のペアを走査します。

3. 操作メソッド

let m = new Map([
  ['foo', 11],
  ['bar', 22]
]);
m.set('mazey', 322)
  .set('mazey', 413);
console.log(m); // {"foo" => 11, "bar" => 22, "mazey" => 413}
console.log(m.has('mazey')); // true
m.delete('mazey');
console.log(m.has('mazey')); // false
m.clear();
console.log(m); // {}

Traversalメソッド

2. WeakMap

1. WeakMapオブジェクトキーと値のペアを保存します。Map との違いは何ですか?キーは弱参照であり、キー オブジェクトが消えるとメモリが自動的に解放されるため、キーはオブジェクトである必要があります。

2. 構文

let m = new Map([
  ['foo', 11],
  ['bar', 22],
  ['mazey', 413]
]);
console.log(m); // {"foo" => 11, "bar" => 22, "mazey" => 413}
console.log(m.keys()); // MapIterator {"foo", "bar", "mazey"}
console.log(m.values()); // MapIterator {11, 22, 413}
console.log(m.entries()); // MapIterator {"foo" => 11, "bar" => 22, "mazey" => 413}
m.forEach((value, key, map) => {
  console.log("键：%s，值：%s", key, value);
});
// 键：foo，值：11
// 键：bar，值：22
// 键：mazey，值：413

メソッド

set(key, value): key key の値を value に設定(追加/更新)し、WeakMap オブジェクトを返します。

get(key): キー key の値を読み取り、そうでない場合は、unknown を返します。

1. has(key): 特定のキーと値のペアが WeakMap オブジェクトに存在するかどうかを判断し、true/false を返します。

2. delete(key): キーと値のペアを削除し、true/false を返します。

3. 注

WeakMap の特殊なガベージ コレクション メカニズムにより、clear() メソッドはありません。

4. 3. 例

new WeakMap([iterable])

3. Dom オブジェクトを使用してイベントをバインドする場合、Dom の後にメモリが時間内に解放されない (null に設定される) 場合、メモリ リークの問題を解決します。オブジェクトが消えても、メモリには存在したままになります。

WeakMap を使用して Dom オブジェクトを保存すると、そのような問題は発生しません。Dom オブジェクトが消滅すると、JS ガベージ コレクション メカニズムがそれが占有しているメモリを自動的に解放するためです。 rreee 以上が皆さんのためにまとめたもので、今後皆さんのお役に立てれば幸いです。

関連記事: vueをEchartsと組み合わせてクリック強調表示効果を実現

vueメソッドで現在アクティブ化されたルートを取得

echartsのマウスオーバーレイで強調表示されたノードと関係名の詳細な説明

以上がES6 を使用して WeakMap を通じてメモリ リーク問題を解決する (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。