ES6 solves Memory leakage through WeakMap. es6weakmap

ES6 solves Memory leakage through WeakMap. es6weakmap

1. Map

1. Definition

Map Objects store key-value pairs, similar to Data Structure dictionaries. Compared with traditional objects, they can only use strings as keys. Map Objects can use any value as keys.

2. Syntax

new Map([iterable])

Attribute

Size: Number of Return key-value pairs.

Procedure

1. Set (key, value): sets (Add/update) the value of the key to value, and returns the Map object.
2. Get (key): reads the value of the key. If no value exists, undefined is returned.
3. Has (key): checks whether a key-Value Pair exists in a Map object, and returns true/false.
4. Delete (key): delete a key-value pair. true/false is returned.
5. Clear (): clear all key-value pairs in the Map object.

Traversal method

1. Keys (): The Iterator object of the Return key name.
2. Values (): return the Iterator object of the key value.
3. Entries (): return the Iterator object of the key-value pair.
4. ForEach (value, key, map) =>{}): traverses all key-value pairs of the Map object.

3. Example

Procedure

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')); // truem.delete('mazey');console.log(m.has('mazey')); // falsem.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 ("key: % s, value: % s", key, value) ;}); // key: foo, value: 11 // key: bar, value: 22 // key: mazey; Value: 413

Ii. WeakMap

1. Definition

The WeakMap object stores key-value pairs. Unlike Map, the key must be an object. Because the key is a weak reference, 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 the key to value, and the WeakMap object is returned.
2. Get (key): reads the value of the key. If no value exists, undefined is returned.
3. Has (key): checks whether a key-Value Pair exists in a WeakMap object, and returns true/false.
4. Delete (key): delete a key-value pair. true/false is returned.

Note:

Because WeakMap has a special garbage collection mechanism, 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 Memory leakage through WeakMap

When you bind an event to a Dom object, if the Dom object disappears and the memory is not released in time (set to null), it will remain in the memory.

Saving Dom objects using WeakMap does not cause such a problem, because after the Dom object disappears, the garbage collection mechanism of JS Automatically releases the memory occupied by it.

<Button type = "button" id = "btn"> button </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>

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.