Webprogrammierung

Javascript-Arrays im Griff

Die lokale Speicherung von Daten ist unter Javascript am besten mithilfe von Arrays zu realisieren. Wir zeigen Ihnen, was Sie dabei beachten sollten.

Inhalt
  1. Javascript-Arrays im Griff
  2. Arbeiten mit Arrays
  3. Mehrdimensionale Arrays

© Internet Magazin

Internet, webdesign, arrays, javascript, programmierung

Arrays dienen dazu, mehrere Werte in einer Liste unter einer Variable zu speichern, beispielsweise die Anzahl der Punkte eines jeden Fahrers in der laufenden Formel-1-Saison. Für den Zugriff auf die Daten verwenden Sie entweder den Index des Elements - dieser wird automatisch vergeben - oder alternativ einen beliebigen Namen. Zu jedem Array können Sie beliebig viele zusätzliche Elemente hinzufügen oder bestehende Daten aktualisieren.

Deklaration eines Arrays

Im Gegensatz zur Deklaration einer Variablen benötigen Sie bei der Definition eines Arrays einen Konstruktor. Das Erzeugen eines Arrays ist also ein zweistufiger Vorgang.

var f1_fahrer;
f1_fahrer = new Array();

So erzeugen Sie ein neues leeres Array - alternativ können Sie auch ein Array mit einer vordefinierten Anzahl von Elementen anlegen. Dafür geben Sie dem Array als Parameter die Anzahl der Elemente mit.

f1_fahrer = new Array(24);

Das Array hat somit Platz für alle 24 Fahrer der aktuellen Formel-1-Saison. Als dritte Variante geben Sie dem Array bei der Erzeugung bereits alle Werte mit.

f1_fahrer = new Array("Button",
"Hamilton", "Schumacher", "Rosberg",
"Vettel", "Webber",..., "Glock");

Zugriff auf die Elemente

Nachdem Sie ein Array erzeugt haben, greifen Sie am besten über den Index auf die einzelnen Elemente zu. Die Nummerierung beginnt dabei mit dem Zählerstand 0.

var f1_fahrer;
f1_fahrer = new Array("Button",
"Hamilton", "Schumacher", "Rosberg",
"Vettel", "Webber", "Glock");
alert(f1_fahrer[0]);
alert(f1_fahrer[1]);
...
alert(f1_fahrer[6]);

Weitere Array-Konstruktoren

© Internet Magazin

In einem zweistufigen Array speichern Sie zu einem Element mehrere Details, etwa den Punktestand und den Rennstall.

Daneben können Sie einem Array auch während des Programmablaufs Werte zuweisen. Dabei haben Sie die Auswahl zwischen einem Array mit einer vordefinierten Anzahl an Feldern und einem Array mit einer freien Anzahl. Im Array f1_motorleistung sollen die PS-Werte der Formel-1-Rennwagen gespeichert werden. Im Beispiel gibt es vier Motoren mit den PS-Stärken 760, 780, 805 und 810.

var f1_motorleistung = new Array(4);
f1_motorleistung[0] = 810;
f1_motorleistung[1] = 780;
f1_motorleistung[2] = 805;
f1_motorleistung[3] = 760;

In der dritten Variante sind weder die Anzahl der Elemente noch deren Werte bekannt. Sie legen ein undefiniertes Array an und speichern darin Ihre Daten.

var f1_rennstall = new Array();
f1_rennstall[0] = "Vodafone McLaren
Mercedes"
f1_rennstall[1] = "Mercedes GP
Petronas Formula One Team"
f1_rennstall[2] = "Red Bull Racing"
f1_rennstall[3] = "Scuderia Ferrari
Marlboro"

Das Array wird somit dynamisch erweitert und passt sich entsprechend an.

Zugriff auf die Array-Inhalte

© Internet Magazin

Beim Einsatz einer for-in-Schleife lassen Sie leere Array-Elemente aus.

Auf den Wert eines Elements innerhalb des Arrays greifen Sie, wie im obigen Beispiel gesehen, über den Namen des Arrays sowie dem entsprechenden Index zu. Mit diesem Wert können Sie direkt weiterarbeiten - beispielsweise weisen Sie diesen einer neuen Variable zu oder Sie geben den zugewiesenen Inhalt auf einer HTML-Seite aus.

document.write(f1_rennstall[3]);
var fuehrende = f1_rennstall[2];

Beim Zugriff auf ein Array-Element müssen Sie nicht zwingend eine Zahl mitgeben, eine Variable, der Sie zuvor den entsprechenden Index mitgegeben haben, ist ebenfalls ausreichend. Damit können Sie auf definierte äußere Faktoren reagieren.

var liste = new Array("Element1",
"Element2", "Element3");
var index;
var eingabe = "D";
switch (eingabe) {
case "A":
index = 0;
break;
case "B": case "D":
index = 1;
break;
case "C":
index = 2;
break;
}
document.write("Das Ergebnis lautet "
+ liste[index]);

Im Beispiel haben Sie ein Array mit drei Elementen. Basierend auf dem Wert von eingabe weisen Sie der Variablen index 0, 1 oder 2 zu. Dabei verweisen mehrere unterschiedliche Werte von eingabe auf das gleiche Array-Element. Mit diesem Ansatz können Sie die Ausgabe des Array-Werts mit nur einer Programmierzeile realisieren.

Mehr lesen

Chronologische Liste und Netflix-Links -

Neuerscheinungen in der Übersicht -

Vorschau auf Film- und Serien-Highlights -

Mehr zum Thema

Webdesign

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

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

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.
Online-Recht in der Cloud

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

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