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.
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 sowohl als Schlüssel als auch als Wert verwendet werden.
Probieren Sie es aus
Beschreibung
Map
Objekte sind Sammlungen von Schlüssel-Wert-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-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 der Einfügereihenfolge, die der Reihenfolge entspricht, in der jedes Schlüssel-Wert-Paar zuerst in die Map durch die set()
Methode 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 Zugriffzeiten im Durchschnitt sublinear zur Anzahl der Elemente in der Sammlung bieten". Daher könnte es intern als eine Hashtabelle (mit O(1) Zugriff), ein Suchbaum (mit O(log(N)) Zugriff) oder jede andere 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. Überprüfen Sie die Browser-Kompatibilität.) Dies bedeutet, dass NaN
als gleich zu NaN
betrachtet wird (auch wenn NaN !== NaN
) und alle anderen Werte entsprechend den semantiken des ===
Operators als gleich gelten.
Objekte vs. Maps
Object
ist ähnlich wie Map
— beide ermöglichen es Ihnen, Schlüssel auf Werte zu setzen, diese Werte abzurufen, Schlüssel zu löschen und zu erkennen, ob etwas an einem Schlüssel gespeichert ist. Aus diesem Grund (und weil es keine integrierten Alternativen gab), wurde Object
historisch als Map
verwendet.
Jedoch gibt es wichtige Unterschiede, die Map
in einigen Fällen bevorzugt machen:
Map | Objekt | |
---|---|---|
Zufällige Schlüssel |
Eine Map enthält standardmäßig keine Schlüssel. Sie enthält nur das, was explizit hineingelegt wurde.
|
Ein
Hinweis: Dies kann umgangen werden, indem |
Sicherheit |
Eine Map ist sicher in der Verwendung mit benutzerdefinierten Schlüsseln und Werten.
|
Das Setzen von benutzerdefinierten Schlüssel-Wert-Paaren auf einem |
Schlüsseltypen |
Eine Map 's Schlüssel können beliebige Werte sein (einschließlich Funktionen, Objekte oder irgendein primitiver Wert).
|
Die Schlüssel eines Objekts müssen entweder ein String oder ein Symbol sein.
|
Schlüsselreihenfolge |
Die Schlüssel in |
Obwohl die Schlüssel eines gewöhnlichen
Die Ordnung wurde zuerst nur für eigene Eigenschaften in ECMAScript 2015 definiert; ECMAScript 2020 definiert die Ordnung auch für geerbte Eigenschaften. Aber beachten Sie, dass kein einziges Mechanismus
alle Eigenschaften eines Objekts durchläuft; die verschiedenen Mechanismen umfassen jeweils unterschiedliche Untergruppen von Eigenschaften.
( |
Größe |
Die Anzahl der Elemente in einer Map ist leicht aus ihrer Größe Eigenschaft abzurufen.
|
Das Bestimmen der Anzahl der Elemente in einem Objekt ist umständlicher und weniger effizient. Ein üblicher Weg dies zu tun ist durch die Länge des Arrays, das von Object.keys() zurückgegeben wird.
|
Iteration |
Eine Map ist ein iterable, sodass sie direkt iteriert werden kann.
|
Hinweis:
|
Leistung |
Bietet bessere Leistung in Szenarien mit häufigen Hinzufügungen und Entfernungen von Schlüssel-Wert-Paaren. |
Nicht optimiert für häufige Hinzufügungen und Entfernungen von Schlüssel-Wert-Paaren. |
Serialisierung und Parsen |
Keine native Unterstützung für Serialisierung oder Parsen.
(Aber Sie können Ihre eigene Unterstützung für Serialisierung und Parsen für |
Native Unterstützung für die Serialisierung von
Native Unterstützung für das Parsen von JSON zu |
Setzen von Objekteigenschaften
Das Setzen von Objekteigenschaften funktioniert auch für Map-Objekte und kann erhebliche Verwirrung stiften.
Daher scheint es 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 Eigenschaftszuteilung interagiert nicht mit der Datenstruktur von Map. Es nutzt die Funktionalität eines generischen Objekts. Der Wert von 'bla' wird nicht in der Map für Abfragen gespeichert. Andere Operationen auf 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 ist 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 vielerlei Hinsicht wie eine Map
verhalten.
Ähnlich wie Map
können Einträge in der gleichen Reihenfolge durchlaufen werden, in der sie zum Objekt hinzugefügt wurden.
Map
-ähnliche Objekte und Map
haben auch Eigenschaften und Methoden, die denselben Namen und dasselbe Verhalten haben.
Im Gegensatz zu 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.
Zum Beispiel muss RTCStatsReport
, ein Map
-ähnliches Objekt, Zeichenfolgen für Schlüssel und Objekte für Werte verwenden.
Dies ist in der Spezifikation IDL unten definiert:
interface RTCStatsReport {
readonly maplike<DOMString, object>;
};
Map
-ähnliche Objekte sind entweder schreibgeschützt oder schreibbar (siehe das readonly
Schlüsselwort im 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
, mit Ausnahme der Einschränkung der Typen für die 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 unter Verwendung der Werte, die von einer bereitgestellten Callback-Funktion zurückgegeben werden. Die endgültig zurückgegebene
Map
verwendet die einzigartigen Werte aus 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 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.
Instanz-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 Array mit zwei Mitgliedern
[key, value]
für jedes Element imMap
Objekt in Einfügereihenfolge enthält. Map.prototype.forEach()
-
Ruft
callbackFn
einmal für jedes Schlüssel-Wert-Paar imMap
Objekt in Einfügereihenfolge auf. Wenn einthisArg
Parameter anforEach
übergeben wird, wird er alsthis
Wert für jeden Callback 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 Boolean zurück, der anzeigt, ob ein Wert mit dem übergebenen Schlüssel im
Map
Objekt verknüpft ist 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 Array mit zwei Mitgliedern
[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 () {}
Verwendung von NaN als Map-Schlüssel
NaN
kann auch als Schlüssel verwendet werden. Obwohl jedes NaN
nicht gleich 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 von 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 von 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 Mischen 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 zusammengeführt werden und wahren dabei die Eindeutigkeit der Schlüssel:
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 Language Specification # sec-map-objects |
Browser-Kompatibilität
BCD tables only load in the browser