Movatterモバイル変換


[0]ホーム

URL:


  1. Web
  2. JavaScript
  3. JavaScript-Referenz
  4. Eingebaute Standardobjekte
  5. Map

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.

View in EnglishAlways switch to English

Map

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

* Some parts of this feature may have varying levels of support.

DasMap-Objekt speichert Schlüssel-Werte-Paare und bewahrt die ursprüngliche Einfügereihenfolge der Schlüssel.Jeder Wert (sowohl Objekte als auchprimitiven Werte) kann entweder als Schlüssel oder als Wert verwendet werden.

Probieren Sie es aus

const map = new Map();map.set("a", 1);map.set("b", 2);map.set("c", 3);console.log(map.get("a"));// Expected output: 1map.set("a", 97);console.log(map.get("a"));// Expected output: 97console.log(map.size);// Expected output: 3map.delete("b");console.log(map.size);// Expected output: 2

Beschreibung

Map-Objekte sind Sammlungen von Schlüssel-Wert-Paaren. Ein Schlüssel in derMapkann nur einmal vorkommen; er ist einzigartig in der Sammlung derMap. EinMap-Objekt wird durch Schlüssel-Wert-Paare iteriert — einefor...of-Schleife gibt ein 2-Element-Array von[key, value] für jede Iteration zurück. Die Iteration erfolgt inEinfügereihenfolge, was der Reihenfolge entspricht, in der jedes Schlüssel-Wert-Paar erstmals mit derset()-Methode in die Karte eingefügt wurde (das heißt, es war kein Schlüssel mit demselben Wert in der Karte vorhanden, alsset() aufgerufen wurde).

Die Spezifikation verlangt, dass Maps so implementiert werden, dass sie "im Durchschnitt Zugriffszeiten bieten, die sublinear zur Anzahl der Elemente in der Sammlung sind". Daher könnte es intern als Hashtabelle (mit O(1) Nachschlagen), Suchbaum (mit O(log(N)) Nachschlagen) oder eine andere Datenstruktur dargestellt werden, solange die Komplexität besser ist als O(N).

Schlüsselgleichheit

Die Gleichheit von Werten basiert auf demSameValueZero-Algorithmus. (Früher wurdeSameValue verwendet, welches0 und-0 als unterschiedlich behandelte. Überprüfen Sie dieBrowser-Kompatibilität.) Dies bedeutet, dassNaN als gleich zuNaN angesehen wird (auch wennNaN !== NaN) und alle anderen Werte gemäß den Semantiken des===-Operators als gleich betrachtet werden. Auch bei Objektschlüsseln basiert die Gleichheit auf der Objektidentität. Sie werden nach Referenz und nicht nach Wert verglichen. SieheVerwendung des Map-Objekts für Beispiele.

Objekte vs. Maps

Object ist ähnlich wieMap — beide ermöglichen es Ihnen, Schlüssel zu setzenWerte zu speichern, diese Werte abzurufen, Schlüssel zu löschen und zu erkennen, ob etwasunter einem Schlüssel gespeichert ist. Aus diesem Grund (und weil es keine eingebautenAlternativen gab) wurdeObject historisch alsMap verwendet.

Es gibt jedoch wichtige Unterschiede, dieMap in einigenFällen vorzuziehen machen:

MapObject
Unbeabsichtigte Schlüssel EineMap enthält standardmäßig keine Schlüssel. Sie enthält nur das, was explizit in sie eingefügt wird.

EinObject hat ein Prototyp, daher enthält es Standard-Schlüssel, die mit Ihren eigenen Schlüsseln kollidieren könnten, wenn Sie nicht vorsichtig sind.

Hinweis: Dies lässt sich umgehen, indem manObject.create(null) verwendet, aber dies wird selten gemacht.

Sicherheit EineMap ist sicher in der Verwendung mit benutzerdefinierten Schlüsseln und Werten.

Das Setzen von benutzerdefinierten Schlüssel-Wert-Paaren auf einObject kann einem Angreifer ermöglichen, den Prototyp des Objekts zu überschreiben, was zu Objektinjektionsangriffen oderPrototypenverschmutzungsangriffen führen kann. Wie das Problem mit unbeabsichtigten Schlüsseln kann dies ebenfalls durch die Verwendung einesnull-Prototyp-Objekts gemildert werden.

Schlüsseltypen Die Schlüssel einerMap können jeden Wert haben (einschließlich Funktionen, Objekten oder beliebigen primitiven Werten). Die Schlüssel einesObject müssen entweder einString oder einSymbol sein.
Schlüsselreihenfolge

Die Schlüssel inMap sind in einer einfachen Weise geordnet: EinMap-Objekt iteriert Einträge, Schlüssel und Werte in der Reihenfolge ihrer Einfügung.

