Map - JavaScript | MDN

Seitenleiste umschalten

Farbschema

Systemeinstellung
Hell
Dunkel

Deutsch

Sprache merken Mehr erfahren

Map

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Das Map-Objekt hält Schlüssel-Wert-Paare und merkt sich die ursprüngliche Einfügereihenfolge der Schlüssel. Jeder Wert (sowohl Objekte als auch primitive Werte) kann sowohl als Schlüssel als auch als Wert verwendet werden.

In diesem Artikel

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

map.set("a", 97);

console.log(map.get("a"));
// Expected output: 97

console.log(map.size);
// Expected output: 3

map.delete("b");

console.log(map.size);
// Expected output: 2

Beschreibung

Map-Objekte sind Sammlungen von Schlüssel-Wert-Paaren. Ein Schlüssel in der Map kann nur einmal vorkommen; er ist einzigartig in der Sammlung der Map. Ein Map-Objekt wird durch Schlüssel-Wert-Paare iteriert — eine for...of Schleife gibt ein Array mit zwei Elementen [key, value] für jede Iteration zurück. Die Iteration erfolgt in Einfügereihenfolge, was der Reihenfolge entspricht, in der jedes Schlüssel-Wert-Paar erstmals mittels der set()-Methode in die Karte eingefügt wurde (das heißt, es gab keinen Schlüssel mit demselben Wert, als set() aufgerufen wurde).

Die Spezifikation erfordert, dass Maps so implementiert werden, dass sie im Durchschnitt Zugriffszeiten bieten, die sublinear zur Anzahl der Elemente in der Sammlung sind. Daher könnte sie intern als Hash-Tabelle (mit O(1) Suchzeit), Suchbaum (mit O(log(N)) Suchzeit) oder einer anderen Datenstruktur dargestellt werden, solange die Komplexität besser als O(N) ist.

Schlüsselgleichheit

Die Gleichheit der Werte basiert auf dem SameValueZero-Algorithmus. (Früher wurde SameValue verwendet, das 0 und -0 als unterschiedlich behandelte. Prüfen Sie die Browser-Kompatibilität.) Das bedeutet, dass NaN als gleich NaN angesehen wird (obwohl NaN !== NaN) und alle anderen Werte als gleich gemäß den Semantiken des === Operators betrachtet werden. Bei Objektschlüsseln basiert die Gleichheit auf der Objektidentität. Sie werden durch Referenz verglichen, nicht durch Wert. Siehe Verwendung des Map-Objekts für Beispiele.

Objekte vs. Maps

Object ist ähnlich wie Map — beide erlauben das Setzen von Schlüsseln zu Werten, das Abrufen dieser Werte, das Löschen von Schlüsseln und das Erkennen, ob etwas unter einem Schlüssel gespeichert ist. Aus diesem Grund (und da es keine eingebauten Alternativen gab) wurde Object historisch als Map verwendet.

Es gibt jedoch wichtige Unterschiede, die Map in einigen Fällen bevorzugt machen:

Map Object Zufällige Schlüssel Sicherheit Schlüsseltypen Schlüsselreihenfolge

Größe

Iteration Leistung Serialisierung und Parsing

