Home / Tutorials / JavaScript Handbuch / Arrays und Hashes


Aufbau und Struktur eines Arrays bzw. eines Hashes
Einen Array initialisieren und Werte zuweisen
Eigenschaften und Methoden
Eine Array spiegeln: reverse
Einen Array umwandeln in eine Zeichenkette: join()
Das erste Element eines Arrays entfernen: shift()
Ein Element einem Array hinzufügen: push()
Das letzte Element eines Arrays entfernen: pop()
Einen Teil aus einem Array rausschneiden: splice()
Einen Teil aus einem Array kopieren: slice()
Element am Anfang des Array einfügen: unshift()
Einen Array sortieren: sort()
asscociative arrays
Einen Hash auslesen: Die Schleife for (i in array_name)
mehrdimensionale Arrays

Aufbau und Struktur eines Arrays bzw. eines Hashes

Arrays kennt man praktisch aus allen Programmiersprachen. Ein Array ist ein grosser Schrank mit, theoretisch, beliebig vielen Schubladen, die wieder selber Schubladen haben können. Wer noch nie programmiert hat, der kann unter Umständen gar nicht einsehen, warum Arrays in der Programmierung die Bedeutung haben, die sie haben, dass man ohne Arrays fast gar nicht programmieren kann. Vielleicht hilft es, wenn man sich klar macht, dass die meisten Strukturen der Realität in Arrays abgebildet werden können, z.B. auch eine komplette Stadt. Eine Adresse vom Typ

infos24 GmbH
Hallandstrasse 2
13189 Berlin

ist ein Array.

Wir haben einen grossen Schrank, nämlich Berlin, in dem grossen Schrank Berlin, gibt es eine Schublade, die Hallandstrasse, da gibt es wiederum eine Schublade, nämlich die Hausnummer 2, und da gibt es wieder eine Schublade,das ist die infos24 GmbH. Wir haben also eine solche Struktur.

[Berlin] [Hallandstrasse][2][infos24 GmbH]
[Berlin] [Hallandstrasse][2][Müller]
[Berlin][Hallandstrasse][4][Maier]
[Berlin][Kurfürstendamm][12]
[Berlin][Kurfürstendamm][22]
[Freiburg][Habsburger Strasse][1]
[Freiburg][Habsburger Strasse][2]
[Freiburg][Krozinger Strasse][12]
[Freiburg][Krozinger Strasse][34]

Die ganze Welt ist also ein ziemlicher Riesenarray, also ein mehrdimensionaler Array. Wenn dem nicht so wäre, hätten wir im Alltag Probleme mit der Orientierung. Praktisch alles, Unternehmen, Schulklassen, Käsesorten lassen sich über Arrays abbilden und werden in der Programmierung über Arrays abgebildet. Mehrdimensionale Array sind hierbei auch in einer Baumstruktur abbildbar. Schaffen wir es, die Struktur, die wir verabeiten wollen, in einen Array zu packen, haben wir meistens schon gewonnen, weil wir dann nach einem einfachen Schema auf jedes X-beliebige Element, die Strasse, die Hausnummer,den Namen punktuell zugreifen können. Wer jetzt immer noch nicht einsieht, wozu das gut sein soll, der kann mal ein einfaches Shop System betrachten indem er hier clickt. Man sieht dann einen Shop, der den gesamten Warenkorb in einem Array hält. Man sieht also, dass man mit Arrays richtig Problem lösen kann. Wer dieses Programm zu intensiverem Studium downloaden will, der muss hier clicken.

Einen Array initialisieren und Werte zuweisen

<script language=javascript>
Obst=new Array("Apfel","Birne","Ananas","Kiwi");
function zeigen()
{
for(i=0;i<Obst.length;i++)
{
alert(Obst[i]);
}
}
</script>

<A href=javascript:zeigen()>hier</A>

