What are the new es6 data structures?

The new structures are: 1. Symbol, which represents a unique value and is a function structure; 2. Set, which refers to a "set" structure, similar to an array, allowing the storage of unordered and non-repeated data; 3. WeakSet, similar to Set, the internal data cannot have duplicate values; 4. Map, refers to the "dictionary" structure, which can store mapping relationships.

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

ES6 new data structure

1, Symbol

SymbolisES6 One of the new basic data types inis a function. EachSymbolvalue returned from theSymbolfunction is unique, and thesymbolvalue serves as the identifier of the object attribute and has its only purpose.

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 of the object.

// symbol作为key const obj = { [s1]:'abc', [s2]:'cc', }

The second way is to add it by adding an array.

// 需要用数组方式来获取，不能通过点语法，否则会获取到字符串key console.log(obj[s1]);

The third way is to add it through thedefinePropertymethod in the object.

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

Get the corresponding value through symbol

It needs to be obtained in array mode, not through dot syntax, otherwise the string key will be obtained.

console.log(obj[s1]);

symbolcannot be implicitly converted to typestring.

Note: The parameter 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 cannotalertone directlysymbolobject, but we can get the descriptor of thesymbolobject throughtoStringor.description.

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

Traversing symbol

cannot obtainsymbol when usingfortraversal andobject.keysHealthy,objectalso provides thegetOwnPropertySymbolsmethod, which is 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]); }

Global symbol object registration

Sometimes, we may need the values of multiplesymbolto be consistent, we can passsymbolThe static method providedformethod passes in the same descriptor to make their values consistent.

Symbol.for

This method searches the runtime symbol registry for an existing symbol using the given key and returns it if found. Otherwise, a new symbol is created in the global symbol registry using this key.

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

Symbol.keyFor

This method is used to obtain the descriptor of the globalsymbol.

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

2. Set

Setobject (similar to an array) allows you to store any data type, but the Value cannot be repeated.

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 }

Set common methods

##3. WeakSet

WeakSetis another data structure similar toSet, and the internal data cannot have duplicate values.

The difference between it and
• Set
  • WeakSetcan only store object types, not basic data types
  • WeakSetIt is a weak reference to the element

Basic use

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

WeakSet common methods

关于遍历

WeakSet不能被遍历，因为它只是对对象进行弱引用，如果遍历去获取元素，有可能导致对象不能被GC回收。

所以WeakSet中的对象是不能获取的

4、Map

ES6新增的数据结构，用于存储映射关系。我们知道在JavaScript中对象中是不能用对象来作为key的。（假如我们把对象作为key，其内部会将对象转换为字符串[object object]）

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

而Map则可以把对象作为key进行存储，可以通过set方法添加到Map中，也直接通过字面量的方式添加。

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' } => 'a', { name: 'QC2125' } => 'b' } // or const map2 = new Map([[obj1,'a'],[obj2,'b']])

Map常用方法

遍历Map

通过foreach语句遍历Map

map2.forEach((item) => console.log(item));

通过for..of遍历Map

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

5、WeakMap

和Map类似，也是以键值对的形式存在的

• 和Map的区别
  • WeakMap的key只能使用对象，不接受其他的类型作为key
  • WeakMap的key对对象是弱引用

基本使用

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

WeakMap常用方法

关于遍历

和WeakSet一样，正因为它是弱引用，WeakMap的key是不可枚举的，如果key可枚举那其列表将会受GC影响。

【相关推荐：javascript视频教程、web前端】

The above is the detailed content of What are the new es6 data structures?. For more information, please follow other related articles on the PHP Chinese website!