Utiliser ES6 pour résoudre le problème de fuite de mémoire via WeakMap (tutoriel détaillé)

Cet article présente principalement l'explication détaillée de la façon dont ES6 résout le problème de fuite de mémoire via WeakMap. Maintenant, je le partage avec vous et le donne comme référence.

1. Map

1. Définir

Objet Map pour enregistrer les paires clé-valeur. , similaire aux dictionnaires de structure de données ; contrairement aux objets traditionnels qui ne peuvent utiliser que des chaînes comme clés, les objets Map peuvent 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 déplacement

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

1. Définition

L'objet WeakMap enregistre les paires clé-valeur. C'est 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

new WeakMap([iterable])

Méthode

1. set(clé, valeur) : Set (nouveau/mise à jour) La valeur de key key est value et un objet WeakMap est renvoyé.

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 WeakMap et renvoie vrai/faux.

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

Remarque

En raison du mécanisme spécial de collecte des déchets de WeakMap, il n'y a pas de méthode clear().

3. Exemple

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

3.Résoudre le problème de fuite de mémoire via WeakMap

Lors de l'utilisation de l'objet Dom pour lier des événements, si la mémoire n'est pas libérée à temps (définie sur null) après la disparition de l'objet Dom, il existera toujours dans la 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.

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

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Exemple de vue combinée avec Echarts pour obtenir un effet de mise en évidence des clics

Méthode Vue pour obtenir l'itinéraire actuellement activé

Explication détaillée de la superposition de souris echarts mettant en évidence les noms de nœuds et de relations

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!