Vieleicht sollte man das kleine Program mal auslösen, indem man hier clickt. Wir erhalten vier alert Fenster, die uns den ganzen Obstsalat auf den Schirm setzten, zuerst Apfel, dann Birne, dann Ananas, dann Kiwi. Der Skript als solcher ist fast selbserklärend. Mit
Obst=new Array("Apfel","Birne","Ananas","Kiwi");
Initialisieren wir den Array und weisen ihm Werte zu. Anschliessend lesen wir ihn in einer for Schleife wieder aus. Schleifen werden im Kapitel Schleifen behandeln, prinzipiell kann ist aber der Aufbau einer Schleife sehr einfach zu verstehen.

for(Initialisierung der Laufvariable;Angabe einer Bedingung;Angabe des Inkrementierungsfaktors)
{
....
Anweisungen
....
}

Das einzige was uns wundert, ist die Angabe der Bedingung

Eigenschaften und Methoden

Ein Array ist ein Objekt und hat von daher eine ganze Menge Eigenschaften und Methoden, unter anderem eben length, die Länge, was der Anzahl der Elemente des Arrays entspricht. Man muss jetzt sehen, dass die Anzahl der Elemente eines Arrays nicht mit dem höchsten Index identisch ist, da das erste Element eines Arrays den Wert 0 hat. Die Länge des Arrays beträgt also in diesem Falle 4, das höchste Element der höchste Index, ist aber 3. Der Array hat also folgendes Aussehen.

Obst[0] -> Apfel
Obst[1] -> Birne
Obst[2] -> Ananas
Obst[3] -> Kiwi

JavaScript kennt die meisten Array Funktionen, die auch andere Programmiersprachen kennen, wie z.B. PHP oder Perl kennen. Rein statistisch gesehen, braucht man diese Funktionen in JavaScript seltener, als in Perl oder PHP, weil sie meistens dann gebraucht werden, wenn Daten von der Festplatte gekratzt und dann weiterverarbeitet werden müssen, was ja mit JavaScript nicht geht (das Kratzen von Daten von der Platte). Man braucht aber nicht viel Phantasie, um sich Probleme vorzustellen, die mit diesen Funktionen sehr einfach gelöst werden können. Grundsätzlich erstaunt die Syntax. Da JavaScript eine objektorientierte Programmiersprache ist, die den unbestechlichen Charme hat, genutzt werden zu können, ohne dass man auch nur das geringste von objektorierntierter Programmierung versteht, sind diese Funktionen oder Methoden an ein Objekt gebunden. Man schreibt also array_name.reverse(), array_name.join(), array_name.sort() und so weiter und nicht wie bei einer prozeduralen Sprache reverse(array_name), join("",array_name) und so weiter. Von dieser kleinen Kleinigkeit mal abgesehen, ist es aber genau das gleiche. Auch wenn man sich manchmal fragen kann, ob und die einzelnen Funktionen in JavaScript nützlich sind, so kann man sie sich auf jeden Fall anschauen. Denn sie tauchen in jeder Programmiersprache auf, die an C angelehnt ist (Perl, PHP, Java etc.). Abgesehen davon, können sie nützlich sein, auch in JavaScript. Die Funktionen braucht man insbesondere dann, wenn die serverseitig arbeitende Programmiersprache aus irgendwelchen Daten einen JavaScript Array produziert hat, der dann clientseitig weiter bearbeitet wird.

eine Array spiegeln: reverse

<script language=javascript>
Obst=new Array("Apfel","Birne","Ananas","Kiwi");
Obst.reverse();
function zeigen2()
{
for(i=0;i<Obst.length;i++)
{
alert(Obst[i]);
}
}
</script>

<A href=javascript:zeigen2()>hier</A>

Wenn man wissen will, was dieser Skript macht, kann man hier clicken. Wie deutlich zu sehen, passiert das gleiche wie im Beispiel zuvor, allerdings hat sich die Reihenfolge der Obstsorten geändert. Der Kiwi kommt jetzt zuerst.

