JS advanced | ES6 new data structure

“This is the 14th day of my participation in the First Challenge 2022.

preface

In the last article, we looked at common ES6 syntax in daily project development, so let’s talk about what new data structures are in ES6 and how they are used.

ES6 Added data structures

Symbol

Symbol, one of the basic data types added in ES6, is a function. Each Symbol value returned from the Symbol function is unique. The Symbol value is the identifier of the object property and is used only for that purpose.

const s1 = Symbol(a)const s2 = Symbol(a)console.log(s1 === s2); // false
Copy the code

Symbol as the key

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

// symbol is the key
const obj={
  [s1]:'abc',
  [s2]:'cc',}Copy the code

The second way is by adding an array.

// The string key can be obtained by using an array
console.log(obj[s1]);

Copy the code

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

const s4=Symbol(a)Object.defineProperty(obj,s4,{
  configurable:true.enumerable:true.writable:true.value:'ff'
})
Copy the code

Obtain the corresponding value through symbol

You need to get the key from an array. You can’t get the key from a point syntax.

console.log(obj[s1]);
Copy the code

Symbol cannot be converted implicitly to string.

let Sym = Symbol("Sym")
alert(Sym)  // TypeError: Cannot convert a Symbol value to a string
Copy the code

We cannot alert a Symbol object directly, but we can retrieve the symbol object’s descriptor via toString or.description.

let sym = Symbol('a')
console.log(sym.description); // 'a'
Copy the code

Traverse the symbol

Keys and getOwnPropertySymbols are used to obtain the keys of all symbols in the object.

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

Global Symbol object registration

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

Symbol.for

This method searches for an existing symbol in the runtime symbol registry using the given key and returns it when it is 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
Copy the code

Symbol.keyFor

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

const key =Symbol.keyFor(sb)
console.log(key); // c
Copy the code

Set

A Set object (like an array) allows you to store any data type, but the values 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 }
Copy the code

Set common methods

WeakSet

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

• It has to do withSetThe difference between
  • WeakSetOnly object types can be stored, not basic data types
  • WeakSetA weak reference to an element

The basic use

const weakSet = new WeakSet(a);let obj = {
  name: "_island"
};

weakSet.add(obj);
Copy the code

WeakSet common methods

About the traverse

WeakSet cannot be traversed because it only weakly references an object, and traversing to get an element may result in the object not being collected by GC.

Therefore, objects in WeakSet cannot be obtained

Map

Data structures added in ES6 to store mappings. We know that you can’t use objects as keys in JavaScript objects. (If we use an object as a key, it internally converts the object to a string.)

const obj1 = { name: "_island" };
const obj2 = { name: "QC2125" };
const obj3={
  [obj1]:'a',
  [obj2]:'b',}console.log(obj3);
// { '[object Object]': 'b' }
Copy the code

On the other hand, a Map can store objects as keys, which can be added to a Map using the set method, or directly via literals.

const obj1 = { name: "_island" };
const obj2 = { name: "QC2125" };
const map = new Map(a); map.set(obj1,"a");
map.set(obj2, "b");
console.log(map); // Map(2) { { name: '_island' } => 'a', { name: 'QC2125' } => 'b' }

// or
const map2 = new Map([[obj1,'a'],[obj2,'b']])
Copy the code

Map common methods

Traverse Map

The Map is traversed through the foreach statement

map2.forEach((item) = > console.log(item));
Copy the code

Through the for… Of traversal of the Map

for ([val, key] of map2) {
  console.log(`${key}---${val}`);
}
Copy the code

WeakMap

Like a Map, it exists as key-value pairs

• Difference between Map and Map
  • WeakMapthekeyOnly objects can be used. No other types are acceptedkey
  • WeakMapthekeyA weak reference to an object

The basic use

const weakMap = new WeakMap(a); weakMap.set(obj,"a");
console.log(weakMap.get(obj)); // a
Copy the code

WeakMap common methods

About the traverse

Like WeakSet, because it is a weak reference, WeakMap’s key is not enumerable, and if the key is enumerable its list will be affected by GC.

JS advanced series of articles

• Pure functions of functional programming
• Curritization of functional programming
• Combinatorial functions of functional programming
• Explain the classes in ES6
• Knowing these things about ES6, daily development is better