Inhaltsverzeichnis
ES6 neue Datenstruktur
Heim Web-Frontend Front-End-Fragen und Antworten Was sind die neuen es6-Datenstrukturen?

Was sind die neuen es6-Datenstrukturen?

Apr 15, 2022 pm 07:26 PM
es6 数据结构

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.

Was sind die neuen es6-Datenstrukturen?

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. SymbolES6中新增的一个基本数据类型之一,它是一个函数。每一个从Symbol函数返回的Symbol值都是独一无二的,symbol值作为对象属性的标识符,也是唯一的用途的。

const s1 = Symbol()
const s2 = Symbol()
console.log(s1 === s2); // false
Nach dem Login kopieren

symbol作为key

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

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

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

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

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

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

通过symbol获取对应的值

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

console.log(obj[s1]);
Nach dem Login kopieren

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

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

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

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

let sym = Symbol('a')
console.log(sym.description); // 'a'
Nach dem Login kopieren

遍历symbol

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

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

全局symbol对象注册

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

Symbol.for

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

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

Symbol.keyFor

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

const key =Symbol.keyFor(sb)
console.log(key); // c
Nach dem Login kopieren

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 }
Nach dem Login kopieren

Set常用方法

方法返回值说明
sizeset对象中的数量返回set对象中的数量
addSet对象添加元素
deleteboolean删除元素
hasbooleanSet对象中是否存在这个值
clear清空Set对象中的值

3、WeakSet

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

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

基本使用

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

weakSet.add(obj);
Nach dem Login kopieren

WeakSet常用方法

Symbol als Schlüssel
方法返回值说明
addweakset对象添加元素
deleteboolean删除元素
hasbooleanweakset
const obj1 = { name: "_island" };
const obj2 = { name: "QC2125" };
const obj3={
  [obj1]:'a',
  [obj2]:'b',
}

console.log(obj3);
// { '[object Object]': 'b' }
Nach dem Login kopieren
Nach dem Login kopieren
🎜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']])
Nach dem Login kopieren
Nach dem Login kopieren
🎜Die zweite Möglichkeit besteht darin, es durch Hinzufügen eines Arrays hinzuzufügen. 🎜
map2.forEach((item) => console.log(item));
Nach dem Login kopieren
Nach dem Login kopieren
🎜Die dritte Möglichkeit besteht darin, es über die Methode defineProperty im Objekt hinzuzufügen. 🎜
for ([val, key] of map2) {
  console.log(`${key}---${val}`);
}
Nach dem Login kopieren
Nach dem Login kopieren
🎜🎜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
Nach dem Login kopieren
Nach dem Login kopieren
🎜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 diesen< Code nicht abgerufen werden >object 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< bereitgestellte statische Methode <code> ü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🎜🎜🎜< /thead>
MethodeRückgabewertBeschreibung
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🎜🎜🎜
MethodeRückgabewertBeschreibung
hinzufügen🎜Schwachstellen-Objekt 🎜Element hinzufügen 🎜🎜
löschen🎜 boolean</ code>🎜<td>Element löschen 🎜🎜<tr><td><code>hat🎜boolean🎜weakset</code > Objekt Existiert dieser Wert🎜🎜🎜🎜<p><strong>关于遍历</strong></p><p><code>WeakSet不能被遍历,因为它只是对对象进行弱引用,如果遍历去获取元素,有可能导致对象不能被GC回收。

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

4、Map

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

const obj1 = { name: "_island" };
const obj2 = { name: "QC2125" };
const obj3={
  [obj1]:&#39;a&#39;,
  [obj2]:&#39;b&#39;,
}

console.log(obj3);
// { &#39;[object Object]&#39;: &#39;b&#39; }
Nach dem Login kopieren
Nach dem Login kopieren

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: &#39;_island&#39; } => &#39;a&#39;, { name: &#39;QC2125&#39; } => &#39;b&#39; }