Einen Array umwandeln in eine Zeichenkette: join()

Mit join("was das aneinanderklebt") kann man die Elemente eines Arrays zu einer grossen Zeichenkette zusammenschrauben.

<script language=javascript>
Obst=new Array("Apfel","Birne","Ananas","Kiwi");
obst=Obst.join("und");
function zeigen2()
{
alert(obst);
}
</script>

<A href=javascript:zeigen3()>hier</A>

Wer sehen will, was passiert, muss hier clicken. Wir sehen also, dass alle Elemente des Arrays Obst zu einer Zeichenkette verbunden wurde, wobei "und" als Bindeglied fungiert. Wundern können wir uns höchstens darüber, dass der Array Obst heisst und die Variable, in der die Zeichenkette abgespeichert wurde obst. Wir entnehmen daraus, dass JavaScript, wie wohl jede Programmiersprache ausser Visual Basic, case sensitive ist, also zwischen Groß- und Kleinschreibung unterscheidet.

Das erste Element eines Arrays entfernen: shift()

Die shift Funktion macht zwar einen unscheinbaren Eindruck, sie entfernt lediglich das erste Element eines Arrays und gibt das entfernte Element zurück, nichtsdestotrotz hat es in Perl eine gewisse Bedeutung, weil es üblich ist, mit dieser Funktion den Zeiger auf das Objekt rauszufischen.

<script language=javascript>
Obst=new Array("Apfel","Birne","Ananas","Kiwi");
erstes_element=Obst.shift();
function zeigen4()
{
alert(erstes_element);
}
</script>

<A href=javascript:zeigen4()>hier</A>

Wer sehen will, was passiert, muss hier clicken. Das erste Element wurde rausgeschnitten und an die Variable erstes_element übergeben. Der Array Obst wurde um das Element Apfel gekürzt.

Ein Element einem Array hinzufügen: push()

Das ist die Funktion, die man wohl im Zusammenhang mit Arrays am haufigsten braucht. Bei einem Warenkorb, der in einem Array gehalten wird, braucht man diese Funktion zum Beispiel, wenn der User noch ein Produkt bestellt.

<script language=javascript>
Obst=new Array("Apfel","Birne","Ananas","Kiwi");
Obst.push("Melone");
obst=Obst.join(" und ");
function aufblenden5()
{
alert(obst);
}
</script>

<A href=javascript:aufblenden5()>hier</A>

Wer sehen will, was passiert, muss hier clicken. Wie deutlich zu erkennen, hat der Array Obst jetzt ein Element mehr, nämlich die Melone.

Das letzte Element eines Arrays entfernen: pop()

Die Funktion pop() ist das Gegenstück zu shift(). Während die Funktion shift() das erste Element eines Arrays entfernt, entfernt die Funktion pop() das letzte Element.

<script language=javascript>
Obst=new Array("Apfel","Birne","Ananas","Kiwi");
letztes_element=Obst.pop();
function zeigen5()
{
alert(letztes_element);
}
</script>

<A href=javascript:zeigen5()>hier</A>

Wer es ausprobieren will, muss hier clicken. Wir sehen, dass Kiwi erscheint, dass also der Variablen letztes_element der Wert Kiwi zugewiesen wurde. Der Array selber wurde um dieses Element gekürzt.

Einen Teil aus einem Array rausschneiden: splice()

splice ist ein Tak komplizierter als pop() oder shift(). Mit splice() kann man aus einem Array ein Stück herausschneiden. Die Funktion erwartet zwei Parameter. Der erste Wert gibt an, ab welchem Element herausgeschnitten wird und der zweite, wieviele Elemente herausgeschnitten wird. Übergibt man z.B. die Werte 2 und 2, bedeutet das, das das 2. und 3. Element herausgeschnitten wird. Der Anfangspunkt zählt also mit. In unserem Apfel, Birne, Ananas, Kiwi Beispiel würde als die Ananas und die Birne herausgeschnitten werden und der Apfel und der Kiwi würden übrigbleiben (Remember der erste Index eines Arrays ist 0).

