Heim >Web-Frontend >js-Tutorial >ES6 -Kollektionen: Verwenden Sie MAP, SET, Schwach, schwachset

ES6 -Kollektionen: Verwenden Sie MAP, SET, Schwach, schwachset

Joseph Gordon-Levitt
Joseph Gordon-LevittOriginal
2025-02-15 12:37:11823Durchsuche

ES6 Collections: Using Map, Set, WeakMap, WeakSet

In diesem Artikel werden vier neue ES6 -Sammlungen und die Vorteile, die sie mitbringen, untersucht.

Die meisten wichtigsten Programmiersprachen haben verschiedene Arten von Datensammlungen. Python hat Listen, Tupel und Wörterbücher. Java hat Listen, Sammlungen, Karten und Warteschlangen. Ruby hat Hash und Arrays. Bisher hat JavaScript nur Arrays. Objekte und Arrays sind die rechten Helfer von JavaScript. ES6 führt vier neue Datenstrukturen ein, die die leistungsstarken und ausdrucksstarken Fähigkeiten der Sprache verbessern: Karte, Set, WeaPset und Schwächen.

Schlüsselpunkte

  • ES6 führt vier neue Datenstrukturen ein: Karte, Set, WeaPset und Schwächen. Diese Sammlungen ermöglichen ausdruckswertere und leistungsstärkere JavaScript -Programme.
  • MAP und SET IN ES6 sind Sammlungen von Schlüsselwertpaaren aller Art. Sie sind für das schnelle Abrufen optimiert und bieten Methoden zum Hinzufügen, Löschen und Schleifen durch Werte. Sie verweisen jedoch starke Hinweise auf Objekte, was teuer sein kann, wenn die Objekte groß und nicht mehr benötigt werden.
  • ES6 führt auch Schwächen und Wewset ein, die der MAP und dem festgelegten Verweise auf Objekte ähneln, aber schwache Verweise auf Objekte enthalten. Dies bedeutet, dass diese Objekte, die nicht mehr benötigt werden, Müll gesammelt werden können, was für die Speicherverwaltung sehr vorteilhaft ist.
  • Während die neue ES6 -Sammlung mehr Flexibilität bietet, können JavaScript -Objekte in vielen Fällen immer noch als Sammlungen verwendet werden. Bei der Entscheidung, ob Objekte oder Schlüsselkollektionen verwendet werden sollen, sollten Entwickler Faktoren wie die Notwendigkeit dynamischer Schlüsselsuche, die Austauschbarkeit von Werten und die Häufigkeit des Hinzufügens oder Löschens von Schlüsselwertpaaren berücksichtigen.

Auf der Suche nach JavaScript Hashmap

HashMap, Wörterbuch und Hash sind verschiedene Möglichkeiten, wie verschiedene Programmiersprachen Schlüsselwertpaare speichern, und diese Datenstrukturen sind für schnelles Abrufen optimiert.

In ES5 können JavaScript -Objekte (nur jede Sammlung von Eigenschaften mit Schlüssel und Werten) Hashes simulieren, aber es gibt mehrere Nachteile, um Objekte als Hashes zu verwenden.

Nachteil Nr. 1: Der Schlüssel in ES5 muss eine Zeichenfolge sein

JavaScript-Objekt-Eigenschaftstasten müssen Zeichenfolgen sein, die ihre Fähigkeit einschränken, eine Sammlung von Schlüsselwertpaaren verschiedener Datentypen zu sein. Natürlich können Sie andere Datentypen in Zeichenfolgen geben, dies fügt jedoch zusätzliche Arbeit hinzu.

Nachteil 2: Objekte sind nicht von Natur aus iterable

Objekte sind nicht als Sammlungen konzipiert, daher gibt es keinen effektiven Weg, um festzustellen, wie viele Attribute ein Objekt hat. (Zum Beispiel Object.keys ist langsam). Wenn Sie die Eigenschaften eines Objekts durchlaufen, erhalten Sie auch die Prototyp -Eigenschaften. Sie können allen Objekten iterable Eigenschaften hinzufügen, aber nicht alle Objekte sollen als Sammlungen verwendet werden. Sie können die Methode for… in Loop und HasownProperty () verwenden, aber dies ist nur eine Problemumgehung. Wenn Sie die Eigenschaften eines Objekts durchlaufen, werden Eigenschaften nicht unbedingt in der Reihenfolge abgerufen, die sie eingefügt wurden.

