“This is the fifth day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”
Hope is a good thing, maybe the best of things. And no good thing ever dies.
Foreplay – Map
ES6 introduces a new data structure called Map, which is similar to, but more flexible than, objects. Its key can be any data type, not just string and Symbol.
As for Map, please refer to the article I summarized earlier: “I kind of forgot about ES6 Map😅😅”, without further ado here.
Attached is a link to the article:
- I kinda forgot about ES6 Map😅😅
Why WeakMap
We can know the use scenario and usage of Map above. Since we have Map, why is there a WeakMap?
First I need to know what the main difference is between WeakMap and Map.
WeakMap structure is similar to Map structure and is also used to generate a set of key-value pairs.
The difference between 1
WeakMap only accepts objects as key names (except null) and does not accept values of other types as key names
const map = new WeakMap();
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
Copy the code
The difference between two
The object to which the key name of WeakMap points is not included in the garbage collection mechanism
WeakMap is designed so that sometimes we want to put some data on an object, but that creates a reference to that object
const e1 = document.getElementById('foo'); const e2 = document.getElementById('bar'); Const arr = [[e1, 'foo '], [e2, 'bar '],];Copy the code
In the above code, E1 and e2 are two objects, and we add some text to the two objects through the ARR array. This forms arR’s reference to E1 and E2
Once these two objects are no longer needed, we must manually remove the reference, otherwise the garbage collection mechanism will not free the memory occupied by E1 and E2.
Arr [0] = null; arr [0] = null; arr [1] = null;Copy the code
If you forget to write this, it will cause a memory leak
WeakMap solves this problem by referring to objects that are weak references to their key names, meaning that the garbage collection mechanism does not take that reference into account. As soon as all other references to the referenced object are cleared, the garbage collection mechanism frees the memory occupied by the object. 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
WeakMap can be used if you want to add data to an object without interfering with garbage collection
WeakMap’s special case is that the object to which its key corresponds may disappear in the future. The WeakMap structure helps prevent memory leaks
WeakMap weakly references only the key name, not the key value. Key values are still normal references
WeakMap
grammar
Since there is no way to list all the key names, the existence of a particular key name is completely unpredictable and depends on whether the garbage collection mechanism is running. One moment the key name is available, the next moment the garbage collection mechanism is suddenly running, and the key name is gone, so in case of uncertainty, there is a general rule that the key name is not available. Second, it cannot be cleared, that is, the clear method is not supported.
In contrast to Map, it has no traversal (that is, no keys(), values(), and entries() methods) and no size attribute.
WeakMap has only four methods available: get(), set(), has(), delete()
WeakMap
Classic usage
WeakMap
The typical case of application isDOM
Node as the key name.
let myWeakmap = new WeakMap();
myWeakmap.set(
document.getElementById('logo'),
{timesClicked: 0})
;
document.getElementById('logo').addEventListener('click', function() {
let logoData = myWeakmap.get(document.getElementById('logo'));
logoData.timesClicked++;
}, false);
Copy the code
Document.getelementbyid (‘logo’) is a DOM node whose state is updated every time a click event occurs. We place this state in WeakMap as a key value, and the corresponding key name is the node object. Once the DOM node is removed, the state disappears automatically, with no risk of memory leaks.
WeakMap
Another use of is to deploy private properties
conclusion
If this article helped you, please like 👍 and follow ⭐️.
If there are any errors in this article, please correct them in the comments section 🙏🙏
Welcome to pay attention to my wechat public number, exchange technology together, wechat search 🔍 : “fifty years later”