JavaScript-Arrays (Arrays, Assoziative Arrays)
Arrays
Ein Array ist eine Sammlung von Werten. Die einzelnen Werte haben jeweils einen Index, mit dem auf sie zugegriffen werden kann. Einige Daten einer HTML-Seite werden vom System in Arrays gespeichert. Um einen eigenen Array zu definieren müssen wir zuerst den Array und dann die einzelnen Elemente mit Arraynamen und Index in eckigen Klammern deklarieren. Dazu ein Beispiel:
var tage = new Array();
tage[1] = "Montag";
tage[2] = "Dienstag";
tage[3] = "Mittwoch";
tage[4] = "Donnerstag";
tage[5] = "Freitag";
tage[6] = "Samstag";
tage[7] = "Sonntag";
Als erstes wird mit der JavaScript-Funktion new Array() das neue Array tage definiert. Danach weisen wir die einzelnen Werte mit dem jeweiligen Index zu. Intern wird ein Array in JavaScript als Objekt gehandhabt. Deswegen wird es mit dem Objekt new definiert.
Nun stellt sich die Frage, wie man Elemente eines Arrays wieder ausliest. Dazu wird einfach der Arrayname mit dem Index in eckigen Klammern adressiert. Folgendes Zeile unter obiges Beispiel gibt einen Wochentag aus.
alert(tage[2]);
Kurzschreibweise
Ein Array können wir auch kurz und knackig erstellen, wie gleich zu sehen.
var tage = new Array("Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag", "Sonntag");
Der Index des Arrays tage wird automatisch beginnend bei 0 zugewiesen. Wenn wir aber unbedingt mit 1 beginnen möchten, fügen wir als erstes eine leeres Element ein.
var tage = new Array("", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag", "Sonntag");
Dies ist allerdings kein schöner Programmierstil.
Assoziative Arrays
Ein assoziatives Array ist ein Array mit Werten, die als Index keine ganze Zahl besitzen, sondern eine Zeichenkette. Der Index ist in diesem Fall beschreibend.
var fensterbreite = new Array();
fensterwerte["breite"] = 400;
fensterwerte["hoehe"] = 500;
fensterwerte["titel"] = "Neues Fenster";
Wir greifen auf die einzelnen Werte dann jeweils wieder mit ihrem assoziativen Index zu:
alert(fensterwerte["titel"]);
In JavaScript können wir auch numerische und assoziative Indizes mischen. Dazu gibt es eine Kurzschreibweise, um assoziative Arrays in weniger Zeilen zu schreiben.
var fensterwerte = {
"breite": 400, "hoehe": 500, "titel": "Neues Fenster"
}
alert(fensterwerte["titel"]);
An sich handelt es sich bei assoziative Arrays in JavaScript intern um Hash-Tabellen. Die Kurzschreibweise erzeugt ein Objekt, das auch über eckige Klammern statt mit Punktsyntax angesprochen werden kann. In der Praxis ist die einzige negative Auswirkung, dass die üblichen Array-Methoden wie join() und sort() scheitern.
Arrays können auch beliebig ineinander verschachtelt werden. Dies bezeichnet man dann als mulidimensionales Array. Auf die Elemente eines multidimensionalen Arrays greifen wir dann mit mehreren eckigen Klammern hintereinander zu.
Arrays mit Schleifen auslesen
Der Hauptvorteil eines Arrays ist, dass es mehrere Werte speichern kann. Um mit diesen Werten professionell arbeiten zu können, benötigen wir Schleifen. Die einfachste Variante ist eine Array mit der for-Schleife oder einer der anderen grundlegenden Schleifen auszulesen. Dabei bildet die Zählervariable der Schleife (meistens i) den Index und mit length stellen wir fest, wie viele Elemente das Array enthält. Dazu ein Bespiel:
var tage = new Array("Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag", "Sonntag");
var erg = "";
for(var i = 0; i < tage.length; i++) {
erg += tage[i] + "\n";
}
alert(erg);
Das Auslesen klappt allerdings nur numerischen Indizes. Assoziative Indizes werden nicht zu Länge des Arrays dazugezählt, also von length nicht erfasst. Auch wenn die Elemente nicht durchgängig nummeriert sind, scheitert eine einfache Schleife. Für solche Zwecke bietet JavaScript die for-in-Schleife. Die allgemeine Syntax lautet:
for (Index in Array) {
Anweisungsblock;
}
Diese Schleife holt alle Elemente aus einem Array und liefert für jedes Element den Index, den wir dann in den Schleifenanweisungen verwenden können. Hier ein Beispiel:
var fensterbreite = new Array();
fensterwerte["breite"] = 400;
fensterwerte["hoehe"] = 500;
fensterwerte["titel"] = "Neues Fenster";
var erg = "";
for (var elem in fensterwerte) {
erg += "Index " + elem + ": ";
erg += fensterwerte[elem] + "<br />";
}
document.write(erg);