<script language=javascript>
Obst=new Array("Apfel","Birne","Ananas","Kiwi");
herausgeschnittener_array=Obst.splice(2,2);
string_herausgeschnitten=herausgeschnittener_array.join(" und ");
string_uebriggeblieben=Obst.join(" und ");

function zeigen6()
{
alert("Herausgeschnitten wurde "+string_herausgeschnitten +"\n übriggeblieben ist "+string_uebriggeblieben);
}
</script>

<A href=javascript:zeigen6()>hier</A>

Wer es ausprobieren will, muss hier clicken.
Mit der Funktion splice() können auch herausgeschnittene Elemente durch neue Elemente ersetzt werden.
Das sieht dann so aus.

<script language=javascript>
Obst=new Array("Apfel","Birne","Ananas","Kiwi");
Obst.splice(2,2,"Kartoffel","Erdbeere");
string_neu=Obst.join(" und ");

function zeigen7()
{
alert(string_neu);
}
</script>

<A href=javascript:zeigen7()>hier</A>

Wer es ausprobieren will, muss hier clicken.

Einen Teil aus einem Array kopieren: slice()

Im Gegensatz zur Funktion splice(), die einen Teilbereich tatsächlich rausschneidet, macht die Funktion slice lediglich eine Kopie des herausgeschnittenen Teils, der urprüngliche Array bleibt unverändert. Auch die übergebenen Parameter haben eine andere Bedeutung. Der erste Parameter gibt das erste zu extrahierende Element an, der zweite Parameter gibt an, bis zu welchem Element extrahiert werden soll. Hierbei ist nun zu beachten, dass der zweite Parameter das Element angibt, welches nicht mehr extrahiert werden soll. In unserem Beispiel bedeutet das, dass nur die Ananas noch mitgeschnitten wird, nicht aber der Kiwi. Kiwi ist das dritte Element unseres Array, es ist das Element, das nicht mehr mitgeschnitten wird. Mitgeschnitten wird also nur Birne und Ananas.

<script language=javascript>
Obst=new Array("Apfel","Birne","Ananas","Kiwi");
string_alt=Obst.join(" und ");
array_rausgeschnitten=Obst.slice(1,3);
string_neu=array_rausgeschnitten.join(" und ");

function zeigen8()
{
alert("Der alte Array sieht so aus "+string_alt+"\nder neue Array sieht so aus "+string_neu);
}
</script>

<A href=javascript:zeigen8()>hier</A>

Wer es ausprobieren will, muss hier clicken.

Element am Anfang des Array einfügen: unshift()

Die Funktion push() haben wir schon kennengelernt, sie fügt ein Array Element am Ende des Arrays hinzu. Die Funktion unshift() macht das gleiche, nur am Anfang des Arrays.

<script language=javascript>
Obst=new Array("Apfel","Birne","Ananas","Kiwi");
Obst.unshift("Melone");
obst=Obst.join(" und ");
function aufblenden9()
{
alert(obst);
}
</script>

<A href=javascript:aufblenden9()>hier</A>

Wer sehen will, was passiert, muss hier clicken. Ansonsten ist der Skript selbsterklärend. Wir erhalten Melone,Apfel,... weil die Melone am Anfang des Arrays hinzugefügt wird.

Einen Array sortieren: sort()

Die Elemente eines Arrays kann man auch sortieren, und zwar ziemlich einfach, nämlich so.

<script language=javascript>
Obst=new Array("Apfel","Birne","Ananas","Kiwi");
Obst.sort();
obst=Obst.join(" und ");
function aufblenden11()
{
alert(obst);
}
</script>

<A href=javascript:aufblenden11()>hier</A>

