Assoziative Arrays

Associative Arrays (Schlüssel oder Name statt Index) sind keine Arrays, sondern ein Hash oder Schlüssel - Wert - Paare

Assoziative Arrays benutzen Wörter statt des numerischen Index. Das macht den Code leichter lesbar und die Programmierung weniger fehleranfällig.

Assoziative Arrays fühlen sich an, als wären sie eine höher entwickelte Form des gewöhnlichen numerisch indexierten Arrays. Tatsächlich sind assoziative Arrays (auch Hash genannt) schlichte »Schlüssel:Wert«-Paare.

Namen anstelle eines numerischen Index

Javascript unterstützt keine assoziativen Array. Die Methoden der regulären Javascript-Arrays werden keine korrekten Ergebnisse liefern.

Ein assoziatives Array benutzt Schlüssel oder Namen anstelle eines numerischen Index, um die Elemente des Arrays anzuspechen. Ein verständlicher Schlüssel oder Name verbessert die Lesbarkeit des Scripts.

Während Javascript-Arrays bequeme Methoden und Eigenschaften mitbringen, sind assoziative Arrays in Javascript am Ende nichts weiter als Schlüssel:Wert-Paare.

Index vs. Schlüssel

Assoziative Arrays sind sinnvoll, wenn die Elemente des Arrays unterschiedliche Datentypen haben und wenn die Elemente durchsucht und sortiert werden sollen.

Grafik: Beispiel für Array mit Index / Array mit Schlüssel
Beispiel: Array mit Index, Array mit Schlüssel

In einem assoziativen Array wird der Index als Schlüssel oder key bezeichnet. Das Script wird durch assoziative Arrays besser lesbar und die Programmierung ist weniger fehleranfällig. Gleichzeitig ist der Umgang mit assoziativen Arrays aber umständlicher als das Handling von indexierten Arrays.

let Buch = new Array ();
Buch['titel'] = "Ab die Post";
Buch['isbn']  = "344254565X";
Buch['autor']  = "Pratchet";
Buch['pubdate']  = "15.8.2005";

console.log (Buch.length);     // gibt 0 aus
console.log(Buch['titel'] + ' von ' + Buch['autor'] + 
    ' isbn ' + Buch['isbn']);  // erzeugt die erwartete Antwort
console.log (Buch);            // wird nichts enthalten

Aber

[Log]  Buch.length 0
[Log]  Ab die Post von Pratchet isbn 344254565X
[Log]  Buch 

Tatsächlich hat die Notation buch['titel'] = "Ab die Post" kein Array-Element erzeugt, sondern eine Eigenschaft namens "titel" für das Objekt "Buch". Anstelle von Buch['titel'] könnte auch Buch.titel verwendet werden. Dennoch ist Buch dank des Konstruktors let Buch = new Array () vom Typ Array.

Anders als bei einem »ordentlich indexierten« Array kann der Array()-Konstruktor nicht benutzt werden, um einem assoziativen Array Elemente zuzuweisen.

let farben = new Array("rot", "grün", "blau");  // normales Array

Stattdessen kann die Objekt-Notation benutzt werden

let Buch = { 
	"titel" : "Ab die Post",
	"isbn" : "344254565X",
	"autor" : "Pratchet",
	"pubdate" : "15.8.2005"
}

Die geschweiften Klammern definieren ein unbenanntes Objekt ohne Klasse. Die Hochkommas um den Schlüssel sind optional. Nur wenn der Begriff Leerzeichen enthält, müssen Hochkommas um den Schlüsselbegriff gesetzt werden.

Javascript-Arrays lassen sich sogar aufmischen:

let spielkarte = [];
spielkarte [0] = "Neun";
spielkarte [1] = "Zehn";
spielkarte [2] = "As";
spielkarte ["Dame"] = "Dame";
spielkarte ["Bube"] = "Bube";   // Achtung: spielkarte.length ist 3!

Iteration durch assoziative Arrays

Auch wenn assoziative Array im Javascript-Code besser lesbar und das Ansprechen der einzelnen Elemente intuitiver ist: Ein richtiges Javascript-Array bringt viele bequeme Methoden mit, die bei einem assoziativen Array nicht benutzt werden können.

Mit for in und forEach hat uns ECMAScript 5 Methoden für ein elegantes Durchlaufen von Arrays mitgebracht, die heute von allen modernen Browsern (IE ab Version 9) unterstützt werden.

let key;
for (key in Buch) {
   console.log ("Schlüssel " + key + " mit Wert " + Buch[key]);
}

Array von Objekten sortieren

Sortiert ein Array von Objekten basierend auf einem Schlüssel (key) des Objekts anhand eines Parameters.

const obst = [
  {name:"Bananen", menge: 740},
  {name:"Äpfel", menge: -40},
  {name:"Birnen", menge: 20},
  {name:"Ananas", menge: 0.5},
  {name:"Pflaumen", menge: 0}
];

const sortBy = (key) => {
  return (a, b) => (a[key] > b[key]) ? 1 : ((b[key] > a[key]) ? -1 : 0);
};

obst.sort(sortBy("menge"));

Klappt soweit ganz gut, nur beim Sortieren nach Namen spielt die einfache Ternary-Abfrage nicht mit und versetzt die Äpfel ans Ende der Nahrungskette.

Aufgemischt für die Lesbarkeit

Auch wenn die Performance eine große Rolle für die Ladezeiten und Ausführung bei Webseiten spielt, werden die Datenstrukturen auf Webseiten kaum so groß wie bei Datenbankabfragen mit serverseitigen Anwendungen.

Dann machen Kompromisse zugunsten der Lesbarkeit Sinn.

let clothes = new Array (
  { name: "Mantel",   size: [44,42,40,38], price: 69 },
  { name: "Jeans",    size: [44,42,], price: 59 },
  { name: "Pullover", size: [42,40,38], price: 29 },
  { name: "Jacke",    size: [44,42,40], price: 28 }
);

clothes ist ein reguläres Array, seine Elemente sind Objekte. Also erbt clothes auch seine Methoden vom Array.prototype. Mit forEach kann Javascript auf jedes Element zugreifen.



clothes.forEach(function(val) {
  console.log(val);
  document.querySelector("#dress").innerHTML += 
    val.name + " " + 
    val.price + " gibt es in " + 
    val.size.length + " Größen: ";
    val.size.forEach(function(key, index){
        document.querySelector("#dress").innerHTML += val.size[index] + " ";
    });
});
EISBERG SCHOKO VANILLA fruchtig cremig süß 360 400 520 Assoziative Arrays Associative Array 0123Ab die Post3442545XPratchett15.8.2005IndexDatentitelisbnautorpubdateAb die Post3442545XPratchett15.8.2005key(Schlüssel)Datenlength = 4length = 0