Map
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
Das Map
-Objekt speichert Schlüssel-Werte-Paare und merkt sich die ursprüngliche Einfügereihenfolge der Schlüssel. Jeder Wert (sowohl Objekte als auch primitive Werte) kann entweder als Schlüssel oder als Wert verwendet werden.
Probieren Sie es aus
const map1 = new Map();
map1.set("a", 1);
map1.set("b", 2);
map1.set("c", 3);
console.log(map1.get("a"));
// Expected output: 1
map1.set("a", 97);
console.log(map1.get("a"));
// Expected output: 97
console.log(map1.size);
// Expected output: 3
map1.delete("b");
console.log(map1.size);
// Expected output: 2
Beschreibung
Map
-Objekte sind Sammlungen von Schlüssel-Werte-Paaren. Ein Schlüssel in der Map
darf nur einmal auftreten; er ist einzigartig in der Sammlung der Map
. Ein Map
-Objekt wird durch Schlüssel-Werte-Paare iteriert — eine for...of
Schleife gibt ein 2-Elemente-Array von [key, value]
für jede Iteration zurück. Die Iteration erfolgt in Einfügereihenfolge, was der Reihenfolge entspricht, in der jedes Schlüssel-Werte-Paar erstmals mit der set()
-Methode in die Map eingefügt wurde (das heißt, es gab keinen Schlüssel mit demselben Wert bereits in der Map als set()
aufgerufen wurde).
Die Spezifikation verlangt, dass Maps implementiert werden, "die im Durchschnitt Zugriffszeiten bieten, die sublinear zur Anzahl der Elemente in der Sammlung sind". Daher könnte es intern als Hashtabelle (mit O(1) Suche), Suchbaum (mit O(log(N)) Suche) oder jede andere Datenstruktur dargestellt werden, solange die Komplexität besser als O(N) ist.
Schlüsselgleichheit
Die Wertgleichheit 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 dasselbe wie NaN
betrachtet wird (auch wenn NaN !== NaN
), und alle anderen Werte als gleich erachtet werden, entsprechend der Semantik des ===
Operators.
Objekte vs. Maps
Object
ist ähnlich wie Map
—beide erlauben es Ihnen, Schlüssel auf Werte zu setzen, diese Werte abzurufen, Schlüssel zu löschen und zu erkennen, ob etwas unter einem Schlüssel gespeichert ist. Aus diesem Grund (und weil es keine eingebauten Alternativen gab) wurde Object
historisch als Map
verwendet.
Es gibt jedoch wesentliche Unterschiede, die Map
in einigen Fällen bevorzugt machen:
Map | Object | |
---|---|---|
Unbeabsichtigte Schlüssel |
Eine Map enthält standardmäßig keine Schlüssel. Sie enthält nur das, was explizit hineingetan wird.
|
Ein
Hinweis: Dies kann umgangen werden, indem
|
Sicherheit |
Eine Map ist sicher in der Verwendung mit benutzerdefinierten Schlüsseln und Werten.
|
Das Setzen benutzerdefinierter Schlüssel-Werte-Paare auf ein |
Schlüsseltypen |
Die Schlüssel einer Map können jeden Wert annehmen (einschließlich Funktionen, Objekte oder beliebige primitive Werte).
|
Die Schlüssel eines Object müssen entweder ein
String oder ein Symbol sein.
|
Schlüsselreihenfolge |
Die Schlüssel in |
Obwohl die Schlüssel eines gewöhnlichen
Die Reihenfolge wurde zuerst nur für eigene Eigenschaften im 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 umfassen jeweils unterschiedliche Teilmengen von Eigenschaften.
( |
Größe |
Die Anzahl der Einträge in einer Map kann leicht über ihre Größe -Eigenschaft abgerufen werden.
|
Das Bestimmen der Anzahl der Einträge in einem Object ist umständlicher und weniger effizient. Eine übliche Möglichkeit, dies zu tun, besteht darin, die Länge des von Object.keys() zurückgegebenen Arrays zu verwenden.
|
Iteration |
Eine Map ist ein
iterable, sodass sie direkt iteriert werden kann.
|
Hinweis:
|
Leistung |
Bietet bessere Leistung in Szenarien, die häufige Hinzufügungen und Löschungen von Schlüssel-Werte-Paaren umfassen. |
Nicht optimiert für häufige Hinzufügungen und Löschungen von Schlüssel-Werte-Paaren. |
Serialisierung und Parsen |
Keine native Unterstützung für Serialisierung oder Parsen.
(Aber Sie können Ihre eigene Unterstützung für das Serialisieren und Parsen von
|
Native Unterstützung für die Serialisierung von
Native Unterstützung für das Parsen von JSON zu |
Festlegen von Objekteigenschaften
Das Festlegen von Objekteigenschaften funktioniert auch für Map-Objekte und kann zu erheblichen Verwirrungen führen.
Daher scheint dies auf diese Weise zu funktionieren:
const wrongMap = new Map();
wrongMap["bla"] = "blaa";
wrongMap["bla2"] = "blaaa2";
console.log(wrongMap); // Map { bla: 'blaa', bla2: 'blaaa2' }
Aber diese Art der Einstellung einer Eigenschaft interagiert nicht mit der Map-Datenstruktur. Es nutzt die Funktion des generischen Objekts. Der Wert von 'bla' wird nicht für Abfragen in der Map gespeichert. Andere Operationen an den Daten schlagen fehl:
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 Methode set(key, value)
.
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
Map-ähnliche Browser-APIs
Browser Map
-ähnliche Objekte (oder "map-ähnliche Objekte") sind Web-API-Schnittstellen, die sich in vielen Aspekten wie eine Map
verhalten.
Genau wie Map
können Einträge in derselben Reihenfolge, in der sie dem Objekt hinzugefügt wurden, iteriert werden. Map
-ähnliche Objekte und Map
haben auch Eigenschaften und Methoden, die denselben Namen und dasselbe Verhalten teilen. Anders als Map
erlauben sie jedoch nur bestimmte vordefinierte Typen für die Schlüssel und Werte jedes Eintrags.
Die erlaubten Typen sind in der Spezifikations-IDL-Definition festgelegt. Zum Beispiel ist RTCStatsReport
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:
interface RTCStatsReport {
readonly maplike<DOMString, object>;
};
Map
-ähnliche Objekte sind entweder schreibgeschützt oder leseschreibbar (siehe das Schlüsselwort readonly
in der obigen IDL).
- Schreibgeschützte
Map
-ähnliche Objekte haben die Eigenschaftsize
und die Methoden:entries()
,forEach()
,get()
,has()
,keys()
,values()
und[Symbol.iterator]()
. - Schreibbare
Map
-ähnliche Objekte haben zusätzlich die Methoden:clear()
,delete()
undset()
.
Die Methoden und Eigenschaften haben dasselbe Verhalten wie die entsprechenden Entitäten in Map
, abgesehen von den Einschränkungen bezüglich der Typen der Schlüssel und Werte.
Die folgenden sind Beispiele für schreibgeschützte Map
-ähnliche Browserobjekte:
Konstruktor
Map()
-
Erstellt ein neues
Map
-Objekt.
Statische Eigenschaften
Map[Symbol.species]
-
Die Konstruktorfunktion, die verwendet wird, um abgeleitete Objekte zu erstellen.
Statische Methoden
Map.groupBy()
-
Gruppiert die Elemente eines gegebenen Iterables nach den von einer bereitgestellten Callback-Funktion zurückgegebenen Werten. Die endgültige zurückgegebene
Map
verwendet die einzigartigen Werte der Testfunktion als Schlüssel, die verwendet werden können, um das Array der Elemente in jeder Gruppe abzurufen.
Instanzen-Eigenschaften
Diese Eigenschaften sind auf Map.prototype
definiert und werden von allen Map
-Instanzen geteilt.
Map.prototype.constructor
-
Die Konstruktorfunktion, die das Instanzobjekt erstellt hat. Für
Map
-Instanzen ist der Anfangswert derMap
-Konstruktor. Map.prototype.size
-
Gibt die Anzahl der Schlüssel/Werte-Paare im
Map
-Objekt zurück. Map.prototype[Symbol.toStringTag]
-
Der Anfangswert der
[Symbol.toStringTag]
Eigenschaft ist die Zeichenfolge"Map"
. Diese Eigenschaft wird inObject.prototype.toString()
verwendet.
Instanzen-Methoden
Map.prototype.clear()
-
Entfernt alle Schlüssel-Werte-Paare aus dem
Map
-Objekt. Map.prototype.delete()
-
Gibt
true
zurück, wenn ein Element imMap
-Objekt existierte und entfernt wurde, oderfalse
, wenn das Element nicht existiert.map.has(key)
wird danachfalse
zurückgeben. Map.prototype.entries()
-
Gibt ein neues Iterator-Objekt zurück, das ein zweigliedriges Array von
[key, value]
für jedes Element imMap
-Objekt in Einfügereihenfolge enthält. Map.prototype.forEach()
-
Ruft
callbackFn
einmal für jedes Schlüssel-Werte-Paar imMap
-Objekt in Einfügereihenfolge auf. Wenn einthisArg
-Parameter anforEach
übergeben wird, wird er alsthis
-Wert für jeden Rückruf verwendet. Map.prototype.get()
-
Gibt den Wert zurück, der dem übergebenen Schlüssel zugeordnet ist, oder
undefined
, wenn keiner vorhanden ist. Map.prototype.has()
-
Gibt einen booleschen Wert zurück, der angibt, ob ein Wert dem übergebenen Schlüssel im
Map
-Objekt zugeordnet wurde 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()
-
Legt den Wert für den übergebenen Schlüssel im
Map
-Objekt fest. Gibt dasMap
-Objekt zurück. 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 zweigliedriges Array von
[key, value]
für jedes Element imMap
-Objekt in Einfügereihenfolge enthält.
Beispiele
Verwendung des Map-Objekts
const myMap = new Map();
const keyString = "a string";
const keyObj = {};
const keyFunc = function () {};
// 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(function () {})); // undefined, because keyFunc !== function () {}
Verwenden von NaN als Map-Schlüssel
NaN
kann auch als Schlüssel verwendet werden. Auch wenn jedes NaN
ungleich sich selbst ist (NaN !== NaN
ist wahr), funktioniert das folgende Beispiel, weil NaN
s ununterscheidbar voneinander sind:
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"
Iterieren einer Map mit for...of
Maps können mit einer for...of
Schleife iteriert werden:
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
Iterieren einer Map mit forEach()
Maps können mit der
forEach()
-Methode iteriert werden:
myMap.forEach((value, key) => {
console.log(`${key} = ${value}`);
});
// 0 = zero
// 1 = one
Beziehung zu Array-Objekten
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
Genau wie Array
s können Map
s geklont werden:
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.
Maps können unter Beibehaltung der Schlüssel-Eindeutigkeit zusammengeführt werden:
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:
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
Spezifikationen
Specification |
---|
ECMAScript® 2025 Language Specification # sec-map-objects |
Browser-Kompatibilität
BCD tables only load in the browser