JavaScript: Arrays erstellen und nutzen

In diesem Tutorial möchte ich euch zeigen, wie ihr mit JavaScript einen Array erstellen und verwenden könnte.

Array erstellen

Um einen Array in JavaScript zu erstellen, kann man die Elemente einfach innerhalb von eckigen Klammern definieren.

var arr1 = [1, 2, 3];
var arr2 = ["a", "b", "c"];
var arr3 = [1, 'abc'];

In diesem Beispiel erstellen wir drei Arrays. Der Array "arr1" enthält die Zahlen 1, 2 und 3 und der Array "arr2" enthält die Buchstaben a, b und c. So lassen sich einfach Arrays mit Strings oder Integer-Zahlen füllen. Genauso ist es aber auch möglich Variablen mit einem verschiedenen Typen in einem einzigen Array zu mixen. Dies machen wir bei "arr3".

var arr = new Array(10);

Im ersten Beispiel haben wir einen Array erstellt, indem wir dessen Elemente direkt definiert haben. Mit new Array() ist es aber auch möglich, einen leeren Array bestimmter Länge zu reservieren. In diesem Beispiel erstellen wir einen Array mit 10 undefinierten Elementen.

Array-Elemente lesen und ändern

Nachdem wir unseren Array erstellt haben, brauchen wir natürlich auch eine Möglichkeit, die Elemente zu lesen oder zu ändern. Wie das geht, zeigt unser nächstes Beispiel.

var arr = [1, 2, 3];
var a = arr[0];  // 1
arr[0] = 5;
var b = arr[0];  // 5

Hier erstellen wir zunächst einen Array "arr" mit den Elementen 1, 2 und 3. Anschließend lesen wir das erste Array Element aus und speichern dieses in der Variable a ab. Hierzu benutzten wir arr[0], da das erste Array-Element den Index 0 hat (das zweite Element würden wir dementsprechend mit arr[1] auslesen können). Variable a steht damit auf 1.

Nun ändern wir den Inhalt des ersten Elements und setzen diesen auf den Wert 5. Das können wir, indem wir arr[0] einfach als Variable betrachten und arr[0] = 5 schreiben. Zuletzt lesen wir wieder den Inhalt des ersten Elements aus und erhalten den Wert 5.

var arr = new Array(3);

arr[0] = 1;
arr[1] = 2;
arr[2] = 3;

In diesem Beispiel erstellen wir in der ersten Zeile einen Array mit drei leeren Feldern. Anschließend setzen wir die drei Felder auf die Werte 1, 2 und 3.

Den gesamten Array durchlaufen

Bisher haben wir nur einzelne Array-Elementen aus gelesen oder verändert. Wir können aber auch durch den gesamten Array gehen und so jedes Element betrachten. Das nächste Beispiel zeigt, wie das geht.

var arr = ["a", "b", "c"];

for (var i = 0; i < arr.length; i++) {
   alert(arr[i]);
}

Zunächst erstellen wir einen Array mit den Elementen a, b und c. Anschließend benutzen wir eine for-Schleife, um durch alle Elemente zu gehen. Wir beginnen beim Index 0 (i = 0) und enden beim Index des höchsten Array-Elements. Dazu nutzen wir die Eigenschaft "length", mit der wir die Länge eines beliebigen Arrays bestimmen können. Innerhalb der Schleife geben wir mit alert(arr[i]) einfach jedes Element nacheinander aus.

Weitere Themen

Natürlich kann man mit Arrays noch viel mehr machen als sie bloß zu erstellen, auszulesen oder die Elemente zu verändern. Hier sind einige weitere Themen zu Arrays in JavaScript.

• Arrays mit JavaScript sortieren
• Elemente zu einem JavaScript Array hinzufügen
• Zwei dimensionale JavaScript Arrays

Bei Bedarf werde ich die Liste in Zukunft noch erweitern.