Was sind die neuen es6-Datenstrukturen?

Die neuen Strukturen sind: 1. Symbol, das einen eindeutigen Wert darstellt und eine Funktionsstruktur ist 2. Set, das sich auf eine „Set“-Struktur bezieht, ähnlich einem Array, das die Speicherung ungeordneter und nicht wiederholbarer Daten ermöglicht; 3. WeakSet, ähnlich wie Set, können interne Daten keine doppelten Werte haben. 4. Map bezieht sich auf eine „Wörterbuch“-Struktur, die Zuordnungsbeziehungen speichern kann.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, ECMAScript Version 6, Dell G3-Computer.

ES6 neue Datenstruktur

1. Symbol

Symbol ist einer der neuen Basisdatentypen in ES6. Jeder von der Funktion Symbol zurückgegebene Symbol-Wert ist eindeutig. Der symbol-Wert dient als Bezeichner des Objektattributs und hat seinen einzigen Zweck. Symbol是ES6中新增的一个基本数据类型之一，它是一个函数。每一个从Symbol函数返回的Symbol值都是独一无二的，symbol值作为对象属性的标识符，也是唯一的用途的。

const s1 = Symbol()
const s2 = Symbol()
console.log(s1 === s2); // false

symbol作为key

第一种方式，直接在对象的字面量中添加。

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

第二种方式，通过添加数组方式添加。

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

第三种方式，通过对象中的defineProperty方法添加。

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

通过symbol获取对应的值

需要用数组方式来获取，不能通过点语法，否则会获取到字符串key。

console.log(obj[s1]);

symbol不能被隐式转换成string类型。

注意：Symbol函数中的参数是symbol描述符，这是在ES10新增的特性

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

我们不能直接alert一个symbol对象，但是我们可以通过toString的方式或者.description来获取symbol对象的描述符。

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

遍历symbol

在使用for遍历、object.keys中是获取不到symbol健的，对此object还提供了getOwnPropertySymbols方法，用于获取对象中所有symbol的key。

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

全局symbol对象注册

有时，我们可能需要多个symbol的值是一致的，我们可以通过symbol提供的静态方法for方法传入一样的描述符来使它们的值一致。

Symbol.for

该方法会在使用给定键搜索运行时符号注册表中的现有符号，并在找到时返回它。否则，使用此键在全局符号注册表中创建一个新符号。

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

Symbol.keyFor

该方法用于获取全局symbol的描述符。

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

2、Set

Set对象（类似数组）允许你存放任何数据类型，但里面的值不能重复。

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

方法	返回值	说明
size	set对象中的数量	返回set对象中的数量
add	Set对象	添加元素
delete	boolean	删除元素
has	boolean	Set对象中是否存在这个值
clear	无	清空Set对象中的值

3、WeakSet

WeakSet是类似Set的另外一种数据结构，内部数据也不能有重复值。

• 它与Set的区别
  • WeakSet只能存放对象类型，不能存放基本数据类型
  • WeakSet对元素是弱引用

基本使用

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

weakSet.add(obj);

WeakSet常用方法

Symbol als Schlüssel

方法	返回值	说明
add	weakset对象	添加元素
delete	boolean	删除元素
has	boolean	weakset const obj1 = { name: "_island" }; const obj2 = { name: "QC2125" }; const obj3={ [obj1]:'a', [obj2]:'b', } console.log(obj3); // { '[object Object]': 'b' }

🎜Die erste Möglichkeit besteht darin, es direkt im Literal des Objekts hinzuzufügen. 🎜

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']])

🎜Die zweite Möglichkeit besteht darin, es durch Hinzufügen eines Arrays hinzuzufügen. 🎜

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

🎜Die dritte Möglichkeit besteht darin, es über die Methode defineProperty im Objekt hinzuzufügen. 🎜

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

🎜🎜Erhalten Sie den entsprechenden Wert über das Symbol🎜🎜🎜Er muss im Array-Modus und nicht über die Punktsyntax abgerufen werden, da sonst der Zeichenfolgenschlüssel abgerufen wird. 🎜

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

🎜symbol kann nicht implizit in den Typ string konvertiert werden. 🎜🎜🎜Hinweis: Der Parameter in der Symbolfunktion ist der Symboldeskriptor, was eine neue Funktion in ES10 ist🎜🎜rrreee🎜Wir können ein symbol-Objekt nicht direkt alarmieren, aber Wir können den Deskriptor des symbol-Objekts über toString oder .description erhalten. 🎜rrreee🎜🎜Traversierungssymbol🎜🎜🎜Bei Verwendung von for traversal und object.keys kann der symbol-Schlüssel für diesenobject stellt außerdem die Methode getOwnPropertySymbols bereit, mit der die Schlüssel aller Symbole im Objekt abgerufen werden. 🎜rrreee🎜🎜Globale Symbolobjektregistrierung🎜🎜🎜Manchmal müssen die Werte mehrerer symbol konsistent sein. Wir können die von symbol übergeben /code> Die for-Methode übergibt denselben Deskriptor, um ihre Werte konsistent zu machen. 🎜🎜🎜Symbol.for🎜🎜🎜Diese Methode durchsucht die Laufzeitsymbolregistrierung mithilfe des angegebenen Schlüssels nach einem vorhandenen Symbol und gibt es zurück, wenn es gefunden wird. Andernfalls wird mit diesem Schlüssel ein neues Symbol in der globalen Symbolregistrierung erstellt. 🎜rrreee🎜🎜Symbol.keyFor🎜🎜🎜Diese Methode wird verwendet, um den Deskriptor des globalen symbol zu erhalten. 🎜rrreee🎜🎜🎜2, Set🎜🎜🎜🎜Set-Objekt (ähnlich einem Array) ermöglicht das Speichern jedes Datentyps, aber die darin enthaltenen Werte können nicht wiederholt werden. 🎜rrreee🎜🎜Gemeinsame Methoden festlegen🎜🎜🎜

Methode

Rückgabewert

Beschreibung

size🎜

setDie Menge im Set-Objekt🎜

Gibt die Menge im Set-Objekt zurück🎜 🎜

hinzufügen🎜

Objekt festlegen 🎜

Element hinzufügen 🎜🎜

löschen 🎜

boolean🎜

Element löschen 🎜🎜

hat🎜

boolean🎜

Existiert dieser Wert im Set-Objekt? 🎜🎜

clear🎜

Keine🎜

Löschen Sie den Wert im Set Objekt🎜 🎜🎜🎜🎜🎜🎜3. WeakSet🎜🎜🎜🎜WeakSet ist eine weitere Datenstruktur, die Set ähnelt, und die internen Daten können keine doppelten Werte haben . 🎜

• Der Unterschied zwischen ihm und Set
  • WeakSet kann nur Objekttypen speichern, keine Basisdatentypen
  • WeakSet ist ein schwacher Verweis auf das Element

🎜🎜Grundlegende Verwendung🎜🎜rrreee🎜🎜Gemeinsame Methoden von WeakSet🎜🎜🎜

Methode

Rückgabewert

Beschreibung

hinzufügen🎜

Schwachstellen-Objekt 🎜

Element hinzufügen 🎜🎜

löschen🎜

boolean code>🎜<td>Element löschen 🎜🎜</td> <tr> <td> <code>hat🎜

boolean🎜

weakset Objekt Existiert dieser Wert🎜🎜🎜🎜

关于遍历

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

方法	返回值	说明
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前端】

Das obige ist der detaillierte Inhalt vonWas sind die neuen es6-Datenstrukturen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!