Stil mit {stil}

Okt 2007

Arrays in Javascript

Arrays sind zusammengesetzte Datentypen, die mehrere Werte unter einem gemeinsamen Namen speichern und die Werte über einen Index ansprechen. Auf der technischen Ebene haben die Elemente außer der Speicherung in einem Array nichts gemeinsam, auf der logischen Ebene gruppieren Arrays zusammengehörige Elemente, um sie mit einem einzigen Namen anzusprechen und ihre Verwandtschaft hervorzuheben. Jedes Element eines Arrays stellt einen diskreten Datenwert dar und kann dabei von jedem Datentyp sein – Integer, String, Boolean oder wieder ein Array.

Ein Array ähnelt einer Tabelle mit mehreren Spalten und nur einer Zeile in Excel:

+––––––+––––––+––––––+––––––+––––––+
|  0   |   1  |   2  |   3  |   4  |   <---- Index
+––––––+––––––+––––––+––––––+––––––+
| rot  | grün | blau | gelb | grau |   <---- Daten 
+––––––+––––––+––––––+––––––+––––––+

Javascript hat keinen einfachen Datentyp array, stattdessen kann man das Objekt Array und seine Methoden benutzen, um in einer Anwendung mit Arrays zu arbeiten: Array ist der Prototyp für Arrays.

Muster

Es gibt zwei Methoden, um Arrays anzulegen.

Methode 1: Literale Notation

Der Datentyp muss nicht benannt werden. Der Javascript-Interpreter weiß, dass die eckigen Klammern ein Array erzeugen sollen. Die Methode funktioniert in Browsern ab Version 4.

var farben = ["rot", "grün", "blau", "gelb", "grau"];

Methode 2: Array-Konstruktor

Der Unterschied zur ersten Methode ist gering. Runde Klammern ersetzen die eckigen Klammern und der Array-Konstruktor ist explizit aufgeführt.

var farben = new Array("rot", "grün", "blau", "gelb", "grau");

Der Index

Um mit den Werten eines Array zu arbeiten, müssen die Array-Elemente angesprochen werden und nicht das Array selbst. So gehts also nicht

var tiere = new Array('Hund', 'Katze', 'Maus', 'Ratte');

if (tiere == 'Hund') {
   …
}

sondern

var tiere = new Array('Hund', 'Katze', 'Maus', 'Ratte');

if (tiere[0] == 'Hund') {
   …
}

Aber das hier funktioniert bestens:

alert(tiere);               // Ausgabe: Hund,Katze,Maus,Ratte

Numerische Arrays beginnen immer beim Index 0 – Programmierer lieben es, beim Zählen mit 0 zu beginnen – und der Index muss eine ganze Zahl oder ein Name (bei assoziativen Arrays) sein. Das erste Element des Arrays wird mit farben[0], das zweite Element mit farben[1] usw. angesprochen. Der Index muss nicht fortlaufend sein und das Array kann indirekt verlängert werden. Wird dem Array ein Element zugewiesen, dessen Index größer ist als die aktuelle Länge des Arrays, ändert sich die Länge des Arrays.

var farben = new Array("rot", "grün", "blau", "gelb", "grau");
farbe[100] = "schwarz";

alert(typeof.farbe[50]) // Ausgabe: "undefined";
alert(farbe.length)     // Ausgabe:  101

Die Größe des Arrays feststellen

Die Größe des Arrays entwickelt sich automatisch durch die Anzahl der belegten Elemente. Bei numerischen Arrays findet die Eigenschaft length heraus, wieviele Elemente das Array enthält: array.length.

array.length ist also immer eins mehr als der höchste Index. Der sicherste Weg, ein neues Element in ein Array einzubinden ist

var farben = ["rot", "grün", "blau"];
farben[farben.length] = "gelb"; 

Zugriff auf Arrayelemente

Ein Skript kann ein Array auch als leeres Arrays erzeugen, das später vom Programm mit Daten gefüllt wird.

var farben = new Array(); 
// oder
var farben = [];

Der Zugriff auf die Elemente des Arrays erfolgt über den Namen des Arrays und einen Index. Die folgenden Deklarationen initialisieren das Array.

farben[0]  = "rot";  // Initialisiert das Array mit Werten
farben[1]  = "grün";
farben[2]  = "blau";
farben[3]  = "gelb";

Das Zuweisen eines neuen Werts ändert ein Arrayelement:

farben[0]  = "orange";

Da Javascript eine dynamisch typisierte Sprache ist, muss die Anzahl der Elemente eines Arrays bei der Deklaration nicht angegeben werden. Dennoch kann ein optionaler Längenparameter die Anfangsgröße des Arrays festgelegen.

var len = 4;  // belegt den Speicherplatz für 4 Array-Elemente
… 
var farben = new Array(len);

• Ist der Wert für die Länge des Array ein Integer, konvertiert der Konstruktor die Zahl in einen 32-Bit Integer und erzeugt ein Array der Länge len. Das Array enthält keine Elemente, obwohl seine Länge nicht 0 ist.
• Ist der Wert für die Länge des Arrays kein Integer, legt die Deklaration ein Array mit einem Element mit dem Wert "len" und der Länge 1.

Die folgenden Anweisungen sind vollkommen korrekt:

var farben = new Array(5);
farben[10] = "ocker";

Wenn die beiden Anweisungen ausgeführt wurden, enthält das Array 11 Elemente, die bis auf das elfte allesamt undefiniert sind (nie vergessen, dass Arrays immer – und zwar wirklich immer – mit dem nullten Element anfangen). Und die Moral aus der Geschichte? Neue Array-Elemente dürfen auch am Ende des Arrays eingefügt werden und jede Menge Lücken haben.

Mehrdimensionale Arrays

