Arrays – Programmieren lernen mit JavaScript – Thytos
Nächstes Video startet in 3 Sekunden.
Programmieren lernen mit JavaScript

Arrays

Ein Array ist eine Da­ten­struk­tur, um eine Lis­te von Wer­ten zu spei­chern. Im Ge­gen­satz zu manch an­de­ren Pro­gram­mier­spra­chen kön­nen Arrays in Java­Script Wer­te be­lie­bi­ger Art ent­hal­ten und sind fle­xi­bel ein­setz­bar.

Wenn ihr die IMDb seid und beispielsweise die Besetzung von Das Schweigen der Lämmer auflisten wolltet, dann bräuchtet ihr, wie der Name schon sagt, eine Liste mit allen Schauspielern. Um solche Listen programmatisch abzubilden, gibt es Arrays, zu Deutsch Datenfeld oder wörtlich übersetzt: Anordnung / Reihe.

In JavaScript werden Arrays mit eckigen Klammern kreiert, zwischen denen per Komma getrennt die Werte stehen, die im Array enthalten sein sollen.
Öffnet eure Konsole, um mitzumachen, und erstellt eine Variable cast, die ihr auf ein Array mit ein paar Namen des Schweigen der Lämmer-Casts setzt.

var cast = ["Jodie Foster", "Lawrence A. Booney", "Kasi Lemmons", "Lawrence T. Wrentz"];

Fertig ist das Array.
Um den Namen an einer bestimmten Stelle auszulesen, wird in eckigen Klammern hinter das Array der Index der Stelle geschrieben – genauso wie ihr es bereits von Strings kennt. Auch bei Arrays ist das erste Element am Index Null.

cast[0]
// => "Jodie Foster"

Auf die gleiche Weise kann auch ein Wert an eine Stelle im Array platziert werden. Wenn zum Beispiel Anthony Hopkins an der ersten Stelle im Array sein soll, kann sein Name cast[0] einfach zugewiesen werden.

cast[0] = "Anthony Hopkins";

cast;
// => ["Anthony Hopkins", "Lawrence A. Booney", …

Wird das Array ausgelesen, ist zu sehen, dass Anthony Hopkins nun an der ersten Position enthalten ist. Dafür ist Jodie Foster aber raus. Um sie wieder ins Array einzufügen, ohne einen anderen Namen zu überschreiben, muss das Array erweitert werden.

Elemente hinzufügen

Der höchste Index im Array ist aktuell 3, denn dort befindet sich das aktuell letzte Element, "Lawrence T. Wrentz". Am Index 4 gibt es bisher keinen Wert.

cast[3];
// => "Lawrence T. Wrentz"

cast[4];
// => undefined

"Jodie Foster" kann einfach auf diese Stelle des Arrays gesetzt werden.

cast[4] = "Jodie Foster";

cast;
// => ["Anthony Hopkins", "Lawrence A. Booney", "Kasi Lemmons", "Lawrence T. Wrentz", "Jodie Foster"]

Arrays in JavaScript erweitern ihre Länge automatisch, wenn neue Elemente außerhalb des bestehenden Bereichs hinzugefügt werden. Das ist nicht in allen Programmiersprachen so. In manchen muss bei der Erstellung des Arrays eine Länge definiert werden, die im Nachhinein nicht mehr geändert werden kann.

Um die Länge eines Arrays auszulesen, gibt es – ebenfalls wie bei Strings – ein length-Attribut.

cast.length;
// => 5

Dieses length-Attribut kann verwendet werden, um dynamisch Elemente ans Ende eines Arrays anzuhängen. Da der höchste Index immer um eins kleiner ist als die Länge eines Arrays, zeigt die length-Property, wenn sie als Index verwendet wird, immer auf die erste Stelle außerhalb des Arrays.

cast[4] // 4 ist aktuell der höchste Index
// => "Jodie Foster"

cast.length // Länge ist 5
// => 5

cast[5] = … // Mit Index 5 kann das Array erweitert werden

cast[cast.length] = … // Das gleiche wird mit cast.length erreicht

Dafür kann eine Funktion geschrieben werden, die das automatisch tut. Ihr wird ein Array übergeben und der Wert, der daran angehängt werden soll. Die Funktion wird push genannt, weil sie das Element an das Array "dran-pusht".

function push(arr, element) {
  arr[arr.length] = element;
}

Mit der Funktion wird der Name Scott Glenn dem cast-Array hinzugefügt.

push(cast, "Scott Glenn");

cast
// => […, "Scott Glenn"]

Array in String konvertieren

Wird cast mit der alert-Funktion ausgegeben, werden die Elemente mit Komma getrennt angezeigt.

Es wäre schön, wenn hinter einem Komma ein Leerzeichen wäre, bevor der nächste Name folgt.
Das könnt ihr erreichen, indem ihr selbst das Array in einen String umwandelt.

var castString = cast[0] + ", " + cast[1] + ", " + cast[2] + ", " + cast[3] + ", " + cast[4] + ", " + cast[5];

alert(castString);

Der String wird zusammengesetzt aus jedem einzelnen Array-Element, gefolgt von einem Komma mit Leerzeichen (", ").

Statt das in eine Zeile zu schreiben, kann mit dem Plusgleich-Operator der String über mehrere Zeilen aufgeteilt werden.

var castString = ""; // Variable wird auf leeren String gesetzt
castString += cast[0] + ", ";
castString += cast[1] + ", ";
castString += cast[2] + ", ";
castString += cast[3] + ", ";
castString += cast[4] + ", ";
castString += cast[5] + ", ";

Wie ihr seht, ist ein Muster zu erkennen. Und Muster rufen nach Automatismen.
Das Zusammensetzen des Arrays zu einem String, was hier manuell geschehen ist, kann auch als Funktion geschrieben werden, die auf beliebige Arrays jeder Länge angewendet werden kann.
Wie das genau aussieht, erfahrt ihr im nächsten Artikel der Serie.