Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to use Set, Map and Symbol of ES6". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use Set, Map and Symbol of ES6.

Set data structure

   set data structure, which can be understood as a collection, similar to an array, the internal members are unique (not duplicated).

Const a = new Set (); a.add (1), add (2) .add (100) .add (1)

A this collection will have a return value when it adds data through the add method, and the return value is itself, so you can add data in a chained way.

If you encounter an increase in duplicate data, increase it only once.

Iterate through this collection:

A.forEach (I = > console.log (I))

You can also use ES2015's newly added circular for...of

For (let i of a) {console.log (I);}

A few properties of Set:

Size attribute: data length of the collection, console.log (a.size)

Has (value): determines whether a certain value exists in the set, console.log (a.has)

Delete (value): delete a value in the collection. If deleted successfully, return true,console.log (a.delete (1)).

Clear (): delete all data in the collection, a.clear ()

Set applications: array deweighting const arr = [1 arr (console.log); console.log (arr); console.log (a)

The result is a collection that can be converted into an array by Array.from () in ES2015.

Const arr = [1 Array.from (new Set (arr)); console.log (arr); console.log (a)

Of course it can also be used. Expand the operator, define the literal amount of an array, then expand the collection and save it as array data

Const arr = [1 new Set 2 (arr)]; console.log (arr); console.log (a); Map data structure

Map is similar to the structure of an object, it is a collection of key-value pairs. Unlike an object, when an object sets a key, the key is of a string type, and problems occur when storing complex data.

Const obj = {}; obj [true] = "boolean"; obj [123] = "number"; obj [{avision 1}] = "object"; console.log (Object.keys (obj)); / / all keys of the output object

Internally, the names of these keys are automatically changed to string types through the toString method. When a random object is passed to an object as a key, it only needs to match'[object object]', and the result is still object, which leads to a problem. The one-to-one correspondence cannot be realized.

Console.log (obj [{}]); / / pass an empty object console.log (obj [`[object object]`]); / / pass the same string

While Map can realize one-to-one mapping of key values.

Const map = new Map (); const a = {100console.log 1}; / / An is an object, as a key, {avision 1} map.set (aMagne 100); / / the key is an and the value is AGV (map); / / {aVl1} = > 100}

The key a here is an object-type data that is not converted into a string.

Console.log (map.get (a)); / / get the value of key a to get 100console.log (map.has (a)); / / find the key value an and return true//map.delete (a); / / map.clear (); map.forEach ((value,key) = > {console.log (key,value);}) Symbol: a new original data type. The main function is to add a unique attribute identifier to the object.

The return value of Symbol () = = Symbol () is false, which shows that the value created by Symbol is unique.

Const obj = {} obj [Symbol ()] = 123 Symbol OBJ [Symbol ()] = 446 Symbol OBJ object does not overwrite console.log (obj); / / distinguishes Symbolconsole.log (Symbol ('a')); console.log (Symbol ('b')); console.log (Symbol ('age')) by descriptive text; const obj = {[Symbol ()]: 999, name: "li"} obj [Symbol ()] = 111 bombj [Symbol ()] = 2222 Console.log (obj [Symbol ()]); / / the property defined by undefined//Symbol is console.log (obj.name) that cannot be called outside the object.

It is important to note that the properties defined by console.log (obj [Symbol ()]) / / undefined Symbol cannot be called outside the object, and it is impossible to determine which value to get because of the value generated by Symbol (). This can be used as a private member within the object.

Symbol supplement

The value of each call to Symbol is a new value, and Symbol ("a") = Symbol ("a") returns a value of false, and even if the descriptive text is the same, the value of Symbol is different for each call.

How do I reuse the value of Symbol?

Define a global variable to be equal to Symbol (), and reuse the variable a

Const a = Symbol ()

Reuse using static methods in the Symbol type (Symbor.for ())

Const a = Symbol.for ('symbol1'); const b = Symbol.for (' symbol1'); console.log (a = b); / / trueconst a = Symbol.for ('true'); const b = Symbol.for (true); console.log (a = b); / / true, automatically converted to string form when a Boolean value is encountered

The toString tag of the object, any object .toString () is [object Object]. How to set the toString tag of an object by yourself, [Symbol.toStringTag]: "objtag"

Const obj1 = {object Object 1}; console.log (obj1.toString ()); / / [object Object] const obj2 = {[Symbol.toStringTag]: "obj2"}; console.log (obj2.toString ()); / / [object obj2]

The property name of Symbol in the object cannot be traversed with the for loop, Object.keys (obj) is not displayed, and JSON's JSON.stringify (obj) is not available. So Symbol is often ignored and will not be obtained outside. So Symbol is very secure as the private property name of the object.

If you do need to get the name of the Symbol () property in the object

/ / if you do not want to obtain, through the getOwnPropertySymbols [obj] method const obj = {[Symbol ()]: "a", b: 1}; console.log (Object.getOwnPropertySymbols (obj)); / / you can only get the attribute name of Symbol () so far. I believe you have a deeper understanding of "how to use ES6's Set, Map and Symbol". You might as well do it! 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.