Eine Map enthält standardmäßig keine Schlüssel. Sie enthält nur das, was explizit hineingesteckt wird.	Ein Object hat einen Prototyp, daher enthält es Standardschlüssel, die mit Ihren eigenen Schlüsseln kollidieren könnten, wenn Sie nicht vorsichtig sind. Hinweis: Dies kann umgangen werden, indem Object.create(null) verwendet wird, aber das wird selten gemacht.
Eine Map ist sicher für die Verwendung mit benutzerdefinierten Schlüsseln und Werten.	Das Setzen von benutzerdefinierten Schlüssel-Wert-Paaren auf einem Object kann einem Angreifer erlauben, den Prototyp des Objekts zu überschreiben, was zu Objektinjektionsangriffen oder Prototypverschmutzungsangriffen führen kann. Wie das Problem der zufälligen Schlüssel kann dies auch durch die Verwendung eines Objekts mit null-Prototypen abgemildert werden.
Die Schlüssel einer Map können beliebige Werte sein (einschließlich Funktionen, Objekte oder beliebige Primitive).	Die Schlüssel eines Object müssen entweder ein String oder ein Symbol sein.
Die Schlüssel in Map sind in einer geradlinigen Weise angeordnet: Ein Map-Objekt iteriert Einträge, Schlüssel und Werte in der Reihenfolge der Eingabeneinfügung.	Obwohl die Schlüssel eines gewöhnlichen Object jetzt in Ordnung gebracht werden, war dies nicht immer der Fall, und die Reihenfolge 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. Beachten Sie jedoch, dass kein einziger Mechanismus alle Eigenschaften eines Objekts iteriert; die verschiedenen Mechanismen beinhalten jeweils unterschiedliche Teilmengen von Eigenschaften. (for-in schließt nur aufzählbare Eigenschaften mit String-Schlüssel ein; Object.keys schließt nur eigene, aufzählbare, mit String-Schlüssen versehene Eigenschaften ein; Object.getOwnPropertyNames schließt eigene, mit String-Schlüssen versehene Eigenschaften ein, auch wenn sie nicht aufzählbar sind; Object.getOwnPropertySymbols tut dasselbe nur für mit Symbol-Schlüsseln versehene Eigenschaften usw.)
Die Anzahl der Elemente in einer Map lässt sich einfach über ihre size-Eigenschaft abrufen.	Die Bestimmung der Anzahl der Elemente in einem Object ist umständlicher und weniger effizient. Eine gängige Methode ist die Nutzung der length des von Object.keys() zurückgegebenen Arrays.
Eine Map ist iterierbar, so dass sie direkt iteriert werden kann.	Object implementiert kein Iterationsprotokoll und ist daher standardmäßig nicht direkt mit der JavaScript for...of Schleife iterierbar. Hinweis: Ein Objekt kann das Iterationsprotokoll implementieren, oder Sie können mit Object.keys oder Object.entries ein iterierbares für ein Objekt erhalten. Die for...in Anweisung erlaubt Ihnen, über die auflistbaren Eigenschaften eines Objekts zu iterieren.
Bessere Leistung in Szenarien mit häufigem Hinzufügen und Entfernen von Schlüssel-Wert-Paaren.	Nicht für häufiges Hinzufügen und Entfernen von Schlüssel-Wert-Paaren optimiert.
Keine native Unterstützung für Serialisierung oder Parsing. (Aber Sie können Ihre eigene Serialisierung und Parsing-Unterstützung für Map erstellen, indem Sie JSON.stringify() mit seinem Replacer Argument und JSON.parse() mit seinem Reviver Argument verwenden. Siehe die Stack Overflow Frage How do you JSON.stringify an ES6 Map?).	Nativer Support für die Serialisierung von Object zu JSON mit JSON.stringify(). Nativer Support für das Parsing von JSON zu Object mit JSON.parse().

Setzen von Objekt-Eigenschaften

Das Setzen von Objekt-Eigenschaften funktioniert auch bei Map-Objekten und kann erhebliche Verwirrung verursachen.

Daher scheint es auf diese 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, eine Eigenschaft zu setzen, interagiert nicht mit der Map-Datenstruktur. Es 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"); // false
wrongMap.delete("bla"); // false
console.log(wrongMap); // Map { bla: 'blaa', bla2: 'blaaa2' }

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

js
const contacts = new Map();
contacts.set("Jessie", { phone: "213-555-1234", address: "123 N 1st Ave" });
contacts.has("Jessie"); // true
contacts.get("Hilary"); // undefined
contacts.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"); // false
contacts.delete("Jessie"); // true
console.log(contacts.size); // 1

Kartenähnliche Browser-APIs

Browser Map-ähnliche Objekte (oder "kartenähnliche Objekte") sind Web-API-Schnittstellen, die sich in vielerlei Hinsicht wie eine Map verhalten.

Genau wie Map können die Einträge in derselben Reihenfolge iteriert werden, in der sie dem Objekt hinzugefügt wurden. Map-ähnliche Objekte und Map haben auch Eigenschaften und Methoden, die denselben Namen und das gleiche Verhalten teilen. Anders als bei Map erlauben sie jedoch nur bestimmte vordefinierte Typen für die Schlüssel und Werte jedes Eintrags.

Die erlaubten Typen sind in der Spezifikation-IDL-Definition festgelegt. Beispielsweise ist RTCStatsReport ein Map-ähnliches Objekt, das Strings für Schlüssel und Objekte für Werte verwenden muss. Dies ist in der Spezifikation-IDL unten definiert:

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

Map-ähnliche Objekte sind entweder schreibgeschützt oder schreibbar (siehe das readonly Schlüsselwort in der obigen IDL).

Schreibgeschützte Map-ähnliche Objekte haben die Eigenschaft size und die Methoden: entries(), forEach(), get(), has(), keys(), values(), und Symbol.iterator().
Schreibbare Map-ähnliche Objekte haben zusätzlich die Methoden: clear(), delete(), und set().

Die Methoden und Eigenschaften haben das gleiche Verhalten wie die gleichwertigen Entitäten in Map, abgesehen von der Einschränkung der Typen der Schlüssel und Werte.

Die folgenden sind Beispiele für schreibgeschützte Map-ähnliche Browser-Objekte:

