HTMLWorld - HTML, CSS, JavaScript, PHP, Java, Flash und vieles mehrHTMLWorld:   Home | Impressum |
 

 
 

Anzeige 
 
               Forum
 
 

JavaScript - Beispiele: Arrays

von Jan Winkler

Ein Array ist eine beliebig lange Liste von Feldern (meist gleichen Typs). Innerhalb des Arrays können so mehrere Daten unabhängig voneinander gespeichert werden. 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 Array heran geschrieben. Das erste Feld trägt den Index 0 (Null), das zweite 1, das dritte 2 usw. . So kann der Inhalt gelesen und geschrieben werden. Beispiel:

Anzeige

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 definie-ren. Folgende sind möglich:

  • Zahl - das Übergeben einer Zahl als Parameter erstellt ein Array mit so vielen Fel-dern, wie die Zahl groß ist. Maximalgröße ist 32 Bit (etwas mehr als 4 Milliarden). Null, negative oder Kommazahlen lösen einen Laufzeitfehler aus.
  • Werte - das Übergeben von Werten (z.B. Strings, Variablen oder Zahlen) erstellt ein Array mit so vielen Feldern, wie die Anzahl der Werte. Die Werte werden der Rei-henfolge nach, wie sie übergeben werden, in das Array eingegliedert. Mehrere Werte werden durch ein Komma (,) voneinander getrennt.

Des Weiteren ist es auch möglich, (ab JavaScript 1.2) ein Array mit Werten nur durch die Zuwei-sung der Werte (zu einer Variablen) innerhalb von eckigen Klammern, zu erstellen. Beispiel:

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

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

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, dass außerhalb des erstellten Bereiches liegt, so wird das Array automatisch auf die Größe (Anzahl der Felder) gebracht, sodass das Feld, dass letzte Feld im Array ist. Beispiel:

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  nach oben

Da Arrays ansich ja lediglich eindimensional sind und für manche Zwecke eine Tabel-lenform unumgänglich sein wird muss man sich in dieser Hinsicht etwas behelfen. Der Trick heißt: Array im Array. Das Prinzip dabei ist ganz einfach: Man erstellt ein ge-wö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 Tabelle eben). Eine kleine Funktion kann uns helfen derartige Arrays komfortabler zu erstellen:

function Array2D(x,y)
{
 this.items = new Array(x);
 for(i=0;i<y;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 be-sitzt. Die Eigenschaft selbst ist vom Typ eines mehrdimensinalen Arrays. Zum Erstellen des Objekts werden 2 Werte benötigt, die die Anzahl der Felder in x- bzw. y-Richtung angeben. Der Zugriff kann - wie hier gezeigt - über die Index 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<y;i++)
 {
  this.items[i] = new Array(y);
  for(j=0;j<z;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 eingefügt werden, die in die 2D Felder nochmals je ein Array einfügt.

Arrays sortieren  nach oben

Für das Sortieren von Daten eigenen 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 er-wartet (nur der Funktionsname wird als Variable übergeben). Bei jedem Sortiervorgang ruft die Methode die definierte Funktion aus und übergibt ihr die zwei zu vergleichen-den Werte. Die Funktion kann nun entscheiden welcher größer, gleich oder kleiner ist und entsprechend einen Wert zurück geben. Ist der erste Wert kleiner sollte die Funkti-on -1, sind sie gleich 0 und ist der zweite Wert kleiner 1 ausgeben. Das obige Beispiel richtig (nach Wertigkeit) sortiert könnte z.B. 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);

... ergibt die Reihenfolge 3, 11, A, a, B, b.
Etwas schwieriger wird es da schon bei 2D-Arrays. Nehmen wir an, jeweils eine y-Zeile wäre ein Datensatz die alle in eine Reihenfolge gebracht werden sollen. Es ergibt sich z.B. folgendes Gebilde:

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

Je nach Verwendungszweck könnten nun z.B. nach Name, Personalnummer oder Be-reich sortiert werden. Die einfache sort-Methode liefert hier jedoch keine erfolgver-sprechenden 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]<y[0]){res=-1} else if(y[0]<x[0]){res=1} else{res=0}
 return(res);
}

function Array2D(x,y)
{
 this.items = new Array(x);
 for(i=0;i<y;i++){this.items[i] = new Array(y);}
}

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 (Namens-)Spalte, die Reihenfolge ist also "Ausgedacht, August", "Gibtsnicht, Gertrud" und letztlich "Mu-stermann, Max". Soll nach einem anderen Kriterium sortiert werden, braucht ledig-lich der Index bei der Funktion vergleiche2D geändert werden.
Auch 3D-Sortierungen lassen sich nach diesem Schema durchführen. Hier wären ledig-lich eine andere Fragestellung von Nöten (statt nach dem Inhalt von x[0] wird eben nach dem von x[0][0] gefragt).



« zurück weiter »
Bewerten

 

JavaScript - Beispiele

.Autor:Jan Winkler.
. Bewertung:
JavaScript - Beispiele: Arrays HTMLWorld
(5/5 bei 1 Votes)
.
. Community: 754 Beiträge im JavaScript - Beispiele Forum .

Navigation

html-Datei in Container nachladen von Piwi
blättern navigation - nicht alle seitenzahlen zeigen von Powell
XML-Datei per Javascript ver- und entschlüsseln?! von Nupsi
getElementById/innerHTML von duff_beer
Brauche dringend Hilfe/Gallery2.3 von Harburger1887
Window Open von javahack
Musik nach bestimmter Zeit abspielen von InsaYn
Merlin erscheint nicht auf der Website von Moijto
Bräuchte Hilfe von jemanden der sich auskennt ;-) von ladehf
Re: php Style über javascript laden nur wie? von TBT
Bannerwechsel mit mehreren Bannern und per Klick von katha126
HTML Referer ändern von nhs
JavaScript Weiterleitung von xmen
Zeitgesteuertes und zufälliges laden verschiedener index.php von Brainflame
Dynamisch erstellten (mit PHP) Checkboxen mit jQuery/AJAX au von Kyfe

zum JavaScript - Beispiele Forum »


 
     
 

Anzeige