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メソッド

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

2. 定義

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

2. 構文

new WeakMap([iterable])

Method

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

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

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

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

4. 注

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

3. 例

let obj = {
  foo: 11
};
let wm = new WeakMap();
wm.set(obj, 413322);
console.log(wm); // {{…} => 413322}
console.log(wm.has(obj)); // true

3. WeakMap を使用してメモリ リークの問題を解決する

Dom オブジェクトを使用してイベントをバインドする場合、Dom オブジェクトが消滅した後、メモリが時間内に解放されない (null に設定される) と、メモリは常に存在します。記憶の中で。

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

<button type="button" id="btn">按钮</button>
<script>
let wm = new WeakMap();
let btn = document.querySelector(&#39;#btn&#39;);
wm.set(btn, {count: 0});
btn.addEventListener(&#39;click&#39;, () => {
  let v = wm.get(btn);
  v.count++;
  console.log(wm.get(btn).count);
});
// 1 2 3 4 5...
</script>

関連する推奨事項:

JavaScriptのメモリリークに対処する方法の例の共有

JavaScriptプログラムにおけるメモリリークのグラフィックコードの詳細な紹介

JavaScriptのメモリリークに対処する方法

以上がES6 WeakMap でメモリ リークを解決の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。