Websiteentwicklung: JavaScript: Arrays

Was ist ein Array

Arrays sind Variablenketten oder -Felder in denen mehrere Werte abgespeichert werden können. Man kann sie gut als Ersatz für mehrere Variablen verwenden. Sie haben einen Namen und mehrere Werte die jeweils einen Schlüssel haben. Die Schlüssel können verwendet werden, um das Feld mit Daten zu füllen. Zum Auslesen der Daten sind die Schlüssel notwendig.

Arrays erstellen und auslesen

Arrays definieren

Zum Erstellen eines Arrays braucht man den Arraynamen mit var davor, dahinter ein Gleichzeichen und new Array().
Nun kann man die Werte mit Anführungszeichen versehen und sie mit Komma getrennt in die Klammern schreiben:

var Arrayname = new Array("Wert 1", "Wert 2", "Wert 3");

Arrays können auch mit eckigen Klammern definiert werden.

var Arrayname = ["Wert 1", "Wert 2", "Wert 3"];

Außerdem ist es möglich Arrays zuerst ohne Werte zu definieren und diese dem Array erst später zuzuweisen:

var Arrayname = new Array();

Sofern die benötigte Größe des Arrays bekannt ist, ist es möglich, diese auch anzugeben. Hierbei darf die Arraygröße nicht - wie die Werte im ersten Beispiel - von Anführungsstichen umschlossen werden:

var Arrayname = new Array(10);

Arraywerte ändern

Um einen Array zu beschreiben muss man zuerst den Arraynamen und dahinter in eckigen Klammern den Schlüssel angeben. Der Schlüssel ist die Nummer eines Wertes. Dabei wird bei Null angefangen zu zählen. Im ersten Beispiel gilt also:

• „Wert 1“ besitzt die Nummer 0
  
• „Wert 2“ besitzt die Nummer 1
  
• „Wert 3“ besitzt die Nummer 2
  

Um den 2. Wert zu ändern muss also folgendermaßen auf den Wert zugegriffen werden:

Arrayname[1] = "neuer Wert";

Der Schlüssel kann bei der Zuweisung einen Wert haben, der größer ist, als der bisher größte:

var arr = ["Wert 1", "Wert 2", "Wert 3"];
arr.length;    // gibt 3 aus (length liefert die Anzahl der Arrayelemente, siehe weiter unten)
arr[10] = "letzer Wert";
arr.length;    // gibt 11 aus

Die Arrayelemente, denen nichts zugewiesen wurde, hier also arr[3] bis arr[9], bekommen dann die Eigenschaft 'undefined'.

Arrays auslesen

Möchte man einen Wert aus einem Array auslesen muss wie beim Ändern des Wertes vorgegangen werden. Um den 2. Wert aus unserem Array wieder auszulesen muss man also folgende Codezeile schrieben:

var x = Arrayname[1];

Die neu angelegte Variable x sollte nun den Wert „neuer Wert“ enthalten.

Beispiel

 var Frucht=new Array("Apfel","Birne","Banane");
 document.write(Frucht[1]);

Hier wird ein Array beim Erstellen direkt mit den Werten "Apfel","Birne" und "Banane" befüllt. Wenn man das ganze ausprobiert wird Birne ausgegeben, weil „Apfel“ den Schlüssel 0, „Birne“ den Schlüssel 1 und „Banane“ den Schlüssel 2 besitzt.

Arrays durchlaufen

Um zum Beispiel jeden Wert eines Arrays um eins zu erhöhen benötigt man eine for-Schleife, welche das Array durchläuft.

Beispiel

var zahlen = new Array(1,2,3,4,5,6);
for(var i = 0; i < zahlen.length; i++) {
    zahlen[i]++;
}

Konstanten/Eigenschaften

Länge - length

Um die Anzahl der Elemente des Arrays zu ermitteln, kann man die Eigenschaft length abfragen:

var Arrayname = new Array("Wert 1","Wert 2","Wert 3");
alert(Arrayname.length);

In diesem Beispiel würde „3“ ausgegeben werden.

Methoden

concat()

Mit der Funktion concat() können mehrere Arrays miteinander verbunden werden. Zurückgegeben wird das verbundene Array.

Beispiel

var kleineZahlen = new Array(1, 2, 3);
var grosseZahlen = new Array(100, 200, 300);
var alleZahlen = kleineZahlen.concat(grosseZahlen);

Der Inhalt des Arrays alleZahlen lautet nun:

1, 2, 3, 100, 200, 300

Vorsicht

Beinhaltet ein Array Objekte, dann werden nur ihre Zeiger in das neue Array kopiert. Das bedeutet, dass wenn dieses Objekt im alten Array verändert wird, ändert es sich auch im neuen.

join()

Die Methode join() wandelt ein Array in eine Zeichenkette um und fügt nach jedem Wert (außer dem letzten) das übergebene Trennzeichen ein:

Beispiel

var Zahlen = new Array(1, 2, 3);
alert(Zahlen.join("-"));
//Ausgabe: 1-2-3

pop()

Löscht den letzten Wert in einem Array und setzt die Länge des Arrays um eins herunter. Zurückgegeben wird das entfernte Element.

Beispiel

var arr1 = new Array(3, 4, 6, 7, 5);
var removedElement = arr1.pop(); // removedElement: 5
// arr1: [3, 4, 6, 7]

