Webprogrammierung

Arbeiten mit Arrays

image.jpg

© Internet Magazin

Die Elemente einer Website werden als Collection in einer Array-Struktur verwaltet.

Haben Sie innerhalb Ihres Skripts Ihrem Array auf Basis unterschiedlicher Bedingungen verschiedene Werte hinzugefügt, müssen Sie für die Ausgabe oder die weitere Verarbeitung die genaue Anzahl der gespeicherten Elemente kennen. Nutzen Sie die Eigenschaft length, mit der Sie für jedes Array dessen Größe bestimmen können. Es gilt jedoch zu unterscheiden zwischen der Anzahl von Elementen, die ein Array besitzt, und den Werten, die diesen Elementen zugewiesen sind.Im folgenden Beispiel haben Sie ein Array definiert, welches beim Erzeugen auf drei Elemente ausgelegt ist. Aus welchen Gründen auch immer weisen Sie jedoch dem Array noch einen Wert für den Index 5 zu.

var f1_motorleistung = new Array(2);
f1_motorleistung[0] = 810;
f1_motorleistung[1] = 780;
f1_motorleistung[2] = 805;
f1_motorleistung[5] = 760;
document.write(""+f1_motorleistung.
length);

In unserem Beispiel liefert Javascript nun nicht, wie etwa zu erwarten wäre, den Wert 4 für vier gespeicherte Elemente aus, sondern 6. Die Eigenschaft length ermittelt immer die Anzahl der Elemente in einem Array, auch wenn diese mit keinem Wert belegt sind.

Arraywerte ausgeben

Nachdem Sie die Anzahl der Elemente eines Arrays kennen, ist die Ausgabe des Inhalts einfach zu realisieren. Verwenden Sie dazu am besten eine for-Schleife, in der Sie die Größe des Arrays abfragen, die Schleife anschließend entsprechend oft durchlaufen und die Inhalte weiterverarbeiten oder ausgeben.

var f1_fahrer;
f1_fahrer = new Array("Button",
"Hamilton", "Schumacher", "Rosberg",
"Vettel", "Webber", "Glock");
for (i = 0; i < f1_fahrer.length;
i++) {
document.write("Fahrer der Saison
2010: " + f1_fahrer[i] + "<br>");
}

Dieser Weg der Abarbeitung benötigt unnötig viel Zeit, da bei jedem Schleifendurchlauf erneut die Länge des Arrays ermittelt wird. Wenn Sie innerhalb des Arrays die Anzahl der Elemente nicht verändern, bietet ein alternativer Weg die deutlich bessere Performance.

for (var i=0, i_tmp=f1_fahrer.length;
i<i_tmp; i++) {
...
}

Verwenden Sie eine Zwischenvariable i_ tmp und weisen Sie dieser die Anzahl der Elemente des Arrays zu. Für die Abarbeitung der Schleife greifen Sie anschließend auf diese zu, anstelle jedes Mal die Anzahl erneut zu ermitteln.Sie sollten außerdem noch kontrollieren, ob allen Array-Elementen ein Wert hinterlegt ist. Wie bereits gezeigt, ist es ohne Probleme möglich, auch leere Einträge zu erzeugen. Dazu dient Ihnen die for-in-Schleife. Diese gibt nur diejenigen Elemente aus, die einen Wert zugewiesen haben. Das Beispiel mit den Motorleistungen bauen Sie dann wie folgt um:

var f1_motorleistung = new Array(2);
var i;
f1_motorleistung[0] = 810;
f1_motorleistung[1] = 780;
f1_motorleistung[2] = 805;
f1_motorleistung[5] = 760;
for (i in f1_motorleistung) {
document.write("Motorleistung des F1
Rennwagens: " + f1_motorleistung[i] +
" PS<br>");
}

Trotz der sechs Elemente im Array werden nur vier Zeilen ausgegeben.

Assoziative Arrays

Es ist auch möglich, über einen sprechenden Namen auf die Daten zuzugreifen. Damit vereinfacht sich die Verwaltung deutlich, da die Identifikation des passenden Arrayelements sprechend ist. Benötigen Sie beispielsweise eine Speichermöglichkeit für ein Wertepaar Person und Zahl, nutzen Sie am besten den assoziativen Ansatz. Die Verwaltung des Arrays geschieht dabei nicht über einen fortlaufenden Index, sondern einen eindeutigen Bezeichner. Wir bilden den Punktestand in der Formel 1 der Top-5-Fahrer ab:

var f1_fahrer;
f1_fahrer = new Array();
f1_fahrer["Webber"] = 93;
f1_fahrer["Button"] = 88;
f1_fahrer["Hamilton"] = 84;
f1_fahrer["Alonso"] = 79;
f1_fahrer["Vettel"] = 78;
for (name in f1_fahrer) {
document.write("Punkte für Fahrer "
+ name + " : " + f1_fahrer[name] + "
PS<br>");
}

Auch ein assoziatives Array wird über eine Variable und einen Konstruktor gebildet. Anstelle einer fortlaufenden Nummerierung wird im Beispiel der Name des Fahrers für die Verwaltung der Daten herangezogen.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".