Obwohl die Schlüssel eines gewöhnlichenObject jetzt geordnet sind, war dies nicht immer der Fall, und die Ordnung ist komplex. Daher ist es am besten, sich nicht auf die Eigenschaftsreihenfolge zu verlassen.

Die Reihenfolge wurde erstmals für eigene Eigenschaften in ECMAScript 2015 definiert; ECMAScript 2020 definiert die Reihenfolge auch für geerbte Eigenschaften. Aber beachten Sie, dass kein einziges Mechanismusalle Eigenschaften eines Objekts iteriert; die verschiedenen Mechanismen beinhalten jeweils unterschiedliche Untergruppen von Eigenschaften. (for-in enthält nur aufzählbare stringbasierte Eigenschaften;Object.keys enthält nur eigene, aufzählbare, stringbasierte Eigenschaften;Object.getOwnPropertyNames enthält eigene, stringbasierte Eigenschaften, auch wenn sie nicht aufzählbar sind;Object.getOwnPropertySymbols tut dasselbe nur fürSymbol-basierte Eigenschaften, usw.)

Größe

Die Anzahl der Elemente in einerMap lässt sich leicht aus ihrersize-Eigenschaft abrufen. Das Bestimmen der Anzahl der Elemente in einemObject ist umständlicher und weniger effizient. Eine gängige Methode ist die Länge (length) des vonObject.keys() zurückgegebenen Arrays.
Iteration EineMap ist einiterierbares, sodass sie direkt iteriert werden kann.

Object implementiert keinIterationsprotokoll, und daher sind Objekte nicht direkt iterierbar mit der JavaScriptfor...of Anweisung (standardmäßig).

Hinweis:

  • Ein Objekt kann das Iterationsprotokoll implementieren oder Sie können ein iterierbares Objekt mitObject.keys oderObject.entries erhalten.
  • Diefor...in Anweisung ermöglicht Ihnen, über dieaufzählbaren Eigenschaften eines Objekts zu iterieren.
Leistung

Bessere Leistung in Szenarien mit häufigem Hinzufügen und Entfernen von Schlüssel-Wert-Paaren.

Nicht optimiert für häufiges Hinzufügen und Entfernen von Schlüssel-Wert-Paaren.

Serialisierung und Parsen

Keine native Unterstützung für Serialisierung oder Parsen.

(Sie können jedoch Ihre eigene Serialisierungs- und Parse-Unterstützung fürMap erstellen, indem SieJSON.stringify() mit seinemreplacer-Argument undJSON.parse() mit seinemreviver-Argument verwenden. Siehe die Stack Overflow FrageWie macht man ein JSON.stringify auf einer ES6 Map?).

Native Unterstützung für Serialisierung vonObject nach JSON, unter Verwendung vonJSON.stringify().

Native Unterstützung für das Parsen von JSON inObject, unter Verwendung vonJSON.parse().

Objekteigenschaften setzen

Das Setzen von Objekteigenschaften funktioniert auch für Map-Objekte und kann zuerheblicher Verwirrung führen.

Daher scheint dies auf eine Weise zu funktionieren:

js
const wrongMap = new Map();wrongMap["bla"] = "blaa";wrongMap["bla2"] = "blaaa2";console.log(wrongMap); // Map { bla: 'blaa', bla2: 'blaaa2' }

Aber diese Art der Eigenschaftszusetzung interagiert nicht mit der Map-Datenstruktur. Sie nutzt die Funktion des generischen Objekts. Der Wert von 'bla' wird nicht in der Map für Abfragen gespeichert. Andere Operationen auf den Daten schlagen fehl:

js
wrongMap.has("bla"); // falsewrongMap.delete("bla"); // falseconsole.log(wrongMap); // Map { bla: 'blaa', bla2: 'blaaa2' }

Die korrekte Verwendung zum Speichern von Daten in der Map erfolgt über die Methodeset(key, value).

js
const contacts = new Map();contacts.set("Jessie", { phone: "213-555-1234", address: "123 N 1st Ave" });contacts.has("Jessie"); // truecontacts.get("Hilary"); // undefinedcontacts.set("Hilary", { phone: "617-555-4321", address: "321 S 2nd St" });contacts.get("Jessie"); // {phone: "213-555-1234", address: "123 N 1st Ave"}contacts.delete("Raymond"); // falsecontacts.delete("Jessie"); // trueconsole.log(contacts.size); // 1

Map-ähnliche Browser-APIs

Map-ähnliche Objekte im Browser (oder "mapähnliche Objekte") sindWeb API-Schnittstellen, die sich in vielerlei Hinsicht wie eineMap verhalten.