Wer sehen will, was passiert, muss hier clicken. Wir sehen, dass der Array sortiert wurde, raus kommt Ananas,Apfel,Birne,Kiwi. Lustigerweise kann man nicht absteigend sortieren. Wer das braucht, muss halt nochmal reverse() anwenden.

asscociative arrays

JavaScript kennt, wie auch Perl oder PHP, die sogenannten associative arrays, oder hashs. Zumindest in der serverseitigen Programmierung, also z.B. mit Perl oder PHP, hat man es öfters mit Hashs (associative Arrays) zu tun als mit "normalen" Arrays. Wer sich in das oben zum download angebotene Shopprogramm versenkt hat, der hat festegestellt, das dieses den Warenkorb in einem zweidimensionalen Hash hält. Wer ein bisschen seine Phantasie spielen lässt, der stellt sehr schnell fest, dass Hashs nicht behandelt werden können wie Arrays, weil sie ja zwei Elemente, nämlich einen Index und einen Wert haben. Für beide kann man sich interessieren. Bei einem "normalen" Array hingegen interessiert man sich in der Regel nur für den Wert, da der Index, eine Zahl, meistens nicht interessant ist. Schauen wir uns also erstmal an, wie man einen Hash initialisiert, ihm Werte zuweist und diese Werte wieder ausliest.

<script language=javascript>
Obst=new Array();
Obst["Apfel"]="sauer";
Obst["Banane"]="süß";
Obst["Pampelmuse"]="bitter";
Obst["Orange"]="fruchtig";
function aufblenden12()
{
alert(Obst["Apfel"]);
}
</script>

<A href=javascript:aufblenden12()>hier</A>

Wer sehen will, was passiert, muss hier clicken. Wir erhalten "sauer". So weit so einfach. Wenn wir allerdings den ganzen Array auslesen wollen, dann haben wir ein Problem. Bei einem "normalen" Array kann man dies über eine for Schleife machen, bei der eine Laufvariable als Index gesetzt wird, diese läuft dann von 0 bis zum höchsten Element des Arrays.

