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.

Eine Karte verfügt über eine Eigenschaft, die die Größe der Karte darstellt.

Kartenmethoden

new Map()

Erstellt ein neues Kartenobjekt

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

clear()

Entfernt alle Elemente aus einer Karte

delete()

Entfernt ein durch einen Schlüssel angegebenes Map-Element

has()

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

forEach()

Ruft einen Rückruf für jedes Schlüssel/Wert-Paar in einer Map auf

entries()

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

keys()

Gibt ein Iteratorobjekt mit den Schlüsseln in einer Map zurück

values()

Gibt ein Iteratorobjekt der Werte in einer Map zurück

size

Gibt die Anzahl der Map-Elemente 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()

new Map()

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>

Map.set()

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", 500);

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>

Map.get()

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>

Map.size

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>

Map.delete()

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>

Map.clear()

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

Beispiel

fruits.clear();

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Clearing a Map:</p>

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

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

// Clear the Map
fruits.clear();

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

</body>
</html>

Map.has()

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>

Karten sind Objekte

typeof gibt Objekt zurück:

Beispiel

// Returns object:
typeof fruits;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Map typeof:</p>

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

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

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

</body>
</html>

instanceof Map gibt true zurück:

Beispiel

// Returns true:
fruits instanceof Map;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Map instanceof:</p>

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

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

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

</body>
</html>

JavaScript-Objekte vs. Karten

Unterschiede zwischen JavaScript-Objekten und Maps:

Not directly iterable

Direkt iterierbar

Do not have a size property

Besitzen Sie eine Größeneigenschaft

Keys must be Strings (or Symbols)

Schlüssel können einen beliebigen Datentyp haben

Keys are not well ordered

Die Schlüssel werden nach Einfügung sortiert

Have default keys

Keine Standardschlüssel vorhanden

Map.forEach()

Die Methode forEach() ruft einen Rückruf 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>

Map.entries()

Die Methode entries() gibt ein Iteratorobjekt mit den [Schlüsseln,Werten] 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>

Map.keys()

Die Methode keys() gibt ein Iteratorobjekt mit den Schlüsseln in einer Map zurück:

Beispiel

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.keys():</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.keys()) {
  text += x + "<br>";
}

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

</body>
</html>

Map.values()

Die Methode values() gibt ein Iteratorobjekt mit den Werten in einer Map zurück:

Beispiel

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.values():</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.values()) {
  text += x + "<br>";
}

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

</body>
</html>

Sie können die Methode values() verwenden, um die Werte in einer Karte zu summieren:

Beispiel

// Sum all values
let total = 0;
for (const x of fruits.values()) {
  total += x;
}

Probieren Sie es selbst aus →

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

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

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

let total = 0;
for (const x of fruits.values()) {
  total += x;
}

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

</body>
</html>

Objekte als Schlüssel

Die Fähigkeit, Objekte als Schlüssel zu verwenden, ist eine wichtige Kartenfunktion.

Beispiel

// Create Objects
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};

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

// Add new Elements to the Map
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>Being able to use objects as keys is an important Map feature:</p>

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

<script>
// Create Objects
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};

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

// Add the Objects to the Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);

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

</body>
</html>

Denken Sie daran: Der Schlüssel ist ein Objekt (Äpfel), keine Zeichenfolge („Äpfel“):

Beispiel

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>

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

<script>
// Create Objects
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};

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

// Add Elements to the Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);

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

</body>
</html>

Browser-Unterstützung

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

Chrome Edge Firefox Safari Opera