push()

Hängt an das Array den übergebenen Wert an und erhöht so die Anzahl der Elemente um eins. Zurückgegeben wird die neue Länge des Arrays.

Beispiel

var arr1 = new Array(3, 4, 6, 7, 5);
var newLength = arr1.push(10); // newLength: 6
// arr1: [3, 4, 6, 7, 5, 10]

reverse()

Ändert die Reihenfolge der Elemente in einem Array und gibt einen Zeiger auf das Array zurück. Dabei wird das erste Element zum letzten und das letzte Element zum ersten. Die anderen Elemente ändern sich ebenfalls entsprechend.

Beispiel

var zahlen = new Array(1,2,3,4,5,6);
zahlen.reverse(); // zahlen: 6,5,4,3,2,1

shift()

Die Methode shift() entfernt im Gegensatz zu pop() das erste Element in einem Array und gibt dieses zurück. Die nachfolgenden Arrays rücken um eins nach vorne. Die Länge des Arrays wird dabei ebenfalls um eins heruntergesetzt.

Beispiel

var arr1 = new Array(3, 4, 6, 7, 5);
var removedObject = arr1.shift(); // removedObject: 3
// arr1: [4, 6, 7, 5]

slice()

Erzeugt einen neuen Array, welcher einen Teil des Ausgangsarrays enthält. Der erste Parameter gibt dabei den Schlüssel des ersten zu extrahierenden Elementes an, der zweite Parameter den letzten, enthält dieses aber nicht. Wird der zweite Parameter weggelassen, enthält das neue Array die Werte des Ausgangsarrays bis zu dessen Ende.

Beispiele

var Zahlen = new Array(1,2,3,4,5,6);
var neuesArray = Zahlen.slice(2,4); // neuesArray: [3, 4]

var arr1 = new Array(1, 2, 3, 4, 5, 6);
var arr2 = arr1.slice(2); // arr2: [3, 4, 5, 6]

splice()

Ersetzt Werte eines Arrays. Der erste Parameter ist hierbei die Position, vor der neue Werte eingefügt werden. Der zweite Parameter ist die Anzahl der Werte, die vorher entfernt werden, beginnend an der mit dem ersten Parameter angegebenen Position. Die darauffolgenden Werte sind die einzusetzenden Werte.

Beispiel

var woerter = new Array("Wikipedia", "Wikibooks", "Kommas", "Closedsource", "Wiktionary");
woerter.splice(2,2, "Commons", "Wikisource");
// woerter: ["Wikipedia", "Wikibooks", "Commons", "Wikisource", "Wiktionary"]

sort()

Sortiert ein Array nach dem Alphabet. Zahlenwerte werden dabei wie Zeichenketten interpretiert. Dies bedeutet, dass beim Sortieren "17" vor "7" kommen würde.

Beispiel

var zahlen = new Array(1,2,3,17,22);
zahlen.sort(); // zahlen: 1,17,2,22,3

Benötigt man eine benutzerdefinierte Sortierung, kann man eine eigene Sortierfunktion schreiben, welche als Attribut mitgegeben wird.

zahlen.sort(function(a, b){
    // ...
});

Eine Sortierfunktion hat zwei Attribute, in welchen zwei Elemente des Array übergeben werden.

Gibt die Funktion eine Zahl kleiner als 0 zurück wird das erste Element (a) vor dem zweiten Element (b) gereiht.

Gibt die Funktion einer Zahl größer als 0 zurück wird das zweite Element (b) vor dem ersten Element (a) gereiht.

Gibt die Funktion 0 zurück, sind die zwei übergebenen Werte gleichwertig und werden nicht vertauscht.

Numerische Sortierung

var arr1 = [1, 12, 34, 2, 22, 100];
function numericalSort(a, b) {
    return a - b;
}
arr1.sort(numericalSort);
// arr1: [1, 2, 12, 22, 34, 100]

Möchte man eine verkehrte numerische Sortierung, bei der die größte Zahl am Anfang steht und die kleinste am Ende, müssen nur die Werte in der Sortierfunktion vertauscht werden.

var arr1 = [1, 12, 34, 2, 22, 100];
function numericalSortDesc(a, b) {
    return b - a;
}
arr1.sort(numericalSortDesc);
// arr1: [100, 34, 22, 12, 2, 1]

Zufällige Sortierung

var arr1 = [1, 12, 34, 2, 22, 100];
function randomSort(a, b) {
    return 0.5 - Math.random();
}
arr1.sort(randomSort);

unshift()

Fügt vor dem Array die übergebenen Werte ein und gibt die neue Länge zurück.

Beispiel

var arr1 = new Array(3, 4);
var newLength = arr1.unshift(1, 2); // newLength: 4
// arr1: [1, 2, 3, 4]

Sollte ein Array als Wert übergeben werden, werden nicht die Elemente des Arrays vorne angehängt sondern das Array.

Beispiel

var arr1 = new Array(3, 4);
var arr2 = new Array(1, 2);

var newLength = arr1.unshift(arr2); // newLength: 3
// arr1: [[1, 2], 3, 4]

Aufgaben + Lösungen

• Aufgaben
• Lösungen

<< Das String-Objekt | Event Handling >>

---