for(i=0;i<array_name.length;i++)
{
alert(array_name[i]
}

Bei einem Hash haben wir aber als Index keine Zahl und folglich kann es so auch nicht funktionneren. Genau genommen ist es bei einem Hash nicht einmal möglich, die Anzahl der Elemente zu bestimmen. Obst.length liefert uns den Wert 0.

Einen Hash auslesen: Die Schleife for (i in array_name)

Da man also, aus den oben genannten Gründen, einen Hash nicht wie einen "normalen" Array auslesen kann, besitzt JavaScript hierfür eine eigene Schleife.

<script language=javascript>
Obst=new Array();
Obst["Apfel"]="sauer";
Obst["Banane"]="süß";
Obst["Pampelmuse"]="bitter";
Obst["Orange"]="fruchtig";
function aufblenden12()
{
for(i in Obst)
{
alert("Der Name des Schlüssels ist "+i+"\nDer dazugehörige Wert ist "+Obst[i]);
}
}
</script>

<A href=javascript:aufblenden12()>hier</A>

Wer sehen will, was passiert, muss hier clicken. Wir sehen also, dass i der Index ist und Obst[i] der dazugehörige Wert. Die Art und Weise, wie JavaScript Hashs ausliest, ist also vollkommen anders als bei Perl oder PHP. Die dort üblichen speziellen Funktionen wie key(), value(), each() etc. kennt JavaScript nicht, dafür aber die spezielle for Schleife. Die Funktionen push(),splice(),shift(),unshift(),splice(),slice() funktionnieren nicht mit associative Arrays. In der Praxis stellt das aber kein Problem dar, weil man ja auch den Array in einer for Schleife auslesen kann und den Array, den man sich wünscht, neu schreiben kann.

mehrdimensionale Arrays

Wer sich mit dem simplen Shopsystem, welches oben zum download angeboten wird näher beschäftigt, wird festsgestellt haben, dass der Warenkorb in einem zweidimensionalen Array gehalten wird, genau genommen in einem zweidimensionalen ascociative array. Wer seine Phantasie schweifen lässst, wird sehr schnell feststellen, dass sich komplexere Gebilde der Wirklichkeit, Personen und deren Charakteristika, Eigenschaften verschiedener Waren etc. nur über mehrdimensionale Arrays abbilden lassen. Betrachten wir zuerst den einfachen Fall.

<script language=JavaScript>
Persona=new Array;
Persona[0]=new Array("Andrés Ehmann","030-47301390","Diplom Volkswirt / M.A.");
Persona[1]=new Array("Peter Müller","040-3454444","Dipl.Ing");
Persona[2]=new Array("Hans Maier","098-43394844","Dr.med");
function aufblenden16()
{
for (i=0;i<Persona.length;i++)
{
alert("Der Name ist "+Persona[i][0]+"\nTelefon "+Persona[i][1]+"\nBeruf "+Persona[i][2]);
}
}
</script>

<A href=javascript:aufblenden16()>hier</A>

Wer sehen will, was passiert, muss hier clicken. Eine zweite Möglichkeit einen zweidimensionalem Array Werte zuzuweisen, ein Möglichkeit, die wir wählen müssen, wenn wir es mit einem associative Array zu tun haben, sieht so aus.

<script language=JavaScript>
Persona=new Array;
Persona[0]=new Array;
Persona[0][0]="Andres Ehmann";
Persona[0][1]="030-47301390";
Persona[0][2]="Diplom Volkswirt / M.A.";

Persona[1]=new Array;
Persona[1][0]="Peter Müller";
Persona[1][1]="040-3454444";
Persona[1][2]="Dipl.Ing.";

Persona[2]=new Array;
Persona[2][0]="Hans Maier";
Persona[2][1]="040-3454444";
Persona[2][2]="Dr.med";

function aufblenden16()
{
for (i=0;i<Persona.length;i++)
{
alert("Der Name ist "+Persona[i][0]+"\nTelefon "+Persona[i][1]+"\nBeruf "+Persona[i][2]);
}
}
</script>

<A href=javascript:aufblenden16()>hier</A>

Wer sehen will, was passiert, muss hier clicken. Diesen Weg muss man beschreiten, wenn man einem Hash in JavaScript Werte zuweisen will, da JavaScript hier die Möglichkeiten von Perl oder PHP nicht besitzt.

<script language=JavaScript>
Personas=new Array;
Personas["Andres Ehmann"]=new Array;
Personas["Andres Ehmann"][0]="Andres Ehmann";
Personas["Andres Ehmann"][1]="030-47301390";
Personas["Andres Ehmann"][2]="Diplom Volkswirt / M.A.";

Personas["Peter Müller"]=new Array;
Personas["Peter Müller"][0]="Peter Müller";
Personas["Peter Müller"][1]="040-3454444";
Personas["Peter Müller"][2]="Dipl.Ing.";

Personas["Hans Maier"]=new Array;
Personas["Hans Maier"][0]="Hans Maier";
Personas["Hans Maier"][1]="040-3454444";
Personas["Hans Maier"][2]="Dr.med";

function aufblenden18()
{
for (i in Personas)
{
alert("Der Name ist "+i+"\nTelefon "+Personas[i][1]+"\nBeruf "+Personas[i][2]);
}
}
</script>

<A href=javascript:aufblenden18()>hier</A>

Da man die for Schleife zum Auslesen eines hashs nicht nutzen kann, da der Index des Arrays ja keine Zahl ist, stellt JavaScript für diesen Fall eine besondere Variante der for Schleife zur Verfügung, die wir oben abgebildet sehen. Wer sehen will, was passiert, muss hier clicken.

vorhergehendes Kapitel
nächstes Kapitel