Niemals wird die Satire ihr Examen bestehen. In der Jury sitzen ihre Objekte. – Stanislaw Jerzy Lec

Kapitel 13 Objekte und Arrays

Bei OOP (Objektorientierte Programmierung) scheiden sich die Geister – die herrschenden Meinungen schwanken zwischen »die Zukunft der professionellen Webentwicklung« bis hin zu »völlig unnötig«. Wir mischen uns in diese Diskussion nicht ein, denn beide Auffassungen haben etwas für sich. Ja, im professionellen Bereich geht es mittlerweile kaum ohne die OOP, mit der sich Funktionalität wunderbar strukturieren lässt. Aber: Ein Großteil der heutigen JavaScript-Programmierung ist nicht so umfangreich, dass man wirklich OOP bräuchte. Insofern: Wägen Sie Aufwand und Nutzen genau ab.

Doch zurück zum Thema, beziehungsweise zum durchgängigen Anwendungsbeispiel in diesem Kapitel. Historisch gesehen hat die Unterstützung von Arrays in JavaScript eine bewegte Geschichte hinter sich. In ganz alten Versionen waren Arrays nur über Umwege möglich, dann gab es eine Zeit lang herbe Unterschiede zwischen den einzelnen Browsern. Mittlerweile ist die Situation schon besser geworden, doch gerade bei Arrays gibt es so viel praktische Funktionalität, die in JavaScript selbst eigentlich keinen Platz mehr hatte.

Damit sind Arrays ein wunderbares Beispiel, um zu demonstrieren, wie Sie eigene Objekte erstellen können. Wir bauen uns unser eigenes Array-Objekt, das viel zusätzliche Funktionalität aufweist. Ganz nebenbei sehen Sie anhand eines praktischen Beispiels diverse OOP-Features von JavaScript. Zunächst lernen Sie auch einige der fortgeschritteneren Array-Funktionen kennen.

13.1 Array-Erweiterungen 

Wie bereits erwähnt wurde, kann man folgendermaßen eine Instanz eines Arrays erstellen:

var a = new Array();

Werden Parameter übergeben, so wird das Array vorausgefüllt:

var a = new Array(1, 2, 3, "abc");

In neueren JavaScript-Versionen kann ein Array auch so initialisiert werden:

var a = [1, 2, 3, "abc"];

In der Eigenschaft length des Arrays wird die Anzahl der Elemente festgesetzt. Verringert man beispielsweise diese Eigenschaft, so werden die letzten Elemente des Arrays dementsprechend gelöscht. An sich hat ein Array aber beliebig viele Elemente. Wird ein zu großer Index für ein Element verwendet, so wird length dementsprechend angepasst. Nach den folgenden beiden Zeilen ist a.length gleich fünf:

var a = new Array(1, 2, 3);
a[4] = 42;

13.1.1 Einfügen, nicht anfügen 

In der JavaScript-Version 1.0 waren die Arrays eher unflexibel. Der Programmierer konnte am Ende Daten anfügen und (durch Setzen der length-Eigenschaft) hinten Daten löschen, aber ein Einfügen von Daten in der Mitte beispielsweise gestaltete sich zunächst etwas schwierig. Man musste hier einen etwas umständlichen Weg gehen: Das Array musste zuerst vergrößert werden (am besten, indem die length-Eigenschaft um eins erhöht wird), dann mussten alle Daten ab der Einfügestelle um eins nach hinten kopiert werden. Abschließend wurden die neuen Daten an die entsprechende Stelle im Array gesetzt. Die folgende Funktion bietet diese Funktionalität; als Parameter müssen das Array, die Einfügestelle¹  und die Daten übergeben werden. Die Funktion gibt das modifizierte Array zurück:

function einfuegen(_array, _position, _datum) {
   _array.length ++;
   for (var i = _array.length – 1; i >= position; i--) {
      _array[i+1] = _array[i];
   }
   _array[_position] = _datum;
   return _array;
}

13.1.2 Anfügen und löschen 

Auch mit den neueren JavaScript-Versionen ist es nicht möglich, direkt mitten in einem Array Elemente einzufügen. Jedoch gibt es neue Methoden, mit denen Elemente bequem an ein Array angehängt oder aus ihm gelöscht werden können. Wenn wir Karten mischen, werden diese Methoden noch einmal interessant werden.

Eine komplette Auflistung der Methoden finden Sie in der Referenz. Exemplarisch werden hier nur die Funktionen vorgestellt, die für das Beispiel von Bedeutung sein werden. Die folgenden Methoden sind alle seit JavaScript 1.2 möglich und sind (im Gegensatz zur Funktion einfuegen() oben) alle Methoden des Array-Objekts.

