WeakMap, WeakMap and Set, WeakSet

Reread JavaScript advanced programming and reverse crush your interviewer?

This is chapter 6, collection reference types. Chapter 5 is about the use of basic reference types such as Date and RegExp. The book is about the basic API. I use it almost every day, so I skip the notes. Map and Set are new features in ES6. I haven’t used them since 1202.

Map

A collection type used to store key-value pairs. Object can easily accomplish the same function. Why Map?

Map and Object performance comparison

Memory footprint: For a fixed size of memory, Map can store approximately 50% more key-value pairs than Object
Insert performance: Map is slightly faster to insert. If a large number of insert operations are performed, Map is recommended
Speed of lookup: If a large number of lookup operations are involved, Object is recommended
Delete performance: Map deletes faster and is recommended if your code involves a lot of deletes. (Object delete operation performance is poor, but we often set the property value to null or undefined for pseudo-delete)

The basic API for Map

For later when the document, move the document

/ / initialization
const m = new Map([['key'.'value'],
		['key1'.'value1']])// set
m.set('key2'.'value2')
// has
m.has('key2') // true
// get
m.get('key2') // value2
// size
m.size / / 3
// delete
m.delete('key2')
Copy the code

What are the other differences between Map and Object

Object can only use numeric values, strings, or symbols as keys. A Map can use any Javacript data type as a key
Map maintains the insertion order of key-value pairs and can perform iterative operations based on the insertion order

WeakMap

WeakMap is a sibling of Map and its API is a subset of Map.

Unlike Map, the key of WeakMap can only be Object or the type inherited from Object. RypeError is reported if a non-object key is used

Key features of WeakMap

WeakMap keys are not formal references and do not prevent garbage collection! Once the key is reclaimed, the value itself is reclaimed!
WeakMap does not support the ability to iterate over key-value pairs. There is also no clear method because key value pairs in a WeakMap can be destroyed at any time.

Since we can’t iterate, we can’t value from WeakMap without knowing the key object reference!

Examples from the book:

const wm = new WeakMap()
wm.set({}, "val")
// Because there is no other reference to the key, the key is reclaimed when this line of code is finished. The value is also reclaimed.
Copy the code

Application scenarios of WeakMap: Saving associated metadata

Example:

const wm = new WeakMap(a);const loginButton = document.querySelector('#login')
wm.set(loginButton, {disable: true})
Copy the code

Once the original DOM node is destroyed and there is no other place to refer to the object, the content saved in WeakMap is also destroyed accordingly.

Set

Another new collection type, Set, is in many ways like a souped-up Map.

The Set of basic API

/ / initialization
const s = new Set(['val1'.'val2'])// set
s.add('val3')
// has
s.has('val2') // true
// size
s.size / / 3
// delete returns a Boolean value indicating whether a value to be deleted exists in the collection
s.delete('val2')
//clear destroys all values
s.clear() 
Copy the code

The characteristics of the Set

A Set can contain any data type as a value. Strict object equality criteria are used to check for value matches
Set maintains the order in which values are inserted and supports sequential iteration

const s = new Set(['val1'.'val2'])
for (let value of s.values()) {
	// value
}
s.forEach((val, dupVal) = > {
	//
})
// Convert a collection to an array using the extension operator
[...s]
Copy the code

Modifying the properties of a value in a collection does not affect its identity as a collection value

WeakSet

WeakSet is a sibling of Set, and its API is a subset of Set.

Unlike Set, the value of WeakSet can only be Object or the type inherited from Object. TypeError is reported if you use non-objects as keys

The characteristics of WeakSet

Similar to WeakMap, I won’t write the example here.

WeakSet’s value is not a formal reference and does not prevent garbage collection.
Non-iterable value

Use scenarios of WeakSet

WeakSet is not as useful as WeakMap. But there are still applications:

const disableElements = new WeakSet(a)const loginButton = document.querySelector('#login')
disableElements.add(loginButton)

// If the element is in the collection, you can tell if it is disabled. WeakMap also frees its memory once an element is removed from the DOM tree (assuming, for rigor, that there is no other place to refer to the object).
disableElements.has(loginButton) // true

Copy the code

conclusion

Map and Set provide new capabilities for managing data, while the corresponding Weak versions simplify memory management.

Article history:

1, JS history and script elements

Var, let, const; var, let, const

3, original value, reference value and depth copy

Map