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.

  1. Javascript-Arrays im Griff
  2. Arbeiten mit Arrays
  3. Mehrdimensionale Arrays
Internet, webdesign, arrays, javascript, programmierung

© 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, webdesign, arrays, javascript, programmierung

© 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, webdesign, arrays, javascript, programmierung

© 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 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​".