Nachteil Nr. 3: Herausforderungen der integrierten Methodenkonflikte

Objekte verfügen über integrierte Methoden wie Konstruktor, Zutring und Wert. Wenn einer von ihnen als Eigentum hinzugefügt wird, kann dies zu einem Konflikt führen. Sie können ein nacktes Objekt (nicht von Object.Prototype geerbt) mit Object.create (NULL) erstellen, aber dies ist immer noch nur eine Problemumgehung.

ES6 enthält neue Sammlungsdatentypen, daher müssen keine Objekte mehr verwendet und ihre Nachteile ertragen.

Verwenden der ES6 -Kartensammlung

Karte ist die erste Datenstruktur/die erste Datenstruktur/die erste Datenstruktur/die erste Datenstruktur, die wir überprüfen werden. Eine Karte ist eine Sammlung von Schlüsselwertpaaren aller Art. Es ist einfach, neue Karten zu erstellen, Werte hinzuzufügen/zu entfernen, Tasten/Werte durchzuführen und ihre Größe effektiv zu bestimmen. Hier sind die Schlüsselmethoden:

Erstellen Sie eine Karte und verwenden Sie gemeinsame Methoden

<code class="language-javascript">const map = new Map(); // 创建一个新的Map
map.set('hobby', 'cycling'); // 设置键值对

const foods = { dinner: 'Curry', lunch: 'Sandwich', breakfast: 'Eggs' }; // 新对象
const normalfoods = {}; // 新对象

map.set(normalfoods, foods); // 设置两个对象作为键值对

for (const [key, value] of map) {
  console.log(`${key} = ${value}`); // hobby = cycling  [object Object] = [object Object]
}

map.forEach((value, key) => {
  console.log(`${key} = ${value}`);
}, map); // hobby = cycling  [object Object] = [object Object]

map.clear(); // 清除键值对
console.log(map.size === 0); // True
</code>

Führen Sie dieses Beispiel auf JSBIN

aus

verwenden set

set ist eine geordnete Liste von Werten ohne Duplikate. Das SET wird nicht wie ein Array indiziert, sondern mit Tasten zugegriffen. Set existiert bereits in Java, Ruby, Python und vielen anderen Sprachen. Ein Unterschied zwischen ES6 -Set und Sätzen in anderen Sprachen besteht darin, dass die Reihenfolge in ES6 (nicht in vielen anderen Sprachen) wichtig ist. Hier sind die wichtigsten Methoden:

<code class="language-javascript">const planetsOrderFromSun = new Set();
planetsOrderFromSun.add('Mercury');
planetsOrderFromSun.add('Venus').add('Earth').add('Mars'); // 可链式方法
console.log(planetsOrderFromSun.has('Earth')); // True

planetsOrderFromSun.delete('Mars');
console.log(planetsOrderFromSun.has('Mars')); // False

for (const x of planetsOrderFromSun) {
  console.log(x); // 输入和输出顺序相同 - Mercury Venus Earth
}
console.log(planetsOrderFromSun.size); // 3

planetsOrderFromSun.add('Venus'); // 尝试添加重复项
console.log(planetsOrderFromSun.size); // 仍然是3,没有添加重复项

planetsOrderFromSun.clear();
console.log(planetsOrderFromSun.size); // 0
</code>

Führen Sie dieses Beispiel auf JSBIN

aus

Schwache Sammlungen, Speicher und Müllsammlung

JavaScript -Müllsammlung ist eine Form der Speicherverwaltung, in der nicht mehr verwiesene Objekte automatisch gelöscht und ihre Ressourcen recycelt werden.

MAP- und SET -Verweise auf Objekte sind gezwungen, abzuhalten, und die Müllsammlung ist nicht zulässig. Dies kann teuer werden, wenn MAP/SET auf große Objekte verweist, die nicht mehr benötigt werden (z. B. DOM -Elemente, die aus dem DOM entfernt wurden).

Um dieses Problem zu lösen, führte ES6 auch zwei neue schwache Sets ein, die als Watmap und WeaPSet bezeichnet werden. Diese ES6 -Sammlungen sind "schwach", weil sie Objekte ermöglichen, die nicht mehr aus dem Gedächtnis freigegeben werden müssen.

schwach

