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
set(key, value): Set (add/update) the value of the key key to value and return the Map object.
get(key): Read the value of key key, if not, return undefined.
has(key): Determine whether a key-value pair exists in a Map object and return true/false.
delete(key): Delete a key-value pair and return true/false.
clear(): Clear all key-value pairs in the Map object.
Traversal method
keys(): Returns the Iterator object of the key name.
values(): Returns the Iterator object of the key value.
entries(): Returns an Iterator object of key-value pairs.
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
set(key, value): Set (add/update) the value of key key to value, Returns a WeakMap object.
get(key): Read the value of key key, if not, return undefined.
has(key): Determine whether a key-value pair exists in a WeakMap object and return true/false.
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('#btn'); wm.set(btn, {count: 0}); btn.addEventListener('click', () => { 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!