Genau wie beiMap können Einträge in der gleichen Reihenfolge iteriert werden, in der sie dem Objekt hinzugefügt wurden.Map-ähnliche Objekte undMap haben auch Eigenschaften und Methoden, die denselben Namen und dasselbe Verhalten haben.Im Gegensatz zuMap erlauben sie jedoch nur spezifische vordefinierte Typen für die Schlüssel und Werte jedes Eintrags.

Die erlaubten Typen sind in der Spezifikations-IDL-Definition festgelegt.Zum Beispiel istRTCStatsReport ein mapähnliches Objekt, das Zeichenfolgen für Schlüssel und Objekte für Werte verwenden muss.Dies ist in der untenstehenden Spezifikations-IDL definiert:

webidl
interface RTCStatsReport {  readonly maplike<DOMString, object>;};

Map-ähnliche Objekte sind entweder schreibgeschützt oder schreib-lesbar (siehe dasreadonly Schlüsselwort in der obigen IDL).

Die Methoden und Eigenschaften haben dasselbe Verhalten wie die entsprechenden Entitäten inMap, außer der Einschränkung der Typen der Schlüssel und Werte.

Folgende sind Beispiele für schreibgeschützte mapähnliche Browser-Objekte:

Konstruktor

Map()

Erstellt ein neuesMap-Objekt.

Statische Eigenschaften

Map[Symbol.species]

Die Konstrukturfunktion, die verwendet wird, um abgeleitete Objekte zu erstellen.

Statische Methoden

Map.groupBy()

Gruppiert die Elemente eines gegebenen Iterables, indem die von einer bereitgestellten Rückruffunktion zurückgegebenen Werte verwendet werden. Die endgültig zurückgegebeneMap verwendet die eindeutigen Werte der Testfunktion als Schlüssel, die verwendet werden können, um das Array der Elemente in jeder Gruppe zu erhalten.

Instanzeigenschaften

Diese Eigenschaften sind aufMap.prototype definiert und werden von allenMap-Instanzen geteilt.

Map.prototype.constructor

Die Konstrukturfunktion, die das Instanzobjekt erstellt hat. FürMap-Instanzen ist der Anfangswert derMap-Konstruktor.

Map.prototype.size

Gibt die Anzahl der Schlüssel/Wert-Paare imMap-Objekt zurück.

Map.prototype[Symbol.toStringTag]

Der Anfangswert der[Symbol.toStringTag]-Eigenschaft ist der String"Map". Diese Eigenschaft wird inObject.prototype.toString() verwendet.

Instanzmethoden

Map.prototype.clear()

Entfernt alle Schlüssel-Wert-Paare aus demMap-Objekt.

Map.prototype.delete()

Entfernt den durch den Schlüssel angegebenen Eintrag aus dieserMap.

Map.prototype.entries()

Gibt ein neues Iterator-Objekt zurück, das ein Zwei-Element-Array von[key, value] für jedes Element imMap-Objekt in Einfügungsreihenfolge enthält.

Map.prototype.forEach()

RuftcallbackFn einmal für jedes imMap-Objekt vorhandene Schlüssel-Wert-Paar in Einfügungsreihenfolge auf. Wird einthisArg-Parameter anforEach übergeben, wird dieser alsthis-Wert für jeden Rückruf verwendet.

Map.prototype.get()

Gibt den Wert zurück, der dem Schlüssel in dieserMap entspricht, oderundefined, wenn es keinen gibt.

Map.prototype.getOrInsert()

Gibt den Wert zurück, der dem angegebenen Schlüssel in dieserMap entspricht. Wenn der Schlüssel nicht vorhanden ist, wird ein neuer Eintrag mit dem Schlüssel und einem gegebenen Standardwert eingefügt, und der eingefügte Wert wird zurückgegeben.

Map.prototype.getOrInsertComputed()

Gibt den Wert zurück, der dem angegebenen Schlüssel in dieserMap entspricht. Wenn der Schlüssel nicht vorhanden ist, wird ein neuer Eintrag mit dem Schlüssel und einem Standardwert eingefügt, der von einem gegebenen Rückruf berechnet wird, und der eingefügte Wert wird zurückgegeben.

Map.prototype.has()

Gibt einen booleschen Wert zurück, der angibt, ob ein Eintrag mit dem angegebenen Schlüssel in dieserMap existiert oder nicht.

Map.prototype.keys()

Gibt ein neues Iterator-Objekt zurück, das die Schlüssel für jedes Element imMap-Objekt in Einfügungsreihenfolge enthält.

Map.prototype.set()

Fügt einen neuen Eintrag mit einem angegebenen Schlüssel und Wert zu dieserMap hinzu oder aktualisiert einen vorhandenen Eintrag, wenn der Schlüssel bereits existiert.

