Eine Karte in JavaScript ist eine Sammlung von Schlüssel-Wert-Paaren, wobei Schlüssel von beliebigem Typ sein können. Die Reihenfolge des Einfügens bleibt erhalten, d. h. die Elemente werden in der Reihenfolge iteriert, in der sie hinzugefügt wurden.

Hauptmerkmale einer Karte;

1. Eindeutige Schlüssel: Jeder Schlüssel in einer Karte ist einzigartig.
2. Beliebiger Datentyp für Schlüssel: Im Gegensatz zu Objekten können Schlüssel jeden Datentyp haben, einschließlich Funktionen, Objekte oder jeden primitiven Typ.
3. Iterierbar: Sie können über die Schlüssel, Werte oder Einträge einer Map iterieren.

Grundlegende Operationen

Erstellen einer Karte

let funnyMap = new Map();

Elemente zu einer Karte hinzufügen

funnyMap.set('a', 1); // string key
funnyMap.set(2, 'two'); // number key
funnyMap.set(true, 'yes'); // boolean key
funnyMap.set({name: 'obj'}, 'object'); // object key

// Funny example
funnyMap.set('knock-knock', 'who’s there?');

Werte aus einer Karte abrufen

console.log(funnyMap.get('a')); // 1
console.log(funnyMap.get(2)); // two
console.log(funnyMap.get(true)); // yes

// Funny example
console.log(funnyMap.get('knock-knock')); // who’s there?

Suche nach einem Schlüssel

console.log(funnyMap.has('a')); // true
console.log(funnyMap.has(42)); // false

// Funny example
console.log(funnyMap.has('chicken')); // false (It crossed the road)

Ein Element entfernen

funnyMap.delete('a');
console.log(funnyMap.has('a')); // false

// Funny example
funnyMap.delete('knock-knock');
console.log(funnyMap.get('knock-knock')); // undefined (No one answered)

Ermitteln der Größe der Karte

console.log(funnyMap.size); // 3 after deletion

// Funny example
console.log(`The map has ${funnyMap.size} jokes left.`);

Löschen der Karte

funnyMap.clear();
console.log(funnyMap.size); // 0

// Funny example
console.log(`All jokes are cleared from the map.`);

Iterieren über eine Karte

Verwenden für...von

funnyMap.set('banana', 'yellow');
funnyMap.set('apple', 'red');
funnyMap.set('grape', 'purple');

// Iterating over keys
for (let key of funnyMap.keys()) {
    console.log(`Key: ${key}`);
}

// Iterating over values
for (let value of funnyMap.values()) {
    console.log(`Value: ${value}`);
}

// Iterating over entries
for (let [key, value] of funnyMap.entries()) {
    console.log(`Key: ${key}, Value: ${value}`);
}

// Funny example
funnyMap.set('dad joke', 'What do you call fake spaghetti? An impasta!');
for (let [key, value] of funnyMap.entries()) {
    console.log(`Here’s a ${key}: ${value}`);
}

Verwendung von forEach

funnyMap.forEach((value, key) => {
    console.log(`Key: ${key}, Value: ${value}`);
});

// Funny example
funnyMap.set('bad pun', 'I’m reading a book on anti-gravity. It’s impossible to put down!');
funnyMap.forEach((value, key) => {
    console.log(`Here’s a ${key}: ${value}`);
});

Praktische Anwendungen

Wortzählen (lustige Version)

Stellen Sie sich vor, Sie möchten zählen, wie oft bestimmte Wörter in einer Witzsammlung vorkommen:

let jokeText = "Why did the scarecrow win an award? Because he was outstanding in his field!";

// Splitting text into words
let words = jokeText.split(/\W /);

let wordCount = new Map();

words.forEach(word => {
    word = word.toLowerCase();
    if (wordCount.has(word)) {
        wordCount.set(word, wordCount.get(word)   1);
    } else {
        wordCount.set(word, 1);
    }
});

wordCount.forEach((count, word) => {
    console.log(`Word: ${word}, Count: ${count}`);
});

// Funny example
console.log('Word counts in our joke:');
wordCount.forEach((count, word) => {
    console.log(`"${word}": ${count} times`);
});

Zusammenfassung

Eine Karte in JavaScript ist eine vielseitige Datenstruktur, die Schlüssel-Wert-Paare jedes Datentyps enthalten kann, einfache Iterationsmethoden bereitstellt und die Reihenfolge der Elemente beibehält. Dies ist nützlich für Szenarien, in denen Sie eine flexiblere Schlüsselverwaltung als ein normales Objekt benötigen, z. B. zum Zählen von Wörtern in Witzen oder zum Speichern von Antworten auf verschiedene Rätsel.