Home > Web Front-end > JS Tutorial > body text

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

亚连
Release: 2018-05-31 15:30:28
Original
1705 people have browsed it

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])
Copy after login

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); // {}
Copy after login

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
Copy after login

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])
Copy after login

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
Copy after login

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>
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!