schwächen ist die dritte neue ES6 -Sammlung, die wir eingeführt haben. Schwächen ähnelt einer normalen Karte, weist jedoch weniger Methoden auf und es gibt die oben genannten Unterschiede in der Müllsammlung.

<code class="language-javascript">const aboutAuthor = new WeakMap(); // 创建新的WeakMap
const currentAge = {}; // 键必须是对象
const currentCity = {}; // 键必须是对象

aboutAuthor.set(currentAge, 30); // 设置键值
aboutAuthor.set(currentCity, 'Denver'); // 键值可以是不同数据类型

console.log(aboutAuthor.has(currentCity)); // 测试WeakMap是否包含键

aboutAuthor.delete(currentAge); // 删除键
</code>

Benutzerfälle

Schwächen hat mehrere beliebte Anwendungsfälle. Sie können verwendet werden, um die privaten Daten von Objekten privat zu halten oder DOM -Knoten/-objekte zu verfolgen.

private Datenverwendungsfälle

Das folgende Beispiel stammt vom JavaScript -Experten Nicholas C. Zakas:

<code class="language-javascript">var Person = (function() {
  var privateData = new WeakMap();

  function Person(name) {
    privateData.set(this, { name: name });
  }

  Person.prototype.getName = function() {
    return privateData.get(this).name;
  };

  return Person;
}());
</code>

Die Verwendung von schwachemhap hier vereinfacht den Prozess der privaten Aufbewahrung von Objektdaten. Personenobjekte können referenziert werden, aber privatataweakmap darf nicht zugreifen, wenn es keine bestimmte Person gibt.

Domknoten -Anwendungsfall

Das Google Polymer -Projekt verwendet Schwächen in einem Code -Snippet namens PositionWalker.

PositionWalker verfolgt den Speicherort im DOM -Subtree als aktueller Knoten und den Offset in diesem Knoten.

Schwächen wird verwendet, um Bearbeitung, Löschen und Änderungen von Dom -Knoten zu verfolgen:

<code class="language-javascript">const map = new Map(); // 创建一个新的Map
map.set('hobby', 'cycling'); // 设置键值对

const foods = { dinner: 'Curry', lunch: 'Sandwich', breakfast: 'Eggs' }; // 新对象
const normalfoods = {}; // 新对象

map.set(normalfoods, foods); // 设置两个对象作为键值对

for (const [key, value] of map) {
  console.log(`${key} = ${value}`); // hobby = cycling  [object Object] = [object Object]
}

map.forEach((value, key) => {
  console.log(`${key} = ${value}`);
}, map); // hobby = cycling  [object Object] = [object Object]

map.clear(); // 清除键值对
console.log(map.size === 0); // True
</code>

WeaPset

WeaPset ist ein Satz von Mengen, deren Elemente Müll erfassen können, wenn Objekte, auf die sie verweisen, nicht mehr benötigt. WeaPset erlaubt keine Iteration. Ihre Anwendungsfälle sind recht begrenzt (zumindest vorerst). Die meisten frühen Anwender sagten, dass Wewset verwendet werden kann, um Objekte zu markieren, ohne sie zu ändern. ES6-features.org hat ein Beispiel für das Hinzufügen und Entfernen von Elementen von WeaPset, um zu verfolgen, ob das Objekt markiert wurde:

<code class="language-javascript">const planetsOrderFromSun = new Set();
planetsOrderFromSun.add('Mercury');
planetsOrderFromSun.add('Venus').add('Earth').add('Mars'); // 可链式方法
console.log(planetsOrderFromSun.has('Earth')); // True

planetsOrderFromSun.delete('Mars');
console.log(planetsOrderFromSun.has('Mars')); // False

for (const x of planetsOrderFromSun) {
  console.log(x); // 输入和输出顺序相同 - Mercury Venus Earth
}
console.log(planetsOrderFromSun.size); // 3

planetsOrderFromSun.add('Venus'); // 尝试添加重复项
console.log(planetsOrderFromSun.size); // 仍然是3,没有添加重复项

planetsOrderFromSun.clear();
console.log(planetsOrderFromSun.size); // 0
</code>

alle Dinge Karte? Records und ES6 Collection

Karte und Set sind eine schöne neue ES6-Sammlung von Schlüsselwertpaaren. Das heißt, JavaScript -Objekte können in vielen Fällen immer noch als Sammlungen verwendet werden. Es ist nicht erforderlich, zur neuen ES6 -Sammlung zu wechseln, es sei denn, die Situation erfordert sie.

