JavaScript-Map-Methode

new Map() Methode

Man kann ein Array an die new Map() Der Konstruktor wird verwendet, um eine Map zu erstellen:

Instanz

// Eine Map erstellen
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

Probieren Sie es selbst aus

Map.get()

Man kann get() Die Methode gibt den Wert des Schlüssels in der Map zurück:

Instanz

fruits.get("apples");

Probieren Sie es selbst aus

Map.set()

Man kann set() Die Methode fügt ein Element zur Map hinzu:

Instanz

// Eine Map erstellen
const fruits = new Map();
// Map-Werte setzen
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);

Probieren Sie es selbst aus

set() Die Methode kann auch verwendet werden, um bestehende Map-Werte zu ändern:

Instanz

fruits.set("apples", 500);

Probieren Sie es selbst aus

Map.size

size Das Attribut gibt die Anzahl der Elemente in der Map zurück:

Instanz

fruits.size;

Probieren Sie es selbst aus

Map.delete()

delete() Die Methode entfernt ein Element aus der Map:

Instanz

fruits.delete("apples");

Probieren Sie es selbst aus

Map.clear()

clear() Die Methode entfernt alle Elemente aus der Map:

Instanz

fruits.clear();

Probieren Sie es selbst aus

Map.has()

Wenn ein Schlüssel in der Map existiert,has() Die Methode gibt true zurück:

Instanz

fruits.has("apples");

Probieren Sie es selbst aus

Versuchen Sie folgenden Code:

fruits.delete("apples");
fruits.has("apples");

Probieren Sie es selbst aus

Map.forEach()

forEach() Die Methode ruft die Callback-Funktion für jedes Schlüssel-Wert-Paar der Map auf:

Instanz

// alle Einträge auflisten
let text = "";
fruits.forEach(function(value, key) {
  text += key + ' = ' + value;
});

Probieren Sie es selbst aus

Map.entries()

entries() Die Methode gibt einen Iterator zurück, der alle [key, value] den richtigen Iterator-Objekt:

Instanz

// alle Einträge auflisten
let text = "";
for (const x of fruits.entries()) {
  text += x;
}

Probieren Sie es selbst aus

Map.keys()

keys() Die Methode gibt einen Iterator-Objekt zurück, das alle Schlüssel der Map enthält:

Instanz

// alle Schlüssel auflisten
let text = "";
for (const x of fruits.keys()) {
  text += x;
}

Probieren Sie es selbst aus

Map.values()}

values() Das Methode gibt einen Iterator-Objekt zurück, das alle Werte in der Map enthält:

Instanz

// Alle Werte auflisten
let text = "";
for (const x of fruits.values()) {
  text += x;
}

Probieren Sie es selbst aus

Man kann values() Das Methode berechnet die Summe der Werte in der Map:

Instanz

// Summe aller Werte berechnen
let total = 0;
for (const x of fruits.values()) {
  total += x;
}

Probieren Sie es selbst aus

Objekte als Schlüssel

Hinweis:Die Fähigkeit, Objekte als Schlüssel zu verwenden, ist eine wichtige Eigenschaft von Map.

Instanz

// Objekte erstellen
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};
// Eine Map erstellen
const fruits = new Map();
// Neues Element in Map hinzufügen
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);

Probieren Sie es selbst aus

Hinweis:Der Schlüssel ist ein Objekt (apples), nicht ein String ("apples"):

Instanz

fruits.get("apples"); // Liefert undefined zurück

Probieren Sie es selbst aus

JavaScript Map.groupBy()

ES2024 hat zu JavaScript hinzugefügt Map.groupBy() Methode.

Map.groupBy() Das Methode gruppiert die Elemente des Objekts basierend auf dem vom Callback-Funktion zurückgegebenen String-Wert.

Map.groupBy() Das Methode ändert das ursprüngliche Objekt nicht.

Instanz

// Ein Array erstellen
const fruits = [
  {name: "apples", quantity: 300},
  {name: "bananas", quantity: 500},
  {name: "oranges", quantity: 200},
  {name: "kiwi", quantity: 150}
];
// Callback-Funktion zur Gruppierung
function myCallback({ quantity }) {
  return quantity > 200 ? "ok" : "low";
}
// Nach Anzahl gruppieren
const result = Map.groupBy(fruits, myCallback);

Probieren Sie es selbst aus

Browser-Unterstützung

Map.groupBy() ist eine ES2024-Funktion.

Ab März 2024 unterstützen alle neuen Browser diese Funktion:

Unterschied zwischen Object.groupBy() und Map.groupBy()

Object.groupBy() und Map.groupBy() Der Unterschied liegt in:

Object.groupBy() Gruppieren Sie Elemente in JavaScript-Objekte ein.

Map.groupBy() Gruppieren Sie Elemente in Map-Objekte ein.

Vollständiges Map-Referenzhandbuch

Für eine vollständige Referenz besuchen Sie bitte unsere:JavaScript Map-Referenzhandbuch.

Dieses Handbuch enthält alle Beschreibungen und Beispiele der Map-Attribute und -Methoden.