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

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…