Using ES6 to solve the memory leak problem through WeakMap (detailed tutorial)

This article mainly introduces the detailed explanation of ES6's solution to the memory leak problem through WeakMap. Now I share it with you and give it as a reference.

1. Map

#1. Define the

Map object to save key-value pairs, similar to For data structure dictionaries; unlike traditional objects that can only use strings as keys, Map objects can use any value as a key.

2. Syntax

new Map([iterable])

Attribute

size: Returns the number of key-value pairs.

Operation method

1. set(key, value): Set (add/update) the value of the key key to value and return the Map object.

2. get(key): Read the value of key key, if not, return undefined.

3. has(key): Determine whether a key-value pair exists in a Map object and return true/false.

4. delete(key): Delete a key-value pair and return true/false.

5. clear(): Clear all key-value pairs in the Map object.

Traversal method

1. keys(): Returns the Iterator object of the key name.

2. values(): Returns the Iterator object of the key value.

3. entries(): Returns an Iterator object of key-value pairs.

4. forEach((value, key, map) => {}): Traverse all key-value pairs of the Map object.

3. Example

Operation method

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 method

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

WeakMap object saves key-value pairs. Unlike Map, its key must be an object, because The key is a weak reference, and the memory is automatically released after the key object disappears.

2. Syntax

new WeakMap([iterable])

Method

1. set(key, value): Set (new/update) key The value of key is value and a WeakMap object is returned.

2. get(key): Read the value of key key, if not, return undefined.

3. has(key): Determine whether a key-value pair exists in a WeakMap object and return true/false.

4. delete(key): Delete a key-value pair and return true/false.

Note

Because of the special garbage collection mechanism of WeakMap, there is no clear() method.

3. Example

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

3. Solve the memory leak problem through WeakMap

When used When the Dom object binds events, if the memory is not released in time (set to null) after the Dom object disappears, it will always exist in the memory.

Using WeakMap to save Dom objects will not cause such problems, because after the Dom object disappears, the JS garbage collection mechanism will automatically release the memory it occupies.

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Example of vue combined with Echarts to achieve click highlighting effect

Vue method to obtain the currently activated route

detailed explanation of echarts mouse overlay highlighting node and relationship names

The above is the detailed content of Using ES6 to solve the memory leak problem through WeakMap (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!