Map

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 Schlssel-Wert-Paaren. Ein Schlssel in der Map kann nur einmal vorkommen; er ist einzigartig in der Map-Sammlung. Ein Map Objekt wird durch Schlssel-Wert-Paare iteriert eine for...of Schleife gibt ein Zwei-Eintrge-Array [key, value] fr jede Iteration zurck. Die Iteration erfolgt in Einfgereihenfolge, was der Reihenfolge entspricht, in der jedes Schlssel-Wert-Paar erstmals durch die set() Methode in die Map eingefgt wurde (das heit, es gab keinen Schlssel mit demselben Wert bereits in der Map, als set() aufgerufen wurde).

Die Spezifikation erfordert, dass Maps "durchschnittlich Zugriffszeiten bieten, die unterlinear bei der Anzahl der Elemente in der Sammlung liegen". Daher kann sie intern als Hashtabelle (mit O(1) Suche), Suchbaum (mit O(log(N)) Suche) oder jede andere Datenstruktur dargestellt werden, solange die Komplexitt besser als O(N) ist.

Schlsselgleichheit

Die Gleichheit von Werten basiert auf dem SameValueZero Algorithmus. (Frher wurde SameValue verwendet, das 0 und -0 als unterschiedlich behandelte. Prfen Sie die Browser-Kompatibilitt.) Dies bedeutet, dass NaN als identisch mit NaN angesehen wird (obwohl NaN !== NaN) und alle anderen Werte gem den Semantiken des === Operators gleichwertig sind. Auch bei Objektschlsseln beruht die Gleichheit auf der Objektidentitt. Sie werden durch Referenz und nicht durch den Wert verglichen. Siehe Verwendung des Map-Objekts fr Beispiele.

Objekte vs. Maps

Object ist hnlich wie Mapbeide ermglichen es Ihnen, Schlssel auf Werte zu setzen, diese Werte abzurufen, Schlssel zu lschen und zu erkennen, ob etwas unter einem Schlssel gespeichert ist. Aus diesem Grund (und weil es keine integrierten Alternativen gab) wurde Object historisch als Map verwendet.

Es gibt jedoch wichtige Unterschiede, die Map in manchen Fllen vorzuziehen machen:

Setzen von Objekteigenschaften

Das Setzen von Objekteigenschaften funktioniert auch fr Map-Objekte und kann zu erheblicher Verwirrung fhren.

Daher scheint es auf folgende Weise zu funktionieren:

const wrongMap = new Map();
wrongMap["bla"] = "blaa";
wrongMap["bla2"] = "blaaa2";

console.log(wrongMap); // Map { bla: 'blaa', bla2: 'blaaa2' }

Aber diese Art des Setzens einer Eigenschaft interagiert nicht mit der Map-Datenstruktur. Es nutzt die Funktion des generischen Objekts. Der Wert von 'bla' wird nicht in der Map fr Abfragen gespeichert. Andere Operationen auf den Daten scheitern:

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.

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

Browser-APIs, die Map-hnlich sind

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

Genau wie eine Map knnen Eintrge in der gleichen Reihenfolge iteriert werden, in der sie dem Objekt hinzugefgt wurden. Map-hnliche Objekte und Map haben auch Eigenschaften und Methoden, die denselben Namen und dieselbe Funktionalitt haben. Im Gegensatz zu Map erlauben sie jedoch nur bestimmte vordefinierte Typen fr die Schlssel und Werte eines jeden Eintrags.

Die erlaubten Typen sind in der Spezifikations-IDL-Definition festgelegt. Zum Beispiel ist RTCStatsReport ein Map-hnliches Objekt, das zwingend Zeichenfolgen als Schlssel und Objekte als Werte verwenden muss. Dies wird in der folgenden Spezifikations-IDL definiert:

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

Map-hnliche Objekte sind entweder schreibgeschtzt oder les- und schreibbar (siehe das readonly Schlsselwort in der oben genannten IDL).

• Schreibgeschtzte Map-hnliche Objekte haben die Eigenschaft size, und die Methoden: entries(), forEach(), get(), has(), keys(), values(), und [Symbol.iterator]().
• Beschreibbare Map-hnliche Objekte haben zustzlich die Methoden: clear(), delete(), und set().

Die Methoden und Eigenschaften haben dasselbe Verhalten wie die entsprechenden Entitten in Map, mit Ausnahme der Einschrnkung fr die Typen der Schlssel und Werte.

