Einführung in Karten in JavaScript

Karten sind eine neue Datenstruktur in JavaScript, mit der Sie Sammlungen von Schlüssel-Wert-Paaren erstellen können. Sie wurden mit ES6 (auch ES2015 genannt) zusammen mit Sets in JavaScript eingeführt. Ein Kartenobjekt kann sowohl Objekte als auch Primitive als Schlüssel und Werte speichern.

Karten ähneln Objekten, die auch zum Speichern von Schlüsselwertdaten verwendet werden. Der Hauptunterschied besteht jedoch darin, dass Zuordnungsschlüssel jeden Typs haben können und nicht nur auf Zeichenfolgen und Symbole beschränkt sind. Im Gegensatz zu Objekten ist es auch einfacher, die Größe der Karte zu ermitteln.

Eine Karte initialisieren

Genau wie Mengen können Sie Map() verwenden Konstruktor, um eine leere Map zu erstellen:

const items = new Map(); 

Sie können dem Konstruktor auch ein Iterable (z. B. ein Array) übergeben, um die Map zu initialisieren:

const items = new Map([['🦅', 'Eagle'], ['🐶', 'Dog']]); 

Kartenmethoden

Die wichtigsten Methoden und Eigenschaften sind set() , get() , has() , size , delete() , und clear() . Hier ist ein einfaches Beispiel einer Karte, die die Verwendung dieser Methoden zeigt:

const items = new Map();

// add items
items.set('🐶', 'Dog');
items.set('🦅', 'Eagle');
items.set('🚄', 'Train');
items.set(45, 'Number');
items.set(true, 'Boolean');

// get item
items.get(45); // Number
items.get('🐶'); // Dog
items.get('🐺'); // undefined

// check if key exists
items.has('🚄'); // true
items.has('🐺'); // false

// get items count
items.size; // 5

// delete item
items.delete('🦅'); // true
items.delete('🦅'); // false - already removed

// delete all items
items.clear();

Wie Sätze sind auch Zuordnungsschlüssel eindeutig. set() anrufen mehr als einmal mit demselben Schlüssel werden nicht mehrere Schlüssel-Wert-Paare hinzugefügt. Stattdessen wird der Wertteil durch den neuesten Wert ersetzt:

const animals = new Map();

animals.set('🐺', 'Wolf');
animals.set('🐺', 'Wolf Face');

console.log(animals); // Map(1) {"🐺" => "Wolf Face"}

Objekte in der Karte

Da Maps es uns ermöglichen, jeden Datentyp als Schlüssel oder Wert zu speichern, können wir komplexe Objekte wie Objektliterale, Arrays und sogar Funktionen speichern:

const props = {
    browser: 'Chrome',
    os: 'Ubuntu 19.04'
};

const hamburger = () => '🍔'; 

const things = new Map();

things.set('birds', ['🦉', '🦅']);
things.set('user', {name: 'John Doe', planet: 'Earth'});
things.set(props, 59);
things.set(hamburger, 'What is the food?');

things.get(props); // 59
things.get(hamburger); // What is the food?

Karten durchlaufen

Im Gegensatz zu Objekten werden die Schlüssel-Wert-Paare beim Iterieren über die Karte in derselben Reihenfolge zurückgegeben, in der sie eingefügt wurden. Wir können for...of verwenden Schleife, um alle Schlüssel-Wert-Paare zu durchlaufen:

const foods = new Map([
    ['🍌', 'Banana'],
    ['🍕', 'Pizza'],
    ['🥒', 'Cucumber'],
    ['🌽', 'Maize'],
]);

for (const [key, value] of foods) {
    console.log(`${key}: ${value}`);
}

// 🍌: Banana
// 🍕: Pizza
// 🥒: Cucumber
// 🌽: Maize

Ebenso können wir auch den eingebauten forEach() verwenden Methode zum Durchlaufen aller Elemente:

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

Schlüssel und Werte

Karten liefern keys() und values() Methoden, um nur auf die Schlüssel und Werte zuzugreifen. Diese Methoden geben ein neues iterierbares Objekt zurück, das auch zum Iterieren über alle Schlüssel oder Werte verwendet werden kann:

for (const key of foods.keys()) {
    console.log(key);
}

for (const value of foods.values()) {
    console.log(value);
}

Die Map Objekt hat auch den entries() Methode, die ein Iterable für die Einträge [key, value] zurückgibt . Diese Methode wird standardmäßig in for...of verwendet Schleife. Hier ist ein Beispiel:

for (const [key, value] of foods.entries()) {
    console.log(`${key}: ${value}`);
}

Ähnlich wie bei Mengen können Sie die next() aufrufen -Methode auf dem Iterable, das von entries() zurückgegeben wird Methode, um die Schlüssel-Wert-Paare einzeln zu durchlaufen:

const entries = foods.entries();

console.log(entries.next()); // {value: ["🍌", "Banana"], done: false}

Schlussfolgerung

Eine Map ist eine Sammlung von Schlüssel-Wert-Paaren, die es uns ermöglicht, sowohl Objekte als auch Primitive als Schlüssel und Werte zu speichern. Im Gegensatz zu Objekten können Zuordnungsschlüssel jeden Typs haben:Objekte, Arrays, Funktionen oder sogar eine andere Zuordnung. Ähnlich wie bei Sets sind die Schlüssel einzigartig; Sie können nur einmal auf der gesamten Karte vorkommen. Wenn wir über ein Map-Objekt iterieren, werden die Schlüssel-Wert-Paare in derselben Reihenfolge zurückgegeben, in der sie in die Map eingefügt wurden.

Wenn Sie mehr erfahren möchten, sehen Sie sich unseren Leitfaden zu Sets in JavaScript an.