ES6 WeakMap behebt Speicherlecks

Dieser Artikel stellt Ihnen hauptsächlich eine detaillierte Erklärung vor, wie ES6 das Speicherverlustproblem durch WeakMap löst. Der Herausgeber findet es ziemlich gut, daher werde ich es jetzt mit Ihnen teilen, in der Hoffnung, allen zu helfen.

1. Map

1. Definition

Map-Objekt speichert Schlüssel-Wert-Paare, ähnlich einem Datenstrukturwörterbuch; strings Wenn die Schlüssel unterschiedlich sind, kann das Map-Objekt einen beliebigen Wert als Schlüssel verwenden.

2. Syntax

new Map([iterable])

Attribut

Größe: Gibt die Anzahl der Schlüssel-Wert-Paare zurück.

Operationsmethode

1. set(key, value): Den Wert des Schlüssels key auf value setzen (hinzufügen/aktualisieren) und das Map-Objekt zurückgeben.

2. get(key): Lesen Sie den Wert des Schlüssels key, wenn nicht, geben Sie undefiniert zurück.

3. has(key): Bestimmen Sie, ob ein Schlüssel-Wert-Paar in einem Map-Objekt vorhanden ist, und geben Sie true/false zurück.

4. delete(key): Löscht ein Schlüssel-Wert-Paar und gibt true/false zurück.

5. clear(): Löscht alle Schlüssel-Wert-Paare im Map-Objekt.

Traversal-Methode

1. keys(): Gibt das Iterator-Objekt des Schlüsselnamens zurück.

2. values(): Gibt das Iterator-Objekt des Schlüsselwerts zurück.

3. entries(): Gibt ein Iterator-Objekt aus Schlüssel-Wert-Paaren zurück.

4. forEach((value, key, map) => {}): Durchläuft alle Schlüssel-Wert-Paare des Map-Objekts.

3. Beispiel

Operationsmethode

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-Methode

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 🎜>1. Definition

Das WeakMap-Objekt speichert Schlüssel-Wert-Paare. Anders als bei Map muss sein Schlüssel ein Objekt sein, da der Schlüssel eine schwache Referenz ist und der Speicher automatisch freigegeben wird, nachdem das Schlüsselobjekt verschwindet.

2. Syntax

Methode

new WeakMap([iterable])

set(key, value): Setzt (hinzufügen/aktualisieren) den Wert des Schlüssels key auf value gibt ein WeakMap-Objekt zurück.
get(key): Liest den Wert des Schlüssels key, wenn nicht, gib undefiniert zurück.
has(key): Bestimmen Sie, ob ein Schlüssel-Wert-Paar in einem WeakMap-Objekt vorhanden ist, und geben Sie true/false zurück.
delete(key): Löscht ein Schlüssel-Wert-Paar und gibt true/false zurück.
Hinweis

Aufgrund des speziellen Garbage-Collection-Mechanismus von WeakMap gibt es keine clear()-Methode.

3. Beispiel

3. Lösen des Speicherverlustproblems durch WeakMap

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

Bei Verwendung eines Dom-Objekts zum Binden von Ereignissen, wenn der Speicher nicht rechtzeitig freigegeben wird Das Dom-Objekt verschwindet (auf null gesetzt), es wird immer im Speicher gespeichert.

Die Verwendung von WeakMap zum Speichern von Dom-Objekten verursacht keine derartigen Probleme, da der JS-Garbage-Collection-Mechanismus nach dem Verschwinden des Dom-Objekts automatisch den von ihm belegten Speicher freigibt.

Verwandte Empfehlungen:

<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>

Beispiele für den Umgang mit JavaScript-Speicherlecks teilen

Speicherlecks in JavaScript Programme Detaillierte Einführung in den Grafikcode

Wie man mit JavaScript-Speicherlecks umgeht

Das obige ist der detaillierte Inhalt vonES6 WeakMap behebt Speicherlecks. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!