Webprogrammierung

Arbeiten mit Arrays

31.1.2011 von Andreas Hitzig

ca. 2:50 Min
Ratgeber
VG Wort Pixel
  1. Javascript-Arrays im Griff
  2. Arbeiten mit Arrays
  3. Mehrdimensionale Arrays
image.jpg
Die Elemente einer Website werden als Collection in einer Array-Struktur verwaltet.
© Internet Magazin

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 lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

internet, webdesign, adobe,  Illustrator, CS6

Webdesign

Webdesign in Adobe Illustrator CS6

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.

Facebook stellte die neue Suche

Facebook

Facebooks Social Graph Search

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?

Der BGH erklärt das Internet zur Lebensgrundlage.

Online-Recht

Darauf müssen Sie bei den AGB achten

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.

Online-Urheberrecht: Unser Ratgeber bietet Tipps für das Cloud-Recht.

Online-Recht in der Cloud

Wie sieht das Urheberrecht in der Wolke aus?

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…

Logistik im E-Commerce: Prozesse rund um die Logistik.

E-Commerce-Logistik

Logistik im E-Commerce

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.