Javascript Array-Index

Array Index beginnt bei 0, Lücken, Löcher und fehlender Index

Der Index eines Javascript-Arrays muss eine ganze Zahl sein. Numerische Arrays beginnen immer beim Index 0 – Programmierer lieben es, beim Zählen mit 0 anzufangen.

Das erste Element des Arrays wird mit farben[0], das zweite Element mit farben[1] usw. angesprochen.

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.

let 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 werden auch als sparse (spärlich) bezeichnet, Arrays ohne Löcher als dense (dicht). 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 = new Array('Hund', 'Katze', 'Maus', 'Ratte');
if (tiere == 'Hund') {
   …
}

sondern

const tiere = new Array('Hund', 'Katze', 'Maus', 'Ratte');
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.

let farben = ["rot", "grün", "blau", "gelb", "grau"];
farben[100] = "schwarz";

console.log(typeof farben[50]) // Ausgabe: "undefined";
console.log(farben.length)     // Ausgabe:  101

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.

let 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");
}
[Log]  Element auf 3 gefunden 
[Log]  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.

let trees = [
   "Kokospalme", 
   "Ahornbaum",
   [ "Blautanne", "Nordmanntanne", "Fichte"]
];

let 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.

let farben = [];
// oder
let 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 Arrayelement:

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

Arrays sind nicht zuletzt deswegen so schön, weil man durch sie iterieren kann: Arrays und for-Anweisungen ziehen einander magisch an.

let tiere = new Array("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):

let tiere = new Array("Hund", "Katze", "Maus", "Ratte");
for (let i=0, j=tiere.length; i<j; i++) {
   if (tiere[i] == "Hund") {
      alert("Wuff Wuff");
   }
}

oder eleganter

let tiere = new Array("Hund", "Katze", "Maus", "Ratte");
for (let i=0, item; item=tiere[i]; i++) {
   if (item == "Hund") {
      alert("Wuff Wuff");
   } 
}

Das funktioniert allerdings nicht mit booleschen Werten.

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";

let text = "";
for (let i in myToys) {
   text += myToys[i] + "\n";
}
alert(text);

Ausgabe:



	

Ein Array mit der for – in-Anweisung erforschen:

let text = "";
for (let attrib in window) {
   text += "window." + String(attrib) + "\n";
}
console.log (text);


	

Ab ECMAScript 5 (ES5) und dem Abgesang von IE kommt forEach als komfortabler for-Loop mit hinzu. forEach ist zwar die modernste Errungenschaft für den Lauf durch ein Array, aber die Performance bleibt hinter den altgedienten for-Loops zurück.

let dogs = ["Pudel", "Schnauzer", "Retriever"];
dogs.forEach(function(entry) {
    console.log(entry);
});
ARRAY INDEX 0 1 2 3 5 6