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

ES6 WeakMap solves memory leaks

小云云
Release: 2018-03-12 09:09:10
Original
1636 people have browsed it

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

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

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!

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