Arrays

Ein Array stellt eine Aneinanderreihung von Variablen dar (Liste). Arrays können in JavaScript zur Laufzeit verändert werden, d. h. es können Elemente (dies sind die „einzelnen Variablen“ des Arrays) hinzugefügt, entfernt und sortiert werden. Ebenfalls ist es möglich, das Array zu durchsuchen, zu sortieren und zu filtern.

Ein Array wird in einer einfachen Variablen hinterlegt. Um eine Array-Variable zu initialisieren notieren wir das Schlüsselwort new gefolgt von dem Datentyp-Name Array. Dahinter folgt ein rundes Klammernpaar. Bei dieser Notation handelt es sich um eine Objekt-Instanziierung (so nennt sich der Vorgang der Objekt-Erzeugung). Diese werden wir später beim Thema Objektorientierung nochmals aufgreifen. Als Parameter für den sogenannten Konstruktor (dies ist die Funktion für die Instanziierung des Objektes) können wir die Werte für das Array übergeben. Werden keine Werte übergeben, so wird ein leeres Array erzeugt. Ein Array kann Werte vom gleichen, aber auch von unterschiedlichen Datentypen enthalten. Zweites ist jedoch auf Grund von Such- und Sortierfunktionen nicht unbedingt zu empfehlen. Die Initialisierung eines Arrays könnte wie folgt aussehen:

var sprachen = new Array("HTML", "CSS", "JavaScript", "ActionScript", "PHP", "Perl", "ASP.NET");

Zur Deklaration und Initialisierung eines Arrays gibt es auch noch eine zweite Schreibweise, welche als Kurzschreibweise anzusehen ist. Hierfür notieren wir bei der Wertzuweisung die eckigen Klammern [ und ]. Innerhalb der eckigen Klammern notieren wir nun die Werte, die wir dem Array zuweisen wollen. Dabei werden mehrere Werte durch Komma getrennt. Ein äquivalentes Beispiel zur Array-Initialisierung wie oben in der Kurzschreibweise sieht wie folgt aus:

var sprachen = ["HTML", "CSS", "JavaScript", "ActionScript", "PHP", "Perl", "ASP.NET"];

Um auf die Elemente eines Arrays zuzugreifen, müssen wir den Namen des Arrays gefolgt von einem eckigen Klammernpaar notieren. Innerhalb der eckigen Klammern wird der sogenannte Index notiert. Die Elemente eines Arrays sind durchgängig nummeriert. Das erste Element besitzt den Index 0 (nicht 1!), das zweite Elemente den Index 1, das dritte Elemente den Index 2 usw.. Das folgende Beispiel gibt „CSS“ aus:

var sprachen = new Array("HTML", "CSS", "JavaScript", "ActionScript", "PHP", "Perl", "ASP.NET");

document.write(sprachen[1]);

Array-Schleife

Wie bereits schon im Thema Schleifen angesprochen, gibt es in JavaScript die for-in-Schleife (umgangssprachlich auch gerne als „Array-Schleife“ bezeichnet). Diese wird dazu verwendet, die Elemente eines Arrays „durchzugehen“. Um eine for-in-Schleife zu notieren, geben wir das Schlüsselwort for gefolgt von einem runden Klammernpaar an (so wie bei der for-Schleife auch). Innerhalb der Klammern wird das Schlüsselwort var, gefolgt von einem Variablennamen, angegeben. Hinter dem Variablennamen muss nun noch das Schlüsselwort in sowie der Name des Arrays angegeben werden. Die in der Schleife definierte Variable enthält den Index, welcher genutzt werden kann, um auf die Elemente des Arrays zuzugreifen.

var sprachen = new Array("HTML", "CSS", "JavaScript", "ActionScript", "PHP", "Perl", "ASP.NET");

for (var sprache in sprachen)
{
	document.write(sprachen[sprache]);
	document.write("<br />");
}

Übrigens: Die for-in-Schleife kann auch dazu verwendet werden, die Eigenschaften eines Objekts durchzugehen. Dabei enthält die Variable, welche in der Schleife deklariert wurde, nicht den Index, sondern den Namen der Eigenschaft.

Array verändern

Um ein Array zu verändern, gibt es die vier Funktionen: push(), pop(), shift() und unshift(). Um diese Funktionen aufrufen zu können, müssen wir den Namen der Variable gefolgt von einem Punkt und dem Funktionsnamen (inkl. Klammern mit Parameter) notieren. Über diese Weise können auch Eigenschaften gesetzt oder abgerufen werden. Der Funktion push() können ein oder mehrere Werte / Parameter übergeben werden, welche dem Array am Ende hinzugefügt werden sollen. Als Rückgabewert gibt die Funktion die neue Länge des Arrays zurück. Die Funktion unshift() ist im Vergleich zur push()-Funktion ähnlich, jedoch mit dem Unterschied, dass die Elemente nicht ans Ende, sondern an den Anfang hinzugefügt werden. Die Funktion pop() entfernt das letzte Element des Arrays und gibt den entfernten Wert zurück. Die Funktion shift() ist wiederum mit der Funktion pop() zu vergleichen. Auch hier liegt der Unterschied darin, dass sich die Funktion nicht auf das Ende, sondern auf den Anfang bezieht, d. h. die Funktion shift() entfernt das erste Element des Arrays.

var sprachen = new Array("XML", "HTML", "CSS", "JavaScript", "ActionScript");

document.write("Folgendes Element wurde entfernt: ");
document.write(sprachen.shift());