MDN hat eine gute Liste von Fragen, um festzustellen, wann ein Objekt oder eine Schlüsselsammlung verwendet werden soll:

    Sind die
  • -Keys normalerweise erst bekannt, wenn sie laufen? Müssen Sie sie dynamisch finden?
  • Alle Werte haben den gleichen Typ und können synonym verwendet werden?
  • Benötigen Sie einen Schlüssel, der keine Zeichenfolge ist?
  • Werden Schlüsselwertpaare häufig hinzugefügt oder gelöscht?
  • Haben Sie eine Zahl (leicht zu ändern) von Schlüsselwertpaaren?
  • Ist die Sammlung iteriert?

neue ES6 -Sammlungen erzeugen einfacher JavaScript

JavaScript -Sammlungen waren bisher sehr begrenzt, diese wurden jedoch mit ES6 korrigiert. Diese neuen ES6 -Sammlungen verbessern die Kraft und Flexibilität der Sprache und vereinfachen die Aufgaben von JavaScript -Entwicklern, die sie übernehmen.


Dieser Artikel ist Teil einer Webentwicklungsreihe von Microsoft Technology Evangelist und DevelopinTelligence über praktische JavaScript -Lernen, Open -Source -Projekte und Best Practices, einschließlich des Microsoft Edge -Browsers und der neuen EdgeHTML -Rendering -Engine. DevelopIntelligence bietet JavaScript-Schulungs- und Reaktionen Schulungskurse über AppendTO, seine frontendorientierte Blog- und Kurswebsite.

Wir empfehlen Ihnen, auf einer Vielzahl von Browsern und Geräten einschließlich Microsoft Edge, dem Standardbrowser für Windows 10, zu testen. Melden oder suchen Sie nach EdgeHTML -Problemen, wie z. B. Website -Rendering oder Problemen mit Standardkonformität. Besuchen Sie auch den Edge -Blog für die neuesten Informationen von Microsoft -Entwicklern und Experten.

FAQs über ES6 -Sammlungen (FAQ): MAP, SET, schwach, schwachet

Was ist der Hauptunterschied zwischen Karte und Schwächen in JavaScript ES6?

In JavaScript ES6 werden sowohl MAP als auch Schwächen verwendet, um Schlüsselwertpaare zu speichern. Es gibt jedoch einige signifikante Unterschiede zwischen ihnen. Erstens kann der Schlüssel in MAP von jedem Typ sein, während in Schwächen der Schlüssel ein Objekt sein muss. Zweitens verfügt MAP über eine Größe, mit der Sie die Anzahl der Schlüsselwertpaare überprüfen können, aber Schwächen verfügt nicht über diese Eigenschaft. Schließlich enthält MAP starke Verweise auf Schlüsselobjekte, was bedeutet, dass sie nicht für die Müllsammlung berechtigt sind, solange die Karte existiert. Schwächen hingegen hält schwache Hinweise auf Schlüsselobjekte.

Wie kann man in JavaScript ES6 über schwach oder schwachetet iterieren?

Im Gegensatz zu MAP und SET haben Schwächen und Wewset keine Möglichkeit, ihre Elemente zu iterieren. Dies liegt daran, dass sie so konzipiert sind, dass sie schwache Hinweise auf ihre Schlüssel (Schwächen) oder Werte (WewSet) halten, was bedeutet, dass diese jederzeit Müll gesammelt werden können. Daher gibt es keine Garantie dafür, dass das Element immer noch existiert, wenn es versucht, darüber zu iterieren. Wenn Sie über die Sammlung iterieren müssen, sollten Sie stattdessen eine Karte oder einstellen.

Kann ich den ursprünglichen Datentyp als Schlüssel in schwach oder schwach einsetzen?

Nein, Sie können den ursprünglichen Datentyp nicht als Schlüssel in Schwächen oder WeaPset verwenden. Die Schlüssel in diesen Sammlungen müssen Objekte sein. Dies liegt daran, dass Schwächen und Wewset schwache Hinweise auf ihre Schlüssel enthalten, was bedeutet, dass die Schlüssel, wenn es keine anderen Verweise auf sie gibt, Müll gesammelt werden können. Primitive Datentypen (z. B. Zahlen und Zeichenfolgen) sind kein Müll wie Objekte, daher können sie nicht als Schlüssel in diesen Sammlungen verwendet werden.

