ES6 WeakMap solves memory leaks

This article mainly introduces the detailed explanation of ES6 to solve the memory leak problem through WeakMap. The editor thinks it is quite good, and now I share it with you, hoping to help everyone.

1. Map

1. Definition

Map object saves key-value pairs, similar to a data structure dictionary; unlike traditional objects, which can only use strings When the keys are different, the Map object can use any value as the 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 (add/update) the value of key key to value, Returns a WeakMap 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 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 using Dom object to bind events, if the memory is not released in time after the Dom object disappears (set null), it will always exist in 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>

Related recommendations:

Example sharing of how to deal with JavaScript memory leaks

Pictures and texts of memory leaks in JavaScript programs Code details

How to deal with JavaScript memory leaks

The above is the detailed content of ES6 WeakMap solves memory leaks. For more information, please follow other related articles on the PHP Chinese website!