Javascript-Arrays
Tipps und Tricks zu Javascript

Array anlegen und Parameter übergeben

Javascript-Arrays

Ein Array wird durch den Aufruf new Array() erstellt. Auf die Felder eines Arrays wird durch Indexnummern zugegriffen. Diese werden in eckigen Klammern ([ und ]) an den Namen des Arrays geschrieben. Das erste Feld trägt den Index 0, das zweite 1, das dritte 2 und so fort. So kann der Inhalt gelesen und geschrieben werden:

a = new Array();
//Array wird erstellt
b = a[27];
// b wird der Inhalt des 28. Feldes des Arrays zugewiesen
a[5] = 'Text';
// dem 6. Feld wird der Inhalt 'Text' zugewiesen


Zusätzlich können Parameter übergeben werden, die das zu erstellende Array definieren. Folgende Parameter sind möglich:

– Zahl: Das Übergeben einer Zahl als Parameter erstellt ein Array mit so vielen Feldern, wie die Zahl groß ist. Maximalgröße ist 32 Bit, also etwas mehr als 4 Milliarden. Null, negative oder Kommazahlen lösen einen Laufzeitfehler aus.

– Werte: Das Übergeben von Werten, zum Beispiel Strings, Variablen oder Zahlen, erstellt ein Array mit so vielen Feldern, wie die Anzahl der Werte beträgt. Die Werte werden der Reihenfolge nach, wie sie übergeben werden, in das Array eingegliedert. Mehrere Werte werden durch ein Komma voneinander getrennt.

Des Weiteren ist es ab Javascript 1.2 auch möglich, ein Array mit Werten nur durch die Zuweisung der Werte zu einer Variablen innerhalb von eckigen Klammern zu erstellen:

a = new Array(3);
//ein Array mit 3 Feldern a[0], a[1] und a[2]

c = ['a','b','c'];
//ein Array mit 3 Feldern c[0] = 'a', c[1] = 'b' und c[2] ='c'


Wird durch Zuweisung ein Feld benannt, das außerhalb des erstellten Bereiches liegt, so wird das Array automatisch auf diese Größe, sprich die Anzahl der Felder gebracht, so dass das Feld das letzte Feld im Array ist:


a = new Array(2);
// Array mit a[0] und a[1]
a[17] = 'Text';
a[18] = new Image()';
//erweitert das Array automatisch bis auf a[18]

Mehrdimensionale Arrays

Javascript-Arrays

Da Arrays an sich ja lediglich eindimensional sind und für manche Zwecke eine Tabellenform unumgänglich sein wird, muss man sich in dieser Hinsicht etwas behelfen. Der Trick heißt: Array im Array. Das Prinzip dabei ist einfach: Man erstellt ein gewöhnliches Array, wobei jeder Eintrag mit einem weiteren Array gefüllt wird. Somit entfernt man sich aus der eindimensionalen Statik und gelangt in ein 2D-Gebilde. Eine kleine Funktion kann uns helfen, derartige Arrays komfortabler zu erstellen:


function Array2D(x,y)
{
this.items = new Array(x);
for(i=0;i this.items[i] = new Array(y);}
}
a = new Array2D(3,3);
a.items[1][1] = 'hallo';
alert(a.items[1][1]);


Wir erstellen hier einfach ein Objekt namens Array2D, das die Eigenschaft items besitzt. Die Eigenschaft selbst ist vom Typ eines mehrdimensionalen Arrays. Zum Erstellen des Objekts werden zwei Werte benötigt, die die Anzahl der Felder in x- beziehungsweise y-Richtung angeben. Der Zugriff kann – wie hier gezeigt – über die Indizes der Eigenschaft erfolgen. Soll aus 2D nun 3D werden braucht die Funktion nur wenige Änderungen:


function Array3D(x,y,z)
{
this.items = new Array(x);
for(i=0;i {
this.items[i] = new Array(y);
for(j=0;j {
this.items[i][j] = new Array(z);
}
}
}
a = new Array3D(3,3,3);
a.items[1][1][1] = 'hallo';
alert(a.items[1][1][1]);


Es braucht also lediglich eine weitere Schleife ergänzt zu werden, die in die 2D-Felder nochmals je ein Array einfügt.

Arrays sortieren

Javascript-Arrays

Für das Sortieren von Daten eignen sich Arrays ganz besonders, vor allem, weil es schon eine vordefinierte Funktion zum Sortieren eines Arrays gibt. Eindimensionale Arrays können leicht über die sort-Methode sortiert werden. Sie sortiert das gegebene Array nach dem Alphabet. Aber Vorsicht: Große Buchstaben kommen vor kleinen Buchstaben. Das folgende Beispiel sortiert also nicht 3, 11, A, a, B, b sondern 11, 3, A, B, a, b was unter Umständen zu Problemen führen könnte:

a = new Array();
a[0] = 'a';
a[1] = 'b';
a[2] = '11';
a[3] = 'A';
a[4] = 'B';
a[5] = '3';
a.sort(); // == 11 3 A B a b

Soll die Sortierung umgestellt werden, kann man sich etwas behelfen. Nach Definition ist es möglich, der sort-Methode eine Funktion zu übergeben, die zwei Parameter erwartet. Nur der Funktionsname wird als Variable übergeben. Bei jedem Sortiervorgang ruft die Methode die definierte Funktion aus und übergibt ihr die zwei zu vergleichenden Werte. Die Funktion kann nun entscheiden, welcher größer, gleich oder kleiner ist und entsprechend einen Wert zurückgeben. Ist der erste Wert kleiner, sollte die Funktion -1, sind sie gleich 0 und ist der zweite Wert kleiner, 1 ausgeben. Das obige Beispiel, richtig, also nach Wertigkeit, sortiert, könnte zum Beispiel so aussehen:


function vergleiche(x,y)
{
//zwei Zahlen
if(isNaN(x) == false && isNaN(y) == false){res = x - y;}
//zahl und string
else if(isNaN(x) == false && isNaN(y) == true){res = -1;}
else if(isNaN(y) == false && isNaN(x) == true){res = 1;}
//zwei strings
else if(x.toLowerCase() < y.toLowerCase()){res = -1;}
else if(y.toLowerCase() < x.toLowerCase()){res = 1;} //zwei gleiche strings
else if(y.toLowerCase() == x.toLowerCase())
{if(x < y){res = -1;}else if(y < x){res = 1;}else{res = 0;}}
else {res = 0;}
return(res)
}

a = new Array();
a[0] = 'a'; a[1] = 'b'; a[2] = '3';
a[3] = 'A'; a[4] = 'B'; a[5] = '11';
a.sort(vergleiche);


2D-Arrays sortieren

Javascript-Arrays

Etwas schwieriger wird es schon bei 2D-Arrays. Nehmen Sie an, jeweils eine y-Zeile wäre ein Datensatz, die alle in eine Reihenfolge gebracht werden sollen. Es ergibt sich zum Beispiel folgendes Gebilde:

Name Personalnummer Bereich
Mustermann, Max 54382 Programmierung
Ausgedacht, August 94362 Webdesign
Gibtsnicht, Gertrud 19623 Marketing

Je nach Verwendungszweck könnten nun zum Beispiel nach Name, Personalnummer oder Bereich sortiert werden. Die einfache sort-Methode liefert hier jedoch keine Erfolg versprechenden Resultate. Wir müssen ihr also wie oben etwas auf die Sprünge helfen. Folgender Code könnte das Problem lösen:


function vergleiche2D(x,y)
{
if(x[0] return(res);
}
function Array2D(x,y)
{
this.items = new Array(x);
for(i=0;i }

a = new Array2D(3,3);
a.items[0][0] = 'Mustermann, Max';
a.items[0][1] = '54382';
a.items[0][2] = 'Programmierung';
a.items[1][0] = 'Ausgedacht, August';
a.items[1][1] = '94362';
a.items[1][2] = 'Webdesign';
a.items[2][0] = 'Gibtsnicht, Gertrud';
a.items[2][1] = '19623';
a.items[2][2] = 'Marketing';
a.items.sort(vergleiche2D);


Obiges Beispiel sortiert die Tabelle nach der ersten, der Namens-Spalte, die Reihenfolge ist also Ausgedacht, August, Gibtsnicht, Gertrud und letztlich Mustermann, Max. Soll nach einem anderen Kriterium sortiert werden, braucht lediglich der Index bei der Funktion vergleiche2D geändert werden. Auch 3D-Sortierungen lassen sich nach diesem Schema durchführen. Hier wäre lediglich eine andere Fragestellung von Nöten: Statt nach dem Inhalt von x[0] wird eben nach dem von x[0][0] gefragt.