Shulou(Shulou.com)06/01 Report--

This article focuses on "how to use Map and Set collections in ES6". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn how to use Map and Set collections in ES6.

The concept of set and the difference between set and array

In fact, an array is also a collection, except that the index of the array is a numeric type. When you want to use a non-numeric type as an index, the array will not be able to meet the needs.

The Map collection can hold multiple key-value pairs (key-value), and the Set collection can hold multiple elements.

For Map and Set, you don't usually go through the elements one by one. Map is generally used to store data that needs to be accessed frequently, and Set is generally used to determine whether a value exists in it.

Simulation method of Map and Set in ES 5

In ES 5, there are no Set and Map collections, so objects are generally used to simulate these two sets. The properties of objects are used as keys (key) and attribute values are used as values (value), that is, property: property-value is used to simulate key-value. The specific implementation is as follows:

Simulate the collection of key-value pairs for Map:

/ / create a Map object var map = Object.create (null); / / add attributes and attribute values, that is, add key and valuemap.key1 = 'value 1map.key2 = {}; / / get the value console.log (map.key1) corresponding to key; / / "value 1" console.log (map.key2); / / "Object {}"

Simulate Set:

/ / create a Set object var set = Object.create (null); / / add attributes and attribute values, that is, add key and make its value true, which means that the key exists in the collection set.key = true;// to determine whether the key exists, and then proceed to the next operation if (set.key) {.}

Use objects to simulate the defects of these two sets

Because the property name in the object must be a string, it will be cast to the corresponding string type if it is not a string.

Generally, the if statement is used to determine whether a key exists in the collection. When the value corresponding to the key is false or can be forcibly converted to false, the if statement considers that the key does not exist. But it does exist, but value = false.

Map and Set collections in ES6

Let's formally discuss the characteristics of these two sets.

Map

What is stored in Map is a key-value pair in the form of key-value, in which key and value can be of any type, that is, objects can also be used as key. This is much more flexible than using objects to simulate.

Creation and initialization of Map

You can use the new Map () constructor to create an empty Map

/ / create an empty Map let map = new Map ()

You can also pass an array in the Map () constructor to create and initialize a Map. The array passed in is a two-dimensional array, in which each subarray has two elements, the former as key and the latter as value, thus forming a key-value key-value pair. For example:

/ / use an array to create a non-empty Map let array = [/ / define a two-dimensional array. Each child of the array has two elements ['key1',' value 1'], / / key is the string "key1", value is the string "value 1" [{}, 10086], / / key is an object, and value is the number 10086 [5 " {}] / / key is a numeric type, value is an object] Let map = new Map (array); / / pass the array into the Map constructor

Methods available for Map

Set (key, value): add a key-value pair to it

Get (key): returns undefined if key does not exist

Has (key): returns a Boolean value

Delete (key): returns true if the deletion succeeds, or false if the key does not exist or if the deletion fails

Clear (): clear all elements

Size property, whose value is the number of key-value pairs in map

Traversal method forEach ()

Similar to the forEach method of an array, the callback function contains three parameter values, the key, and the Map collection itself that calls the method

Map.forEach (function (value, key, ownerMap) {console.log (key, value); / / per pair of keys and values console.log (ownerMap = map); / / true})

Set collection

The biggest difference between Set and Map is that there is only key key but no value, so it is generally used to judge whether an element (key) exists in it.

Creation and initialization methods, much the same as Map

You can either create an empty set or initialize a non-empty set with an array. Unlike Map, an array is an one-dimensional array, and each element becomes a key to set. For example:

/ / create an array let array = [1, 'str']; / / one-dimensional array / / initialize setlet set = new Set (array) with an array

Set's method

1. Add (key): add an element to set. If multiple parameters are passed in, only the first one will be added.

Let set = new Set (); set.add (1,2,3); console.log (set.has (1), set.has (2), set.has (3)); / / true false false can see that only the first parameter is added to the set

2. Has (key)

3. Delete (key)

4. Clear ()

Ergodic method forEach

Similar to Map's forEach method, the callback function has three parameters (value, key, ownerSet). Logically speaking, because there is only key but no value in set, then the parameter value should not exist in the function, so why does this value parameter still exist? It may be because the array and the callback function of Map's forEach method all have these three arguments, so if you change the parameters for Set, you will lose consistency. This reason.

So since there is no value, what is the value of this value? The answer is the same as key. We can equate value and key. The following code verifies this claim.

Set.forEach (function (value, key, ownerSet) {console.log (value = key, set = ownerSet); / / true true})

WeakSet and WeakMap

These two sets add Weak before the name than the previous two sets, and the Weak can be literally translated as weak, which refers to weak references, so Set and Map without Weak are not weak, that is, strong refers to strong references.

The difference from Set and Map

Let's start with the difference between the surface layer:

The key of a weak version of a collection can only be an object, and there is no restriction on the type of value.

The weak version of the collection has no forEach method, no for in method, and cannot be initialized with an array.

There are fewer methods available in the weak version. Only add, has, delete methods are available for WeakSet; only set, has, get, delete methods are available for WeakMap.

Fundamental difference

The fundamental difference between the weak version of the collection and their corresponding strong version lies in the strength of the reference to the object, and the object refers to the object at the location of key, that is, when the object is key.

The reference mechanism for strong and weak versions when key is an object is as follows:

When an object is set to key, a reference to that object is saved in the collection. When there are no other references to the object, that is, only the collection still references the object, the weakly typed collection discards the reference to the object, removes the object from the collection, and does not allow it to continue to exist in the collection. It means "kill it all", but the strongly typed collection will always keep the reference to the object and keep it in the collection. This is the fundamental difference between [WeakSet and WeakMap] and [Set and Map].

It is important to note that this mechanism only works on key, and WeakMap will not discard an object bound to an value location whether there are other references or not. Both key and value will be discarded only if the key bound object in this location has no other references. The decision rests with the key location.

The main use of weak version collections

If the version collection can be used where lifecycle management is needed, such as saving a reference to a DOM object, and if a DOM object is used up and there are no other references, then it should be garbage collected to avoid memory leaks, then the weak version of the collection is most suitable for saving such objects.

Note: all four collections are ordered, that is, the order in which elements are added is saved internally. The same is true for collections initialized with arrays, added to the collection in turn according to their position in the array.

At this point, I believe you have a deeper understanding of "how to use Map and Set collections in ES6". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.