Map.prototype.values()

Gibt ein neues Iterator-Objekt zurück, das die Werte für jedes Element imMap-Objekt in Einfügungsreihenfolge enthält.

Map.prototype[Symbol.iterator]()

Gibt ein neues Iterator-Objekt zurück, das ein Zwei-Element-Array von[key, value] für jedes Element imMap-Objekt in Einfügungsreihenfolge enthält.

Beispiele

Verwendung des Map-Objekts

js
const myMap = new Map();const keyString = "a string";const keyObj = {};const keyFunc = () => {};// setting the valuesmyMap.set(keyString, "value associated with 'a string'");myMap.set(keyObj, "value associated with keyObj");myMap.set(keyFunc, "value associated with keyFunc");console.log(myMap.size); // 3// getting the valuesconsole.log(myMap.get(keyString)); // "value associated with 'a string'"console.log(myMap.get(keyObj)); // "value associated with keyObj"console.log(myMap.get(keyFunc)); // "value associated with keyFunc"console.log(myMap.get("a string")); // "value associated with 'a string'", because keyString === 'a string'console.log(myMap.get({})); // undefined, because keyObj !== {}console.log(myMap.get(() => {})); // undefined, because keyFunc !== () => {}

Verwendung von NaN als Map-Schlüssel

NaN kann auch als Schlüssel verwendet werden. Obwohl jedeNaN nicht gleich sich selbst ist (NaN !== NaN ist wahr), funktioniert das folgende Beispiel, weilNaNs ununterscheidbar voneinander sind:

js
const myMap = new Map();myMap.set(NaN, "not a number");myMap.get(NaN);// "not a number"const otherNaN = Number("foo");myMap.get(otherNaN);// "not a number"

Iteration der Map mit for...of

Maps können mit einerfor...of-Schleife durchlaufen werden:

js
const myMap = new Map();myMap.set(0, "zero");myMap.set(1, "one");for (const [key, value] of myMap) {  console.log(`${key} = ${value}`);}// 0 = zero// 1 = onefor (const key of myMap.keys()) {  console.log(key);}// 0// 1for (const value of myMap.values()) {  console.log(value);}// zero// onefor (const [key, value] of myMap.entries()) {  console.log(`${key} = ${value}`);}// 0 = zero// 1 = one

Iteration der Map mit forEach()

Maps können mit derforEach()-Methode durchlaufen werden:

js
myMap.forEach((value, key) => {  console.log(`${key} = ${value}`);});// 0 = zero// 1 = one

Beziehung zu Array-Objekten

js
const kvArray = [  ["key1", "value1"],  ["key2", "value2"],];// Use the regular Map constructor to transform a 2D key-value Array into a mapconst myMap = new Map(kvArray);console.log(myMap.get("key1")); // "value1"// Use Array.from() to transform a map into a 2D key-value Arrayconsole.log(Array.from(myMap)); // Will show you exactly the same Array as kvArray// A succinct way to do the same, using the spread syntaxconsole.log([...myMap]);// Or use the keys() or values() iterators, and convert them to an arrayconsole.log(Array.from(myMap.keys())); // ["key1", "key2"]

Klonen und Zusammenführen von Maps

WieArrays könnenMaps geklont werden:

js
const original = new Map([[1, "one"]]);const clone = new Map(original);console.log(clone.get(1)); // oneconsole.log(original === clone); // false (useful for shallow comparison)

Hinweis:Beachten Sie, dassdie Daten selbst nicht geklont werden. Mit anderen Worten, es ist nur eineflache Kopie derMap.

Maps können zusammengeführt werden, wobei die Einzigartigkeit der Schlüssel erhalten bleibt:

js
const first = new Map([  [1, "one"],  [2, "two"],  [3, "three"],]);const second = new Map([  [1, "uno"],  [2, "dos"],]);// Merge two maps. The last repeated key wins.// Spread syntax essentially converts a Map to an Arrayconst merged = new Map([...first, ...second]);console.log(merged.get(1)); // unoconsole.log(merged.get(2)); // dosconsole.log(merged.get(3)); // three

Maps können auch mit Arrays zusammengeführt werden:

js
const first = new Map([  [1, "one"],  [2, "two"],  [3, "three"],]);const second = new Map([  [1, "uno"],  [2, "dos"],]);// Merge maps with an array. The last repeated key wins.const merged = new Map([...first, ...second, [1, "un"]]);console.log(merged.get(1)); // unconsole.log(merged.get(2)); // dosconsole.log(merged.get(3)); // three

Spezifikationen

Specification
ECMAScript® 2026 Language Specification
# sec-map-objects

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

[8]ページ先頭

©2009-2025 Movatter.jp