document.write("<br />");

document.write("Das Array hat nun folgende Länge: ");
document.write(sprachen.push("Java SE"));

Übrigens: Mit der Eigenschaft length ist es möglich, die Länge des Arrays abzurufen. Wie bereits erwähnt, gilt auch hier der Syntax mit dem Punkt (z. B. sprachen.length).

Arrays zusammenführen

Um einem Array ein ganzes Array oder mehrere Arrays hinzuzufügen, gibt es die Funktion concat(). Als Parameter werden ein oder mehrere Arrays übergeben, welche mit dem ursprünglichen Array zusammengeführt werden sollen. Die Funktion concat() gibt ein neues Array zurück, d. h. das ursprüngliche Array sowie die übergebenen Arrays werden nicht verwendet.

var sprachenClient = new Array("HTML", "CSS", "JavaScript", "ActionScript");
var sprachenServer = new Array("PHP", "Perl", "ASP.NET");

var sprachen = sprachenClient.concat(sprachenServer);

document.write("1. Element: ");
document.write(sprachen[0]);
document.write("<br />");

document.write("letztes Element: ");
document.write(sprachen[sprachen.length - 1]);
document.write("<br />");

document.write("Länge: ");
document.write(sprachen.length);

Array in String umwandeln

JavaScript bietet eine einfache Funktion, um die Werte eines Arrays in eine Zeichenkette umzuwandeln. Bei dieser Funktion handelt es sich um join(). Dieser Funktion kann als Parameter eine Zeichenkette übergeben werden, welche als Trennzeichen zwischen den einzelnen Elementen verwendet werden soll. Dieser Parameter ist optional. Wird dieser nicht angegeben, so wird ein Komma (ohne anschließendes Leerzeichen) zur Trennung verwendet.

var sprachen = new Array("HTML", "CSS", "JavaScript", "ActionScript", "PHP", "Perl", "ASP.NET");

document.write(sprachen.join(", "));

Array durchsuchen

Die Funktion indexOf() durchsucht ein Array nach einem bestimmten Wert, welcher als Parameter übergeben werden muss. Wird der gesuchte Wert gefunden, so gibt die Funktion den Index des Elements zurück. Andernfalls gibt die Funktion -1 zurück. Optional kann der Funktion ein Startindex als zweiter Parameter übergeben werden. Dadurch beginnt die Suche nicht beim ersten Element, sondern bei dem Element mit dem angegebenen Index. Eine Suche vom Ende zum Anfang bzw. die Suche nach dem letzten Element ist über die Funktion lastIndexOf() möglich. Die Möglichkeit mit dem zweiten optionalen Parameter gilt hier ebenfalls.

var sprachen = new Array("HTML", "CSS", "JavaScript", "ActionScript", "PHP", "Perl", "ASP.NET");

document.write("Position von JavaScript: ");
document.write(sprachen.indexOf("JavaScript"));

Wichtig: Die Suche nach Objekten in einem Array ist nicht immer ganz problemlos. Auf diese Problematik gehen wir im Thema Objektorientierung genauer ein.

Array sortieren

Um die Werte eines Arrays zu sortieren, können wir die Funktion sort() verwenden. Die Sortierung erfolgt dabei aufsteigend (bei Zahlen nach Größe, bei Zeichenketten alphabetisch). Dazu folgendes Beispiel:

var sprachen = new Array("HTML", "CSS", "JavaScript", "ActionScript", "PHP", "Perl", "ASP.NET");

sprachen.sort();

for (var sprache in sprachen)
{
	document.write(sprachen[sprache]);
	document.write("<br />");
}

Array filtern

Um aus einem Array nur bestimmte Elemente herauszufiltern, können wir die Funktion filter() nutzen. Als Parameter wird der filter()-Funktion eine Funktion als Referenz (dazu später mehr) übergeben, d. h. wir notieren als Parameter den Namen der Funktion, wie beim Funktionsaufruf auch, jedoch ohne die runden Klammern. Der angegebenen Funktion wird dabei ein einzelnes Element des Arrays als Parameter übergeben und muss true (Element soll beibehalten werden) oder false (Element soll „entfernt“ werden) zurückgeben. Auch hier gilt zu beachten, dass die Funktion filter() ebenfalls ein neues Array zurückgibt und das Ursprungs-Array nicht verändert.

Gerade bei solchen Funktionen, wie der Filterungsfunktion, wird gerne ein Lambda-Ausdruck (auch Lambda-Funktion oder anonyme Funktion genannt) verwendet. Dieser ersetzt dabei die angegebene Filterungsfunktion. Bei dem Lambda-Ausdruck notieren wir eine Variablennamen (ohne das var-Schlüsselwort) gefolgt von einem Pfeiloperator =>. Anschließend folgt (bezogen auf das Beispiel der Filterung) ein Ausdruck bzw. eine Bedingung, um zu prüfen, ob der Wert in das neue Array mit einbezogen werden soll. Diese Bedingung muss, wie bei der if-Bedingung auch, einen Wert vom Typ Boolean zurückliefern. Alle dort vorgestellten Operatoren, sowie die Verknüpfungsoperatoren && und ||, können hier verwendet werden.

var zahlen = new Array(12, 32, 8, 50, 83, 29, 30, 100, 46, 23, 7, 132, 57, 92, 20);
var zahlenNeu = zahlen.filter(x => x >= 10 && x < 100);

document.write(zahlen.join(", "));

document.write("<br />");

document.write(zahlenNeu.join(", "));