Assoziative Arrays in JavaScript erstellen

1. Erstellen Sie ein assoziatives Array in JavaScript mit dem Objekt Map
2. Erstellen ein assoziatives Array in JavaScript mit generischen Objekten

Die meisten Programmiersprachen haben eine Datenstruktur, mit der Sie Daten in einem Schlüsselwertformat speichern können. Python verfügt beispielsweise über Wörterbücher, mit denen Sie eine Zeichenfolge mit einem Wert oder einer Liste von Werten verknüpfen können.

JavaScript hat das Map-Objekt, das dasselbe erreicht, bedenken Sie auch, dass diese Funktionalität nicht mit älteren Browsern kompatibel ist. In der Vergangenheit wurden einfache Objekte verwendet, um assoziative Arrays in JavaScript zu erstellen, da sie technisch dasselbe tun.

Andererseits kann die Verwendung generischer Objekte für diesen Zweck manchmal ziemlich verwirrend werden. Auch die Map-Methode hat ihre Probleme, besonders wenn Sie neu in der Sprache und an gewisse Konventionen gewöhnt sind.

Erstellen Sie ein assoziatives Array in JavaScript mit dem Objekt Map

Der erste und richtigste Weg, assoziative Arrays in JavaScript zu handhaben, besteht darin, ein Map-Objekt zu erstellen. Diese Methode hat mehrere Vorteile gegenüber normalen Objekten, wie zum Beispiel die Tatsache, dass Schlüssel nicht auf Strings beschränkt sind – sie können Funktionen, andere Objekte und so ziemlich jedes andere Primitiv sein.

Zudem sind Map-Objekte von Anfang an iterierbar. Zugegeben, Sie können die Eigenschaften eines Objekts mit einer for in-Schleife durchlaufen, aber das ist nicht immer eine elegante Lösung.

So können Sie ein assoziatives Array in JavaScript erstellen und füllen:

const myMap = new Map();

myMap.set('firstItem', 1);
myMap.set('secondItem', 2);
myMap.set('thirdItem', 'third');

console.log([...myMap]);

Ausgabe:

[["firstItem", 1], ["secondItem", 2], ["thirdItem", "third"]]

Um Schlüssel/Wert-Einträge zu erstellen, können Sie die Methode set() verwenden. Nebenbei bemerkt, die im obigen Code verwendete [...myMap]-Syntax funktioniert, weil Map eine @@iterator-Methode unter der Haube implementiert. Das unterscheidet es von normalen Objekten, da Sie eine explizite for in-Schleife erstellen müssen.

Wenn Sie einen bestimmten Wert abrufen möchten, können Sie die Methode get() verwenden:

const myMap = new Map();

myMap.set('firstItem', 1);
myMap.set('secondItem', 2);
myMap.set('thirdItem', 'third');

console.log(myMap.get('firstItem'));

Ausgabe:

1

Andere nützliche Methoden sind has(), das überprüft, ob Ihr Map-Objekt einen bestimmten Schlüssel hat, und delete(), mit dem Sie Schlüssel aus dem Objekt entfernen können.

Vermeiden Sie die Klammerschreibweise beim Umgang mit Map-Objekten in JavaScript

Wir alle wissen, dass JavaScript voller seltsamer Verhaltensweisen ist, und Map-Objekte sind leider nicht anders.

Wenn Sie etwas Erfahrung mit Python haben, könnten Sie versucht sein, etwas wie myMap["firstItem"] = 1 zu verwenden, um ein Map-Schlüssel/Wert-Paar festzulegen. Es ist auch ein gültiger Ansatz beim Umgang mit generischen Objekten.

Die gute Nachricht ist, dass dies keine Fehler verursacht und zunächst wie beabsichtigt zu funktionieren scheint. Hier ist das obige Beispiel, das mit der Klammernotation umgestaltet wurde:

const myMap = new Map();

myMap['firstItem'] = 1;
myMap['secondItem'] = 2;
myMap['thirdItem'] = 'third';

console.log(myMap);

Ausgabe:

[object Map] {
  firstItem: 1,
  secondItem: 2,
  thirdItem: "third"
}

Die schlechte Nachricht ist, dass dies nicht mehr dieselbe Art von Datenstruktur ist. Stattdessen wurde dies in ein generisches Objekt umgewandelt. Aus diesem Grund funktioniert es nicht mehr, wenn Sie über die Karte iterieren.

Außerdem liefert die Methode has() auch nicht die gewünschten Ergebnisse, wie Sie im folgenden Code sehen können:

const myMap = new Map();

myMap['firstItem'] = 1;
myMap['secondItem'] = 2;
myMap['thirdItem'] = 'third';

console.log(myMap.has('firstItem'));

Ausgabe:

false

Abschließend sollten Sie bei Map die Klammerschreibweise vermeiden; Andernfalls funktioniert Ihr Code möglicherweise nicht wie beabsichtigt.

Erstellen ein assoziatives Array in JavaScript mit generischen Objekten

Bis vor einigen Jahren war die oben beschriebene Map-Methode nicht mit den meisten Browsern kompatibel, daher verwendeten Programmierer stattdessen generische Objekte. Theoretisch spricht nichts gegen diesen Ansatz, aber Sie sollten versuchen, in den meisten Fällen Map zu verwenden, wenn die Abwärtskompatibilität kein Problem darstellt.

So können Sie mithilfe von Objekten ein assoziatives Array in JavaScript erstellen:

const myMap = {};

myMap.firstItem = 1;
myMap.secondItem = 2;
myMap.thirdItem = 'third';

console.log(myMap);

Ausgabe:

{ firstItem: 1, secondItem: 2, thirdItem: "third"}

Hier haben wir die Punktnotation verwendet, um unserem Objekt Eigenschaften hinzuzufügen. Wenn Sie Zeichenketten als Schlüssel verwenden möchten, funktioniert diese Methode nicht wie beabsichtigt, wenn Ihre Zeichenketten Leerzeichen enthalten.

Für diese Fälle können Sie die Klammermethode wie unten beschrieben verwenden:

const myMap = {};

myMap['first item'] = 1;
myMap['second item'] = 2;
myMap['third item'] = 'third';

console.log(myMap);

Ausgabe:

{ first item: 1, second item: 2, third item: "third"}

JavaScript akzeptiert beide Methoden, was wiederum in einigen Fällen äußerst verwirrend sein kann. Wenn Sie wirklich Strings als Schlüssel in Ihren assoziativen Arrays verwenden möchten, dann ist die Klammernotation der richtige Weg, da die Punktnotation sehr restriktiv ist.

Andererseits lässt die Klammernotation JavaScript-Objekte viel mehr wie klassische Wörterbücher aussehen, was sie nicht sind. Daher ist es immer eine viel bessere Idee, die Methode Map zu verwenden, wann immer Sie die Möglichkeit haben.