ES6 WeakMap résout les fuites de mémoire

Cet article vous présente principalement une explication détaillée de la façon dont ES6 résout le problème de fuite de mémoire via WeakMap. L'éditeur pense que c'est plutôt bien, je vais donc le partager avec vous maintenant, dans l'espoir d'aider tout le monde.

1. Map

1. Définition

L'objet Map enregistre les paires clé-valeur, similaire à un dictionnaire de structure de données, contrairement aux objets traditionnels, qui ne peuvent utiliser ; chaînes Lorsque les clés sont différentes, l'objet Map peut utiliser n'importe quelle valeur comme clé.

2. Syntaxe

new Map([iterable])

Attribut

taille : renvoie le nombre de paires clé-valeur.

Méthode de fonctionnement

1. set(key, value) : Définir (ajouter/mettre à jour) la valeur de la clé key sur la valeur et renvoyer l'objet Map.

2. get(key) : lit la valeur de la clé key, sinon, renvoie undefined.

3. has(key) : Détermine si une paire clé-valeur existe dans un objet Map et renvoie vrai/faux.

4. delete(key) : supprime une paire clé-valeur et renvoie vrai/faux.

5. clear() : efface toutes les paires clé-valeur dans l'objet Map.

Méthode Traversal

1. keys() : renvoie l'objet Iterator du nom de la clé.

2. values() : renvoie l'objet Iterator de la valeur clé.

3. entries() : renvoie un objet Iterator de paires clé-valeur.

4. forEach((value, key, map) => {}) : Parcourez toutes les paires clé-valeur de l'objet Map.

3. Exemple

Méthode de fonctionnement

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); // {}

Méthode de traversée

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. Définition

L'objet WeakMap enregistre les paires clé-valeur. Contrairement à Map, sa clé doit être un objet, car la clé est une référence faible et la mémoire est automatiquement libérée après la disparition de l'objet clé.

2. Syntaxe

Méthode

new WeakMap([iterable])

set(key, value) : Définir (ajouter/mettre à jour) la valeur de la clé à valeur, renvoie l'objet WeakMap.
get(key) : lit la valeur de la clé key, sinon, renvoie undefined.
has(key) : détermine si une paire clé-valeur existe dans un objet WeakMap et renvoie vrai/faux.
delete(key) : supprime une paire clé-valeur et renvoie vrai/faux.
Remarque

En raison du mécanisme spécial de récupération de place de WeakMap, il n'y a pas de méthode clear().

3. Exemple

3. Résolution du problème de fuite de mémoire via WeakMap

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

Lors de l'utilisation de l'objet Dom pour lier des événements, si la mémoire n'est pas libérée à temps après l'objet Dom disparaît (mis à null), il sera toujours stocké en mémoire.

L'utilisation de WeakMap pour enregistrer des objets Dom ne posera pas de tels problèmes, car après la disparition de l'objet Dom, le mécanisme de récupération de place JS libérera automatiquement la mémoire qu'il occupe.

Recommandations associées :

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

Partage d'exemples sur la façon de gérer les fuites de mémoire JavaScript

Fuites de mémoire en JavaScript programmes Introduction détaillée du code graphique

Comment gérer les fuites de mémoire JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!