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

This article editor for everyone to introduce in detail "what is the new es6 data structure", the content is detailed, the steps are clear, the details are handled properly, I hope this "what is the new es6 data structure" article can help you solve your doubts, following the editor's ideas slowly in depth, let's learn new knowledge.

New structures are: 1, Symbol, indicating a unique value, is a function structure; 2, Set, refers to the "set" structure, similar to an array, allows the storage of unordered and unrepeatable data; 3, WeakSet, similar to Set, internal data can not have duplicate values; 4, Map, refers to the "dictionary" structure, can store mapping relations.

The operating environment of this tutorial: windows7 system, ECMAScript version 6, Dell G3 computer.

New data structure for ES6

1 、 Symbol

Symbol is one of the new basic data types in ES6, and it is a function. Each symbol value returned from the Symbol function is unique, and the symbol value serves a unique purpose as the identifier of the object property.

Const S1 = Symbol () const S2 = Symbol () console.log (S1 = = S2); / / false

Symbol as key

The first way is to add it directly to the literal amount of the object.

/ / symbol as keyconst obj = {[S1]: 'abc', [S2]:' cc',}

The second way is by adding an array.

/ / it needs to be obtained by array, not through dot syntax, otherwise the string keyconsole.log (obj [S1]) will be obtained.

The third way is to add through the defineProperty method in the object.

Const s4=Symbol () Object.defineProperty (obj,s4, {configurable:true, enumerable:true, writable:true, value:'ff'})

Obtain the corresponding value through symbol

You need to get it in an array, not through dot syntax, otherwise you will get the string key.

Console.log (obj [S1])

Symbol cannot be implicitly converted to string type.

Note: the argument in the Symbol function is the symbol descriptor, which is a new feature in ES10

Let Sym = Symbol ("Sym") alert (Sym) / / TypeError: Cannot convert a Symbol value to a string

We cannot alert a symbol object directly, but we can get the descriptor of the symbol object through toString or .description.

Let sym = Symbol ('a') console.log (sym.description); / /'a'

Traversing symbol

You can't get the symbol key in object.keys using for traversal, and the object also provides a getOwnPropertySymbols method to get the key of all symbol in the object.

Const sKeys= (Object.getOwnPropertySymbols (obj)); for (const skey of sKeys) {console.log (obj [skey]);}

Global symbol object registration

Sometimes, we may need multiple symbol values to be consistent, and we can pass in the same descriptor through the static method for method provided by symbol to make them consistent.

Symbol.for

This method searches for an existing symbol in the runtime symbol registry using the given key and returns it when found. Otherwise, use this key to create a new symbol in the global symbol registry.

Const sa=Symbol.for ('cc') const sb=Symbol.for (' cc') console.log (sa===sb); / / true

Symbol.keyFor

This method is used to get the descriptor of the global symbol.

Const key = Symbol.keyFor (sb) console.log (key) / / c

2 、 Set

Set objects (similar to arrays) allow you to store any data type, but the values in it cannot be duplicated.

Const S1 = new Set () s1.add (10) s1.add (20) s1.add (30) s1.add (40) console.log (S1) / / Set (4) {10,20,30,40} s1.add (20) console.log (S1) / / Set (4) {10,20,30,40}

Common methods of Set

Method return value indicating the quantity in the sizeset object returns the quantity in the set object addSet object adding element deleteboolean deleting element whether this value exists in the hasbooleanSet object clear does not empty the value in the Set object

3 、 WeakSet

WeakSet is another data structure similar to Set, and internal data cannot have duplicate values.

The difference between it and Set

WeakSet can only store object types, not basic data types.

WeakSet is a weak reference to an element

Basic use

Const weakSet = new WeakSet (); let obj = {name: "_ island"}; weakSet.add (obj)

Common methods of WeakSet

Method returns a value indicating whether this value exists in the addweakset object add element deleteboolean delete element hasbooleanweakset object

About traversing

WeakSet cannot be traversed because it only makes a weak reference to the object, and if you traverse to get the element, it is possible that the object cannot be reclaimed by GC.

So objects in WeakSet cannot be obtained.

4 、 Map

A new data structure added by ES6 to store mapping relationships. We know that objects cannot be used as key in JavaScript. (if we treat an object as a key, it internally converts the object to a string [object object])

Const obj1 = {name: "_ island"}; const obj2 = {name: "QC2125"}; const obj3= {[obj1]: 'obj1, [obj2]:' baked,} console.log (obj3); / / {'[object Object]':'b'}

On the other hand, Map can store objects as key, which can be added to Map through the set method or directly by literal quantity.

Const obj1 = {name: "_ island"}; const obj2 = {name: "QC2125"}; const map = new Map (); map.set (obj1, "a"); map.set (obj2, "b"); console.log (map) / / Map (2) {{name:'_ island'} = > 'asides, {name:' QC2125'} = >'b'} / / orconst map2 = new Map ([[obj1,'a'], [obj2,'b']])

Common methods of Map

Method return value indicates that get gets the corresponding element through key to obtain the quantity in the corresponding element sizeMap object returns the quantity in the Map object setMap object adds element deleteboolean deletes element whether this value exists in the hasbooleanSet object clear does not empty the value in the Set object

Traversing Map

Traversing Map through foreach statements

Map2.forEach ((item) = > console.log (item))

Traversing Map through for..of

For ([val, key] of map2) {console.log (`${key}-- ${val}`);}

5 、 WeakMap

Similar to Map, it also exists in the form of key-value pairs.

The difference between and Map

WeakMap's key can only use objects and does not accept other types as key

The key of WeakMap is a weak reference to an object

Basic use

Const weakMap = new WeakMap (); weakMap.set (obj, "a"); console.log (weakMap.get (obj)); / / a

Common methods of WeakMap

Method returns a value indicating whether this value exists in the getweakmap object acquisition element deleteboolean delete element hasbooleanweaksmap object

About traversing

Just like WeakSet, because it is a weak reference, the key of WeakMap is not enumerable, and if key is enumerable, its list will be affected by GC.

After reading this, the article "what is the new es6 data structure" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, welcome to follow the industry information channel.

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.