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

Symbol isES6 One of the new basic data types in is a function. Each Symbol value returned from the Symbol function is unique, and the symbol value 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 the defineProperty method 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]);

symbol cannot be implicitly converted to type string.

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 cannot alert one directly symbol object, 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

cannot obtain symbol when using for traversal and object.keys Healthy, object also provides the getOwnPropertySymbols method, 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 multiple symbol to be consistent, we can pass symbol The static method provided for method 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 global symbol.

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

2. Set

Set object (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

Method	Return value	Description
size	setThe number in the object	Returns the number in the set object Quantity
add	SetObject	Add element
delete	boolean	Delete element
has	boolean	SetWhether this value exists in the object
clear	None	Clear the value in the Set object

##3. WeakSet

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

The difference between it and
• Set
  • WeakSet can 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

MethodReturn valueDescriptionAdd elementDelete element

关于遍历

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常用方法

add	weaksetObject
delete	boolean
has	boolean	weaksetWhether this value exists in the object

方法	返回值	说明
get	获取对应的元素	通过key获取对应元素
size	Map对象中的数量	返回Map对象中的数量
set	Map对象	添加元素
delete	boolean	删除元素
has	boolean	Set对象中是否存在这个值
clear	无	清空Set对象中的值

遍历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常用方法

方法	返回值	说明
get	weakmap对象	获取元素
delete	boolean	删除元素
has	boolean	weaksmap对象中是否存在这个值

关于遍历

和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!