Die folgenden sind Beispiele fr schreibgeschtzte Map-hnliche Browser-Objekte:

• AudioParamMap
• CSSFontFeatureValuesMap
• EventCounts
• KeyboardLayoutMap
• MIDIInputMap
• MIDIOutputMap
• RTCStatsReport

Konstruktor

Map()

Erzeugt 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 anhand der Werte, die von einer bereitgestellten Callback-Funktion zurckgegeben werden. Die endgltige zurckgegebene Map verwendet die einzigartigen Werte der Testfunktion als Schlssel, die verwendet werden knnen, um das Array von Elementen in jeder Gruppe zu erhalten.

Instanzeigenschaften

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

Map.prototype.constructor

Die Konstruktorfunktion, die das Instanzobjekt erstellt hat. Fr Map Instanzen ist der anfngliche Wert der Map Konstruktor.

Map.prototype.size

Gibt die Anzahl der Schlssel/Wert-Paare im Map Objekt zurck.

Map.prototype[Symbol.toStringTag]

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

Instanzmethoden

Map.prototype.clear()

Entfernt alle Schlssel-Wert-Paare aus dem Map Objekt.

Map.prototype.delete()

Entfernt den durch den Schlssel spezifizierten Eintrag aus dieser Map.

Map.prototype.entries()

Gibt ein neues Iterator-Objekt zurck, das ein Zweier-Array von [key, value] fr jedes Element im Map Objekt in Einfgereihenfolge enthlt.

Map.prototype.forEach()

Ruft callbackFn einmal fr jedes im Map Objekt vorhandene Schlssel-Wert-Paar in Einfgereihenfolge auf. Wenn ein thisArg Parameter an forEach bergeben wird, wird dieser als this Wert fr jeden Rckruf verwendet.

Map.prototype.get()

Gibt den zugehrigen Wert fr den Schlssel in dieser Map zurck oder undefined, wenn keiner vorhanden ist.

Map.prototype.getOrInsert()

Gibt den Wert zurck, der dem angegebenen Schlssel in dieser Map entspricht. Wenn der Schlssel nicht vorhanden ist, fgt er einen neuen Eintrag mit dem Schlssel und einem angegebenen Standardwert ein und gibt den eingefgten Wert zurck.

Map.prototype.getOrInsertComputed()

Gibt den Wert zurck, der dem angegebenen Schlssel in dieser Map entspricht. Wenn der Schlssel nicht vorhanden ist, fgt er einen neuen Eintrag mit dem Schlssel und einem aus einem bereitgestellten Rckruf berechneten Standardwert ein und gibt den eingefgten Wert zurck.

Map.prototype.has()

Gibt einen booleschen Wert zurck, der angibt, ob ein Eintrag mit dem angegebenen Schlssel in dieser Map existiert oder nicht.

Map.prototype.keys()

Gibt ein neues Iterator-Objekt zurck, das die Schlssel fr jedes Element im Map Objekt in Einfgereihenfolge enthlt.

Map.prototype.set()

Fgt einen neuen Eintrag mit einem bestimmten Schlssel und Wert zu dieser Map hinzu oder aktualisiert einen vorhandenen Eintrag, wenn der Schlssel bereits existiert.

Map.prototype.values()

Gibt ein neues Iterator-Objekt zurck, das die Werte fr jedes Element im Map Objekt in Einfgereihenfolge enthlt.

Map.prototype[Symbol.iterator]()

Gibt ein neues Iterator-Objekt zurck, das ein Zweier-Array von [key, value] fr jedes Element im Map Objekt in Einfgereihenfolge enthlt.

Beispiele

Verwendung des Map-Objekts

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-Schlssel

NaN kann auch als Schlssel verwendet werden. Obwohl jede NaN nicht gleich sich selbst ist (NaN !== NaN ist wahr), funktioniert das folgende Beispiel, weil NaNs nicht voneinander unterscheidbar 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 durch Map mit for...of

Maps knnen mit einer for...of Schleife durchlaufen 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 durch Map mit forEach()

Maps knnen mit der forEach() Methode durchlaufen 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 Zusammenfhren von Maps

Genau wie Arrays knnen Maps 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)

Maps knnen zusammengefhrt werden, wobei die Einzigartigkeit der Schlssel beibehalten wird:

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 knnen auch mit Arrays zusammengefhrt 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

Browser-Kompatibilitt

Siehe auch

• Polyfill fr Map in core-js
• es-shims Polyfill von Map
• Set
• WeakMap
• WeakSet