Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities

This paper also participates inProject DigginTo win the creative gift package and challenge the creative incentive money

preface

Hello, everyone. Previously, we have learned the knowledge of three data structures in ES6, namely Set, Map and WeakSet. Today, WHAT I want to share with you is still about WeakMap of data structure. From the name, this WeakMap is not strange, because we have both Weak in WeakSet and Map in Map, so think about the similarity between WeakMap and WeakSet. Let’s analyze it in detail.

WeakMap

The structure of WeakMap is similar to that of Map and is also used to generate a set of key-value pairs. WeakMap has its own characteristics although it is similar to Map:

  • WeakMap, like Map, also uses set method to add members and GET method to obtain members
  • WeakMap is also a constructor and can also take an array as an argument to the constructor
  • WeakMap only accepts objects as key names (except null) and does not accept values of other types as key names (Map is any type)
  • WeakMap key names point to objects that are weak references and are not included in the garbage collection mechanism. Therefore, as long as all other references to the referenced object are cleared, the garbage collection mechanism frees the memory occupied by the object. In other words, once it is no longer needed, the key name object and the corresponding key value pair in WeakMap will disappear automatically, without manually deleting the reference
  • Like WeakSet, WeakMap has no size attribute and no traversal operation method (keys, values, entries), so WeakMap cannot be traversed
  • WeakMap also has no clear method, but only set(), GET (), has() and DELETE () methods

Let’s take a look at some small cases combining these characteristics

// 1. WeakMap also uses set method to add members like Map and GET method to obtain members
// 2. WeakMap can also accept an array as a constructor parameter
// 3. WeakMap also has no clear method, only set(), get(), has() and delete() methods
const wm1 = new WeakMap(a);const key = {foo: 1};
wm1.set(key, 2);
wm1.get(key) / / 2

const k1 = [1.2.3];
const k2 = [4.5.6];
const wm2 = new WeakMap([[k1, 'foo'], [k2, 'bar']]);
wm2.get(k2) // "bar"
wm2.delete(k1) //true
wm2.has(k1) //false

// 4. WeakMap only accepts objects as key names, except null
const map = new WeakMap(a); map.set(1.2)
// TypeError: 1 is not an object!
map.set(Symbol(), 2)
// TypeError: Invalid value used as weak map key
map.set(null.2)
// TypeError: Invalid value used as weak map key

//5. WeakMap has no traversal method and cannot be traversed
const k1 = [1.2.3];
const k2 = [4.5.6];
const map = new WeakMap([[k1, 'foo'], [k2, 'bar']]);
map.size;//undefined
map.keys()//TypeError: map.keys is not a function
Copy the code

Use scenarios of WeakMap

With the help of WeakMap key name object is weak reference, WeakMap can be used to take DOM node as the key name, when the DOM node is deleted, WeakMap internal reference will disappear automatically, which can effectively solve the memory leak problem. Let’s take a quick example

let wmap= new WeakMap(a); wmap.set(document.getElementById('map'),
  {clickedTimes: 0});

document.getElementById('map').addEventListener('click'.function() {
  let obj = wmap.get(document.getElementById('map'));
  obj.clickedTimes++;
}, false);
Copy the code

As mentioned in the code above, we take the map node object as the key name of WeakMap, and then store the object with the number of clicks as the key value in WeakMap. Whenever a click event occurs, the state will be updated. Once the DOM node is deleted, the state will automatically disappear without the risk of memory leakage.

conclusion

Ok, my friends, let’s share the WeakMap data structure here. The data structure of Set and Map in ES6 has been shared. Thank you for your attention.

You are welcome to comment and pay attention!