Die Elemente eines Arrays dürfen selber wieder Arrays sein, die wiederum Elemente mit unterschiedlichen Typen enthalten.

var buecher = new Array();

    Titel                      Autor                 Jahr
0   Eine kurze Geschichte      Bryson, Bill          2003
1   Accidental Empires         Cringely, Robert X.   1992
2   Arm und Reich              Diamond, Jared        1997
3   Arm und Reich              Diamond, Jared        1997
4   Arm und Reich              Diamond, Jared        1997

Das hier sind sechs Arrays – fünf innere und ein äußeres

buecher[0] = new Array("Eine kurze Geschichte","Bryson, Bill", 2003);
buecher[1] = new Array("Accidental Empires","Cringely, Robert X.", 1992);
buecher[2] = new Array("Arm und Reich","Diamond, Jared", 1997);

Jedes Element des Arrays bookShell ist ein Array aus drei Elementen. Der Zugriff auf die Zellen des Arrays erfolgt durch eine mehrfache eckige Klammer: buecher[0][0] ("Eine kurze Geschichte") ist das erste Element der ersten Zeile und buecher[1][2] (1992) ist das dritte Element der zweiten Zeile.

Assoziative Arrays

Assoziative Arrays benutzen Namen anstelle des numerischen Index – z.B., um die Lesbarkeit des Programms zu verbessern. Mit jedem neuen Namen wird ein neues Array-Element angelegt. Wenn Namen anstelle der Zahlen zur Adressierung verwendet werden, müssen die Namen in Hochkommas gesetzt werden.

var buch = new Array();
buch["autor"]  = "Bryson, Bill";
buch["titel"]  = "Eine kurze Geschichte von fast allem";
buch["jahr"]   = 2003;

Da Arrays in Javascript Objekte sind (und Objekte Arrays sind …), greift derselbe Mechanismus, mit dem die Eigenschaften von Objekten referiert werden, auf die Eigenschaften von Arrays zu:

buch["autor"] = "Bryson, Bill";   

// oder 

buch.autor    = "Bryson, Bill";

Arrays und for-Anweisungen

Arrays sind nicht zuletzt deswegen so schön, weil man durch sie iterieren kann: Arrays und for-Anweisungen ziehen einander magisch an.

<script type="text/javascript">
var tiere = new Array("Hund", "Katze", "Maus", "Ratte");
for (var i=0; i<tiere.length; i++) {
   if (tiere[i] == "Maus") {
      alert("Uiuiui");
   }
}
</script>

Die for-Anweisung wird durch das Cachen von vip.length schneller:

<script type="text/javascript">
var tiere = new Array("Hund", "Katze", "Maus", "Ratte");
for (var i=0, j=tiere.length; i<j; i++) {
   if (tiere[i] == "Hund") {
      alert("Wuff Wuff");
   }
}
</script>

oder noch eleganter

<script type="text/javascript">
var tiere = new Array("Hund", "Katze", "Maus", "Ratte");
for (var i=0, item; item=tiere[i]; i++) {
   if (tiere[i] == "Hund") {
      alert("Wuff Wuff");
   } 
}
</script>

Das funktioniert allerdings nicht mit booleschen Werten.

Damit die Iteration auch in assoziativen Arrays so bequem funktioniert, gibt es die for … in-Anweisung.

var myToys = new Array();
myToys["Teddy"]    = "Brummbär";
myToys["Computer"] = "iMac";
myToys["Auto"]     = "Ferarri";
myToys["Karten"]   = "Skat";

var text = "";
for (var i in myToys) {
   text += myToys[x] + "\n";
}
alert(text);

Ausgabe:

Ein Array mit der for … in-Anweisung erforschen:

var text = "";
for (var attrib in window) {
   text += "window." + String(attrib) + "\n";
}
alert(text);

Arrays sortieren

Zahlen oder Strings zu sortieren gehört in das Standardrepertoire jedes Programmierers. Dabei sollten Abläufe mit einem wiederholten Verschieben von Elementen immer vermieden werden – viel viel schneller werden Sortieralgorithmen, wenn nur Indizies oder Zeiger verändert werden.

Da Javascript durch und durch objektorientiert ist, resultieren die Verschiebe-Operationen des Sortierens im Grunde genommen nur im Umhängen von Zeigern und bewegen keine großen Datenmengen.

Array-Objekte in Javascript haben bereits eine effiziente .sort-Operation eingebaut. Ohne weiteren Parameter werden die Elemente des Arrays in Strings konvertiert und verglichen.

<script type="text/Javascript">
<!--
window.onload = sortMyArray;

function sortMyArray() {
   var nNames = new Array();
   var body  = document.getElementsByTagName("body")[0];
   var table = document.createElement("table");
   var row   = document.createElement("tr");
   table.appendChild(row);

   nNames[0] = "Schmitz";  nNames[1] = "Meier";
   nNames[2] = "Schulze";  nNames[3] = "Schneider";
   nNames[4] = "Langbaum"; nNames[5] = "Mittenberg";

   nNames.sort();
   for (i=0; i<=5; i++) {
   	var td   = document.createElement("td");
   	td.appendChild(node);
   	row.appendChild(td);
   }
body.appendChild(table);
}
-->
</script>
</head>
<body>

</body>

.sort() sortiert in alphabetischer Reihenfolge. Zahlen werden in Zeichenketten umgewandelt, so dass 27 vor 7 rangiert. Um numerische Werte zu sortieren, muss eine Funktion erzeugt und übergeben werden, die Zahlen vergleicht.

function sortNum(a,b) {
	return a - b; 
}

var arr = new Array('6');
arr [0] = 27;
arr [1] = 511;
arr [2] = 7;
arr [3] = 1024;
arr [4] = 4711;
arr [5] = 0;
alert (arr.sort(sortNum));