JavaScript-Karten

Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen

Eine Map enthält Schlüssel-Wert-Paare, wobei die Schlüssel einen beliebigen Datentyp haben können.

Eine Map merkt sich die ursprüngliche Einfügereihenfolge der Schlüssel.

Grundlegende Kartenmethoden

new Map()

Erstellt eine neue Karte

set()

Legt den Wert für einen Schlüssel in einer Map fest

get()

Ruft den Wert für einen Schlüssel in einer Map ab

delete()

Entfernt ein durch den Schlüssel angegebenes Map-Element

has()

Gibt true zurück, wenn ein Schlüssel in einer Map vorhanden ist

forEach()

Ruft eine Funktion für jedes Schlüssel/Wert-Paar in einer Map auf

entries()

Gibt einen Iterator mit den [Schlüssel, Wert]-Paaren in einer Map zurück

size

Gibt die Anzahl der Elemente in einer Map zurück

So erstellen Sie eine Karte

Sie können eine JavaScript-Karte erstellen, indem Sie:

  • Übergabe eines Arrays an new Map()

  • Erstellen Sie eine Karte und verwenden Sie Map.set()

Die new Map()-Methode

Sie können eine Map erstellen, indem Sie ein Array an den Konstruktor new Map() übergeben:

Beispiel

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Creating a Map from an Array:</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

document.getElementById("demo").innerHTML = fruits.get("apples");
</script>

</body>
</html>

Die set()-Methode

Sie können Elemente zu einer Karte mit der Methode set() hinzufügen:

Beispiel

// Create a Map
const fruits = new Map();

// Set Map Values
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.set():</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map();

// Set Map Values
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);

document.getElementById("demo").innerHTML = fruits.get("apples");
</script>

</body>
</html>

Die Methode set() kann auch zum Ändern bestehender Map-Werte verwendet werden:

Beispiel

fruits.set("apples", 200);

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.set():</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

fruits.set("apples", 200);

document.getElementById("demo").innerHTML = fruits.get("apples");
</script>

</body>
</html>

Die get()-Methode

Die Methode get() ruft den Wert eines Schlüssels in einer Map ab:

Beispiel

fruits.get("apples");    // Returns 500

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.get():</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

document.getElementById("demo").innerHTML = fruits.get("apples");
</script>

</body>
</html>

Die size-Eigenschaft

Die Eigenschaft size gibt die Anzahl der Elemente in einer Map zurück:

Beispiel

fruits.size;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Using Map.size:</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

document.getElementById("demo").innerHTML = fruits.size;
</script>

</body>
</html>

Die delete()-Methode

Die Methode delete() entfernt ein Map-Element:

Beispiel

fruits.delete("apples");

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Deleting Map elements:</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

// Delete an Element
fruits.delete("apples");

document.getElementById("demo").innerHTML = fruits.size;
</script>

</body>
</html>

Die has()-Methode

Die Methode has() gibt true zurück, wenn ein Schlüssel in einer Map vorhanden ist:

Beispiel

fruits.has("apples");

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Using Map.has():</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

document.getElementById("demo").innerHTML = fruits.has("apples");
</script>

</body>
</html>

Versuche dies:

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Using Map.has():</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

// Delete an Element
fruits.delete("apples");

document.getElementById("demo").innerHTML = fruits.has("apples");
</script>

</body>
</html>

JavaScript-Objekte vs. Karten

Unterschiede zwischen JavaScript-Objekten und Maps:

Objekt

Iterierbar: Nicht direkt iterierbar

Größe: Verfügt nicht über eine Größeneigenschaft

Schlüsseltypen: Schlüssel müssen Zeichenfolgen (oder Symbole) sein.

Schlüsselreihenfolge:Die Schlüssel sind nicht richtig angeordnet

Standardeinstellungen:Verfügen über Standardschlüssel

Karte

Iterierbar: Direkt iterierbar

Größe:Verfügt über eine Größeneigenschaft

Schlüsseltypen:Schlüssel können jeden Datentyp haben

Schlüsselreihenfolge:Schlüssel werden nach Einfügung sortiert

Standardeinstellungen: Keine Standardschlüssel vorhanden

Die forEach()-Methode

Die Methode forEach() ruft eine Funktion für jedes Schlüssel/Wert-Paar in einer Map auf:

Beispiel

// List all entries
let text = "";
fruits.forEach (function(value, key) {
  text += key + ' = ' + value;
})

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.forEach():</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

let text = "";
fruits.forEach (function(value, key) {
  text += key + ' = ' + value + "<br>"
})

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Die Methode entries()

Die Methode entries() gibt ein Iteratorobjekt mit dem [Schlüssel, Werte] in einer Map zurück:

Beispiel

// List all entries
let text = "";
for (const x of fruits.entries()) {
  text += x;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.entries():</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

let text = "";
for (const x of fruits.entries()) {
  text += x + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Browser-Unterstützung

JavaScript-Karten werden in allen Browsern außer Internet Explorer unterstützt:

Chrome Edge Firefox Safari Opera