Microsoft hat an dieser Stelle übrigens eine Zeit lang geschlafen: Die neuen Funktionen sind – sofern nicht anders vermerkt – erst ab Internet Explorer 5.5 in der JScript-Implementierung enthalten. Wenn Sie also auf diese Funktionalitäten Wert legen, sollten Sie das Kapitel bis zum Ende durchlesen, um zu erfahren, wie Sie sie auch auf älteren Browsern implementieren können.

Mit der Methode push() werden Elemente hinten an ein Array angehängt. Die Methode ist dabei in Bezug auf die Anzahl der übergebenen Parameter flexibel. Das heißt, es muss zwar mindestens ein Element angegeben werden, es können aber auch zwölf sein.

Das folgende Beispiel erzeugt wieder ein Array mit den Monatsnamen, aber in mehreren Schritten:

var monate = new Array("Januar", "Februar", "März");
monate.push("April", "Mai", "Juni", "Juli", "August");
monate.push("September", "Oktober", "November",
   "Dezember");

Natürlich ist es auch möglich, Elemente aus einem Array zu entfernen. An die Methode push() ist die Methode pop() angelehnt, die das letzte Element aus einem Array entfernt. Viel flexibler ist jedoch die Methode splice(), die Elemente aus einem Array entfernt (diese Methode fehlt übrigens im Internet Explorer). Dieser Methode werden mindestens zwei Parameter übergeben:

Der erste Parameter gibt an, ab welcher Position Elemente entfernt werden sollen (wie immer beginnt die Zählung bei null).

Der zweite Parameter enthält die Anzahl der Array-Elemente, die aus dem Array entfernt werden sollen.

Alle folgenden Parameter werden wie bei push() hinten an das Array angefügt. Diese Parameter sind jedoch optional, es ist also auch möglich, aus einem Array nur Elemente zu entfernen.

Im folgenden Beispiel enthält die Monatsliste einige Fehler, die mit einem einzigen Aufruf von splice() behoben werden:

var a = new Array("Januar", "Februar", "März", "April", "Mai", 
"JavaScript", "JScript", "Juni", "Juli", "August", "September");
//Aufgabe: die Einträge an Position 5 und 6 entfernen
//und die fehlenden Einträge/Monate anhängen
a.splice(5, 2, "Oktober", "November", "Dezember");

13.1.3 Array-Elemente mischen 

Als Anwendungsbeispiel für Arrays wird ein Kartenblatt verwaltet; jedes Array-Element ist eine Karte, die allerdings selbst wieder ein Array ist (mit Kartenname und Kartenfarbe). Zum Mischen der Karten wird ein neues Array erstellt. Ein Element aus dem Array mit den Karten wird zufällig ausgewählt und an ein neues Array angehängt. Abschließend muss die Karte noch aus dem alten Array entfernt werden, damit sie im neuen Array nicht etwa doppelt vorkommt. Der folgende Code ist somit ziemlich selbsterklärend. In Kapitel 24 finden Sie einen ähnlichen Code noch einmal.

//Hilfsvariablen für die Kartenbezeichnungen
var kartenname = new Array();
kartenname[0]="Zwei"; kartenname[1]="Drei";
kartenname[2]="Vier"; kartenname[3]="Fünf";
kartenname[4]="Sechs"; kartenname[5]="Sieben";
kartenname[6]="Acht"; kartenname[7]="Neun";
kartenname[8]="Zehn"; kartenname[9]="Bube";
kartenname[10]="Dame"; kartenname[11]="König";
kartenname[12]="As";
var farben = new Array();
farben[0] = "Herz"; farben[1] = "Karo";
farben[2] = "Pik"; farben[3] = "Kreuz";
//Initialisierung des Karten-Arrays
var cards = new Array();
for (var i=0; i<13; i++)
   for (var j=0; j<4; j++){
      karte = kartenname[j] + " " + farben[i];
      cards.push(karte);
   }
//Mischen
var neu = new Array();
while (cards.length > 0){
   var zufall = Math.floor(Math.random() * cards.length);
   karte = cards[zufall];
   cards.splice(zufall, 1);
   neu.push(karte);
}

13.1.4 Sortieren 

In JavaScript gibt es die Methode sort() für Arrays, die die Elemente eines Arrays alphanumerisch sortiert. Zuvor werden die Array-Elemente alle in Zeichenketten umgewandelt, was zu Problemen führt:

var a = new Array(1, 3, 5, 7, 11).sort();