Konstruktor

Map()

Erstellt ein neues Map-Objekt.

Statische Eigenschaften

Map[Symbol.species]

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

Statische Methoden

Map.groupBy()

Gruppiert die Elemente eines gegebenen Iterables unter Verwendung der von einer bereitgestellten Callback-Funktion zurückgegebenen Werte. Die endgültige zurückgegebene Map verwendet die eindeutigen Werte der Testfunktion als Schlüssel, die verwendet werden können, um das Array von Elementen in jeder Gruppe zu erhalten.

Instanz-Eigenschaften

Diese Eigenschaften sind auf Map.prototype definiert und werden von allen Map-Instanzen geteilt.

Map.prototype.constructor

Die Konstruktionsfunktion, die das Instanzobjekt erstellt hat. Bei Map-Instanzen ist der Anfangswert der Map-Konstruktor.

Map.prototype.size

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

Map.prototype[Symbol.toStringTag]

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

Instanz-Methoden

Map.prototype.clear()

Entfernt alle Schlüssel-Wert-Paare aus dem Map-Objekt.

Map.prototype.delete()

Entfernt den durch den Schlüssel angegebenen Eintrag aus dieser Map.

Map.prototype.entries()

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

Map.prototype.forEach()

Ruft callbackFn einmal für jedes im Map-Objekt vorhandene Schlüssel-Wert-Paar in Einfügereihenfolge auf. Wenn ein thisArg-Parameter an forEach übergeben wird, wird er als diese this-Wert für jeden Callback verwendet.

Map.prototype.get()

Gibt den Wert zurück, der dem Schlüssel in dieser Map entspricht, oder undefined, wenn keiner vorhanden ist.

Map.prototype.getOrInsert()

Gibt den Wert zurück, der dem angegebenen Schlüssel in dieser Map 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 zurückgegeben.

Map.prototype.getOrInsertComputed()

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

Map.prototype.has()

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

Map.prototype.keys()

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

Map.prototype.set()

Fügt dieser Map einen neuen Eintrag mit einem angegebenen Schlüssel und Wert 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 im Map-Objekt in Einfügereihenfolge enthält.

Map.prototype[Symbol.iterator]()

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

Beispiele

Verwendung des Map-Objekts

js
const myMap = new Map();

const keyString = "a string";
const keyObj = {};
const keyFunc = () => {};

// setting the values
myMap.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 values
console.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 ebenfalls als Schlüssel verwendet werden. Obwohl jedes NaN nicht gleich sich selbst ist (NaN !== NaN ist wahr), funktioniert das folgende Beispiel, da NaNs nicht voneinander zu unterscheiden 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 einer for...of Schleife iteriert 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 = one

for (const key of myMap.keys()) {
  console.log(key);
}
// 0
// 1

for (const value of myMap.values()) {
  console.log(value);
}
// zero
// one

for (const [key, value] of myMap.entries()) {
  console.log(`${key} = ${value}`);
}
// 0 = zero
// 1 = one

Iteration der Map mit forEach()

Maps können mit der forEach()-Methode iteriert 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 map
const myMap = new Map(kvArray);

console.log(myMap.get("key1")); // "value1"

// Use Array.from() to transform a map into a 2D key-value Array
console.log(Array.from(myMap)); // Will show you exactly the same Array as kvArray

// A succinct way to do the same, using the spread syntax
console.log([...myMap]);

// Or use the keys() or values() iterators, and convert them to an array
console.log(Array.from(myMap.keys())); // ["key1", "key2"]

Klonen und Zusammenführen von Maps

Genauso wie Arrays können Maps geklont werden:

js
const original = new Map([[1, "one"]]);

const clone = new Map(original);

console.log(clone.get(1)); // one
console.log(original === clone); // false (useful for shallow comparison)

Hinweis: Beachten Sie, dass die Daten selbst nicht geklont werden. Mit anderen Worten, es handelt sich nur um eine flache Kopie der Map.

Maps können zusammengeführt werden, wobei die Eindeutigkeit der Schlüssel beibehalten wird:

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 Array
const merged = new Map([...first, ...second]);

console.log(merged.get(1)); // uno
console.log(merged.get(2)); // dos
console.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)); // un
console.log(merged.get(2)); // dos
console.log(merged.get(3)); // three

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

Eingebaute Standardobjekte
Map
Konstruktor
1. Map()
Statische Methoden
1. groupBy()
Statische Eigenschaften
1. [Symbol.species]
Instanzmethoden
Instanzeigenschaften
1. size
Vererbung
Object/Function
Statische Methoden
Statische Eigenschaften
Instanzmethoden
Instanzeigenschaften
1. __proto__
2. constructor

Map