Assoziative Arrays

Namen anstelle eines numerischen Index

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.

Die Methoden der regulären Javascript-Arrays werden keine zuverlässigen 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.

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.

const Buch = [];
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);            // leer

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 der Definition const Buch = [] vom Typ Array – so jedenfalls lautet die Antwort auf Array.isArray(Buch).

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

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

Stattdessen kann die Objekt-Notation benutzt werden (vielleicht sogar als JSON?):

const 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 (es sei denn, wir halten JSON im Auge). 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 über assoziative Arrays

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

Aber mit for in und forEach hat uns ECMAScript weitere Methoden für das elegantes Durchlaufen von Objekten und Arrays mitgebracht, die heute von allen modernen Browsern (auch IE) 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 = [
  { 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] + " ";
    });
});

In dieser Notation greifen dann die komfortablen Array-Methoden wie filter, some und every und map.