Nach diesem Aufruf hat a den Wert [1, 11, 3, 5, 7], denn sowohl eins als auch elf beginnen mit einer "1" – und das kommt im ASCII-Alphabet vor der "3". Man kann sich hier jedoch behelfen, indem man eine Sortierfunktion schreibt. Das muss eine Funktion sein, der zwei Parameter übergeben werden können. Diese Funktion gibt dann eine positive Zahl zurück, wenn der erste Parameter gemäß den Sortierkriterien »größer« als der zweite Parameter ist; ist der zweite Parameter der »größere«, wird eine negative Zahl zurückgegeben. Im dritten Fall, wenn die beiden Parameter »gleich groß« sind, muss der Rückgabewert der Funktion 0 betragen.

In unserem Beispiel soll das Kartenblatt sortiert werden, und zwar nach dem Wert der Karten. Hierbei wird folgendermaßen vorgegangen:

Alle Zeichen vor dem Leerzeichen stellen die eigentliche Karte dar (also ohne Farbwert).

In einem Array sind die Kartenwerte abgespeichert.

Von den beiden übergebenen Parametern wird der Array-Index im Kartenwert-Array ermittelt. So kann angegeben werden, welche Karte »größer« ist und welche »kleiner«. Dementsprechend kann der korrekte Wert zurückgegeben werden.

Haben beide Karten denselben Wert, so wird (alphabetisch) nach der Farbe sortiert.

Die folgende Funktion erledigt das und verwendet eine praktische JavaScript-Methode: Zeichenkette.split(Trennzeichen). Die Zeichenkette wird anhand der Trennzeichen aufgeteilt, und die einzelnen Teilstrings werden in einem Array zurückgegeben. Der Aufruf

"1;2;3".split(";");

liefert folgendes Array zurück:

[1, 2, 3]

Nun aber zur Sortierfunktion:

function cardsort(a, b) {
   var kartenname = new Array();
   kartenname[0]="Zwei"; kartenname[1]="Drei";
   kartenname[2]="Vier"; kartenname[3]="Fünf";
   kartenname[4]="Sechs"; kartenname[5]="Sieben";
   kartenname[6]="Acht"; kartenname[7]="Neun";
   kartenname[8]="Zehn"; kartenname[9]="Bube";
   kartenname[10]="Dame"; kartenname[11]="König";
   kartenname[12]="As";
   var wert_a = (a.split(" "))[0];
   var wert_b = (b.split(" "))[0];
   var index_a = –1; var index_b = –1;
   for (var i=0; i<kartenname.length; i++) {
      if (kartenname[i] == wert_a) {
         index_a = i;
      }
      if (kartenname[i] == wert_b) {
         index_b = i;
      }
   }
   if (index_a > index_b) {
      return 1;
   } else if (index_a < index_b) {
      return –1;
   }
   var farbe_a = (a.split(" "))[1];
   var farbe_b = (b.split(" "))[1];
   return (farbe_a > farbe_b) ? 1 : 0;
}

Der Name der Funktion wird dann als Parameter an die sort()-Methode des Arrays übergeben. Beachten Sie, dass hierbei dem Funktionsnamen keine Klammern folgen.

//Hilfsvariablen für die Kartenbezeichnungen
var kartenname = new Array();
kartenname[0]="Zwei"; kartenname[1]="Drei";
kartenname[2]="Vier"; kartenname[3]="Fünf";
kartenname[4]="Sechs"; kartenname[5]="Sieben";
kartenname[6]="Acht"; kartenname[7]="Neun";
kartenname[8]="Zehn"; kartenname[9]="Bube";
kartenname[10]="Dame"; kartenname[11]="König";
kartenname[12]="As";
var farben = new Array();
farben[0] = "Herz"; farben[1] = "Karo";
farben[2] = "Pik"; farben[3] = "Kreuz";
//Initialisierung des Karten-Arrays
var cards = new Array();
for (var i=0; i<13; i++) {
   for (var j=0; j<4; j++){
      karte = kartenname[i] + " " + farben[j];
      cards.push(karte);
   }
}
//Mischen
var neu = new Array();

while (cards.length>0) {
   var zufall = Math.floor(Math.random()*cards.length);
   karte = cards[zufall];
   cards.splice(zufall, 1);
   neu.push(karte);
}
//Sortieren
neu.sort(cardsort);
//Hand ausgeben
document.write(neu.toString());

Mit der Methode toString() wird jedes Objekt, sofern möglich, in eine Zeichenkette umgewandelt. Bei einem Array in JavaScript werden die einzelnen Elemente durch Kommata getrennt ausgegeben.

Beachten Sie, dass in Abbildung 13.1 das Kartenblatt sortiert ist. Wenn Sie im Listing die Zeile neu.sort(cardsort) auskommentieren, erhalten Sie ein vermischtes Blatt (siehe Abbildung 13.2).

Hier klicken, um das Bild zu Vergrößern

Abbildung 13.1     Das gemischte und dann wieder sortierte Array

Hier klicken, um das Bild zu Vergrößern

Abbildung 13.2     Das unsortierte Array