Arrays fangen bei Null an (vielleicht)
Der ECMAScript-Standard definiert Arrays als Abbildungen von Indizes auf Werte. Javascript Arrays müssen nicht kontinuierlich sein – sie können sozusagen Löcher enthalten.
const arr = []; arr[0] = "Hund"; arr[3] = "Ratte";
Dieses Array hat Löcher: Es gibt keinen Wert auf dem Index 1 und keinen Wert auf dem Index 2.
Arrays mit Löchern oder Lücken werden auch als sparse Arrays (spärlich besetzt) bezeichnet, Arrays ohne Löcher als dense Arrays (dicht besiedelt). Dichte Arrays sind kontinuierlich und haben ein Element auf jedem Index.
Zugriff auf Arrays
Um mit den Werten eines Arrays zu arbeiten, müssen die Array-Elemente angesprochen werden und nicht das Array selbst. So gehts also nicht
const tiere = ['Hund', 'Katze', 'Maus', 'Ratte'];
if (tiere === 'Hund') {
…
}
sondern
if (tiere[0] === 'Hund') {
…
}
Aber das hier funktioniert bestens:
alert(tiere);
console.log (tiere); // Ausgabe: Hund,Katze,Maus,Ratte
Wie schon am Anfang erwähnt: Der Index muss nicht fortlaufend sein. Ein Array kann indirekt verlängert werden. Wird dem Array ein Element zugewiesen, dessen Index größer ist als die aktuelle Länge des Arrays, ändert sich die Länge des Arrays.
const farben = ["rot", "grün", "blau", "gelb", "grau"]; farben[100] = "schwarz"; console.log(typeof farben[50]) // Ausgabe: "undefined"; console.log(farben.length) // Ausgabe: 101
Javascript typeof ist ein Operator und fragt den Typ des Operanden ab.
Falls ein »Loch« am Ende des Array erforderlich ist, müssen zwei Kommas gesetzt werden. Ein einfaches Komma am Ende des literalen Arrays wird ignoriert.
let obst = ["Apfel", "Birne", ,];
Ist der Index im Array?
index in array prüft, ob der Index im Array vorkommt.
const myToys = ["Teddy", , "Angry Birds", "Pokemon"];
if (3 in myToys) {
console.log ("Element auf Index " + 3 + " gefunden: " + myToys[3]);
}
if (1 in myToys ) {
console.log ("Element auf " + 1 + " gefunden");
} else {
console.log ("Kein Element auf " + 1 + " gefunden");
}
Element auf 3 gefunden
Kein Element auf 1 gefunden
Ist das Element ein Array?
Array.isArray(obj) gibt true zurück, wenn obj ein Array ist und ist zuverlässiger als instanceof.
const trees = [
"Kokospalme",
"Ahornbaum",
[ "Blautanne", "Nordmanntanne", "Fichte"]
];
const lastElem = trees.pop();
console.log (Array.isArray(lastElem));
true
Alle modernen Browser, IE ab Version 11, Edge ab 14, Chrome ab 49, Safari ab 10.
length: Größe des Arrays
Die Größe des Arrays entwickelt sich automatisch durch die Anzahl der belegten Elemente. Bei numerischen Arrays findet die Eigenschaft length heraus, wieviele Elemente das Array enthält: array.length.
array.length ist also immer eins mehr als der höchste Index. Ein sicherer Weg, ein neues Element in ein Array einzubinden, ist
let farben = ["rot", "grün", "blau"]; farben[farben.length] = "gelb";
Der Index eines Javascript-Arrays kann theoretisch im Bereich 0 ≤ i < 232−1 liegen.
Zugriff auf Array-Elemente
Ein Skript kann ein Array auch als leeres Arrays erzeugen, das später vom Programm mit Daten gefüllt wird.
const farben = []; // oder const farben = new Array();
Der Zugriff auf die Elemente des Arrays erfolgt über den Namen des Arrays und einen Index. Die folgenden Deklarationen initialisieren das Array.
farben[0] = "rot"; // Initialisiert das Array mit Werten farben[1] = "grün"; farben[2] = "blau"; farben[3] = "gelb";
Das Zuweisen eines neuen Werts ändert ein Array-Element:
farben[0] = "orange";
Da Javascript eine dynamisch typisierte Sprache ist, muss die Anzahl der Elemente eines Arrays bei der Deklaration nicht angegeben werden. Dennoch kann ein optionaler Längenparameter die Anfangsgröße des Arrays festgelegen.
let len = 4; // belegt den Speicherplatz für 4 Array-Elemente
…
let farben = new Array(len);
- Ist der Wert für die Länge des Array ein Integer, konvertiert der Konstruktor die Zahl in einen 32-Bit Integer und erzeugt ein Array der Länge len. Das Array enthält keine Elemente, obwohl seine Länge nicht 0 ist.
- Ist der Wert für die Länge des Arrays kein Integer, legt die Deklaration ein Array mit einem Element mit dem Wert "len" und der Länge 1.
Die folgenden Anweisungen sind vollkommen korrekt:
let farben = new Array(5); farben[10] = "ocker";
Wenn die beiden Anweisungen ausgeführt wurden, enthält das Array 11 Elemente, die bis auf das elfte allesamt undefiniert sind (nie vergessen, dass Arrays immer – und zwar wirklich immer – mit dem nullten Element anfangen). Und die Moral aus der Geschichte? Neue Array-Elemente dürfen auch am Ende des Arrays eingefügt werden und jede Menge Lücken haben.
Array for, for in, forEach, for of
Arrays sind nicht zuletzt deswegen so schön, weil man durch sie iterieren kann: Arrays und for-Anweisungen ziehen einander magisch an.
const tiere = ["Hund", "Katze", "Maus", "Ratte"];
for (let i=0; i<tiere.length; i++) {
if (tiere[i] == "Maus") {
alert("Uiuiui");
}
}
Die for-Anweisung wird durch das Cachen von length schneller (wenn sich length während der Iteration nicht ändert):
const length = tiere.length;
for (let i=0, ii<length; i++) {
if (tiere[i] == "Hund") {
alert("Wuff Wuff");
}
}
Damit die Iteration auch in assoziativen Arrays so bequem funktioniert, gibt es die for – in-Anweisung.
let myToys = new Array();
myToys["Teddy"] = "Brummbär";
myToys["Computer"] = "iMac";
myToys["Auto"] = "Ferarri";
myToys["Karten"] = "Skat";
for (const key in myToys) {
var value = myToys[key];
console.log(key, value);
document.querySelector("#result").textContent += key + " "+ value + "\n";
}
Ausgabe:
Ein Array mit der for – in-Anweisung erforschen:
let text = "";
for (let attrib in window) {
text += "window." + String(attrib) + "\n";
}
console.log (text);
In ECMAScript 5 (ES5) kam forEach als komfortabler for-Loop mit hinzu. forEach ist zwar eine der modernen Errungenschaften für den Lauf durch ein Array, aber die Performance bleibt hinter den altgedienten for-Loops zurück.
const dogs = ["Pudel", "Schnauzer", "Retriever"];
dogs.forEach (function (entry) {
console.log(entry);
});
oder noch eleganter und ohne Callback-Funktion mit for of (ES6 – nicht IE11)
for (const item of dogs) {
console.log (item)
}