// or
const map2 = new Map([[obj1,&#39;a&#39;],[obj2,&#39;b&#39;]])
Nach dem Login kopieren
Nach dem Login kopieren

Map常用方法

方法返回值说明
get获取对应的元素通过key获取对应元素
sizeMap对象中的数量返回Map对象中的数量
setMap对象添加元素
deleteboolean删除元素
hasbooleanSet对象中是否存在这个值
clear清空Set对象中的值

遍历Map

通过foreach语句遍历Map

map2.forEach((item) => console.log(item));
Nach dem Login kopieren
Nach dem Login kopieren

通过for..of遍历Map

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

5、WeakMap

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

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

基本使用

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

WeakMap常用方法

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

关于遍历

WeakSet一样,正因为它是弱引用,WeakMapkey是不可枚举的,如果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!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Vergleichen Sie komplexe Datenstrukturen mithilfe des Java-Funktionsvergleichs Vergleichen Sie komplexe Datenstrukturen mithilfe des Java-Funktionsvergleichs Apr 19, 2024 pm 10:24 PM

Bei der Verwendung komplexer Datenstrukturen in Java wird Comparator verwendet, um einen flexiblen Vergleichsmechanismus bereitzustellen. Zu den spezifischen Schritten gehören: Definieren einer Komparatorklasse und Umschreiben der Vergleichsmethode, um die Vergleichslogik zu definieren. Erstellen Sie eine Komparatorinstanz. Verwenden Sie die Methode „Collections.sort“ und übergeben Sie die Sammlungs- und Komparatorinstanzen.

Java-Datenstrukturen und -Algorithmen: ausführliche Erklärung Java-Datenstrukturen und -Algorithmen: ausführliche Erklärung May 08, 2024 pm 10:12 PM

Datenstrukturen und Algorithmen sind die Grundlage der Java-Entwicklung. In diesem Artikel werden die wichtigsten Datenstrukturen (wie Arrays, verknüpfte Listen, Bäume usw.) und Algorithmen (wie Sortier-, Such-, Diagrammalgorithmen usw.) ausführlich untersucht. Diese Strukturen werden anhand praktischer Beispiele veranschaulicht, darunter die Verwendung von Arrays zum Speichern von Bewertungen, verknüpfte Listen zum Verwalten von Einkaufslisten, Stapel zum Implementieren von Rekursionen, Warteschlangen zum Synchronisieren von Threads sowie Bäume und Hash-Tabellen für schnelle Suche und Authentifizierung. Wenn Sie diese Konzepte verstehen, können Sie effizienten und wartbaren Java-Code schreiben.

Vertieftes Verständnis der Referenztypen in der Go-Sprache Vertieftes Verständnis der Referenztypen in der Go-Sprache Feb 21, 2024 pm 11:36 PM

Referenztypen sind ein spezieller Datentyp in der Go-Sprache. Ihre Werte speichern nicht direkt die Daten selbst, sondern die Adresse der gespeicherten Daten. In der Go-Sprache umfassen Referenztypen Slices, Karten, Kanäle und Zeiger. Ein tiefes Verständnis der Referenztypen ist entscheidend für das Verständnis der Speicherverwaltungs- und Datenübertragungsmethoden der Go-Sprache. In diesem Artikel werden spezifische Codebeispiele kombiniert, um die Merkmale und Verwendung von Referenztypen in der Go-Sprache vorzustellen. 1. Slices Slices sind einer der am häufigsten verwendeten Referenztypen in der Go-Sprache.

PHP-Datenstruktur: Das Gleichgewicht der AVL-Bäume sorgt für eine effiziente und geordnete Datenstruktur PHP-Datenstruktur: Das Gleichgewicht der AVL-Bäume sorgt für eine effiziente und geordnete Datenstruktur Jun 03, 2024 am 09:58 AM

Der AVL-Baum ist ein ausgewogener binärer Suchbaum, der schnelle und effiziente Datenoperationen gewährleistet. Um ein Gleichgewicht zu erreichen, führt es Links- und Rechtsdrehungen durch und passt Teilbäume an, die das Gleichgewicht verletzen. AVL-Bäume nutzen den Höhenausgleich, um sicherzustellen, dass die Höhe des Baums im Verhältnis zur Anzahl der Knoten immer klein ist, wodurch Suchoperationen mit logarithmischer Zeitkomplexität (O(logn)) erreicht werden und die Effizienz der Datenstruktur auch bei großen Datensätzen erhalten bleibt.

Vollständige Analyse des Java-Sammlungsframeworks: Analyse der Datenstruktur und Enthüllung des Geheimnisses effizienter Speicherung Vollständige Analyse des Java-Sammlungsframeworks: Analyse der Datenstruktur und Enthüllung des Geheimnisses effizienter Speicherung Feb 23, 2024 am 10:49 AM

Überblick über das Java Collection Framework Das Java Collection Framework ist ein wichtiger Teil der Programmiersprache Java. Es stellt eine Reihe von Containerklassenbibliotheken bereit, die Daten speichern und verwalten können. Diese Containerklassenbibliotheken verfügen über unterschiedliche Datenstrukturen, um den Datenspeicher- und -verarbeitungsanforderungen in verschiedenen Szenarien gerecht zu werden. Der Vorteil des Sammlungsframeworks besteht darin, dass es eine einheitliche Schnittstelle bietet, die es Entwicklern ermöglicht, verschiedene Containerklassenbibliotheken auf die gleiche Weise zu betreiben, wodurch die Entwicklungsschwierigkeiten verringert werden. Datenstrukturen des Java-Sammlungsframeworks Das Java-Sammlungsframework enthält eine Vielzahl von Datenstrukturen, von denen jede ihre eigenen einzigartigen Eigenschaften und anwendbaren Szenarien aufweist. Im Folgenden sind einige gängige Datenstrukturen des Java Collection Frameworks aufgeführt: 1. Liste: Liste ist eine geordnete Sammlung, die die Wiederholung von Elementen ermöglicht. Li

Die auf Hash-Tabellen basierende Datenstruktur optimiert die Schnitt- und Vereinigungsberechnungen von PHP-Arrays Die auf Hash-Tabellen basierende Datenstruktur optimiert die Schnitt- und Vereinigungsberechnungen von PHP-Arrays May 02, 2024 pm 12:06 PM

Die Hash-Tabelle kann zur Optimierung von PHP-Array-Schnittpunkt- und Vereinigungsberechnungen verwendet werden, wodurch die Zeitkomplexität von O(n*m) auf O(n+m) reduziert wird. Die spezifischen Schritte sind wie folgt: Verwenden Sie eine Hash-Tabelle, um die Elemente von zuzuordnen Wandeln Sie das erste Array in einen booleschen Wert um, um schnell herauszufinden, ob das Element im zweiten Array vorhanden ist, und um die Effizienz der Schnittpunktberechnung zu verbessern. Verwenden Sie eine Hash-Tabelle, um die Elemente des ersten Arrays als vorhanden zu markieren, und fügen Sie dann die Elemente des zweiten Arrays nacheinander hinzu, wobei Sie vorhandene Elemente ignorieren, um die Effizienz der Vereinigungsberechnungen zu verbessern.

PHP-SPL-Datenstrukturen: Bringen Sie Geschwindigkeit und Flexibilität in Ihre Projekte PHP-SPL-Datenstrukturen: Bringen Sie Geschwindigkeit und Flexibilität in Ihre Projekte Feb 19, 2024 pm 11:00 PM

Überblick über die PHPSPL-Datenstrukturbibliothek Die PHPSPL-Datenstrukturbibliothek (Standard PHP Library) enthält eine Reihe von Klassen und Schnittstellen zum Speichern und Bearbeiten verschiedener Datenstrukturen. Zu diesen Datenstrukturen gehören Arrays, verknüpfte Listen, Stapel, Warteschlangen und Mengen, von denen jede einen bestimmten Satz von Methoden und Eigenschaften zum Bearbeiten von Daten bereitstellt. Arrays In PHP ist ein Array eine geordnete Sammlung, die eine Folge von Elementen speichert. Die SPL-Array-Klasse bietet erweiterte Funktionen für native PHP-Arrays, einschließlich Sortierung, Filterung und Zuordnung. Hier ist ein Beispiel für die Verwendung der SPL-Array-Klasse: useSplArrayObject;$array=newArrayObject(["foo","bar","baz"]);$array

Lernen Sie die Geheimnisse der Datenstrukturen der Go-Sprache ausführlich kennen Lernen Sie die Geheimnisse der Datenstrukturen der Go-Sprache ausführlich kennen Mar 29, 2024 pm 12:42 PM

Eine eingehende Untersuchung der Geheimnisse der Datenstruktur der Go-Sprache erfordert spezifische Codebeispiele. Als prägnante und effiziente Programmiersprache zeigt die Go-Sprache auch ihren einzigartigen Charme bei der Verarbeitung von Datenstrukturen. Datenstruktur ist ein Grundkonzept der Informatik, das darauf abzielt, Daten so zu organisieren und zu verwalten, dass sie effizienter abgerufen und bearbeitet werden können. Indem wir uns eingehend mit den Geheimnissen der Datenstruktur der Go-Sprache befassen, können wir besser verstehen, wie Daten gespeichert und verarbeitet werden, und so die Programmiereffizienz und Codequalität verbessern. 1. Array Array ist eine der einfachsten Datenstrukturen

See all articles