Warum sollte ich schwach oder schwach anstelle von MAP oder SET verwenden?

Schwächen und SchwachetSet haben einige einzigartige Merkmale, und in einigen Fällen können sie angemessener sind als MAP oder SET. Da sie schwache Hinweise auf ihre Schlüssel (Schwächen) oder Werte (schwachset) haben, können sie Müll gesammelt werden, wenn sie nicht mehr verwendet werden. Dies ist nützlich, wenn Sie andere Daten mit einem Objekt in Verbindung bringen möchten, das Objekt jedoch nicht aus der Müllsammlung verhindern möchten, wenn es nicht mehr benötigt wird. Da Schwächen und Wewset keine Möglichkeit haben, ihre Elemente zu iterieren, können sie für die von ihnen gespeicherten Daten ein gewisses Maß an Privatsphäre liefern.

Was passiert, wenn ein Schlüssel in einer Schwächen oder Schwächenset Müll gesammelt wird?

Wenn Tasten in Schwächen oder Schwächen mit Müll gesammelt werden, werden die entsprechenden Einträge in der Sammlung automatisch gelöscht. Dies liegt daran, dass diese Sets schwache Hinweise auf ihre Schlüssel enthalten, was bedeutet, dass die Schlüssel, wenn sie nicht mehr verwendet werden, Müll gesammelt werden können. Diese Funktion ist nützlich, um den Speicher in JavaScript -Anwendungen zu verwalten, da sie sicherstellt, dass Daten, die nicht mehr verwendet werden, die nicht mehr verwendet werden, gelöscht werden.

Kann ich Schwächen oder Schwächen verwenden, um temporäre Daten zu speichern?

Ja, Schwächen und WeaPset eignen sich hervorragend zum Speichern von temporären Daten. Da sie schwache Hinweise auf ihre Schlüssel (Schwächen) oder Werte (schwachset) haben, können sie Müll gesammelt werden, wenn sie nicht mehr verwendet werden. Dies bedeutet, dass die in diesen Sets gespeicherten Daten, wenn die Schlüssel gesammelt werden, ebenfalls gelöscht werden. Dies ist nützlich, um das zu speichern, was nur für kurze Zeit benötigt wird, da Sie sich keine Sorgen machen müssen, dass Sie es manuell aufräumen.

Wie kann man überprüfen, ob Schwächen oder Wewset einen bestimmten Schlüssel oder Wert enthält?

Sie können die Methode haben, um zu prüfen, ob der Schwächen oder der Schwachet einen bestimmten Schlüssel enthält. Diese Methode gibt einen booleschen Wert zurück, der angibt, ob der Schlüssel in der Sammlung vorhanden ist. Denken Sie jedoch daran, dass Sie diese Methode nicht verwenden können, um einen bestimmten Wert in WeaPSet zu überprüfen, da die Werte in diesem Satz nicht zugänglich sind.

Kann ich einen Eintrag aus einer Schwächen oder einem Schwachsatz löschen?

Ja, Sie können mit der Löschmethode den Eintrag aus Schwächen löschen. Diese Methode löscht den Eintrag, der dem angegebenen Schlüssel zugeordnet ist, und gibt einen booleschen Wert zurück, der angibt, ob der Schlüssel in der Sammlung vorhanden ist. Sie können jedoch keine Einträge von WeaPset löschen, da diese Sammlung keine Löschmethode hat.

Kann ich alle Einträge in Schwächen oder SchwachetSet löschen?

Nein, Sie können nicht alle Einträge in Schwächen oder SchwachetSet löschen. Diese Sammlungen haben keine klare Methode, die in Karte und Set verfügbar ist. Dies liegt daran, dass Schwächen und Wewset so ausgelegt sind, dass sie die Schlüssel automatisch aufräumen, wenn sie Müll gesammelt sind.

Kann ich die Größe einer Schwachung oder Schwachanlage bekommen?

Nein, Sie können nicht die Größe der Schwächen oder der Schwachstelle erhalten. Diese Sammlungen haben keine Größe, die in Karte und Set verfügbar ist. Dies liegt daran, dass die Größe der Schwächen oder des Schwächenset aufgrund der Müllsammlung jederzeit geändert werden kann.

Das obige ist der detaillierte Inhalt vonES6 -Kollektionen: Verwenden Sie MAP, SET, Schwach, schwachset. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
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