Arrays

Was ist das?

Arrays sind Variablen, in denen man mehrere Werte abspeichern kann. Im Idealfall sind diese alle vom gleichen Typ (z.B. alles entweder Dezimalzahlen, Häuser oder Schüler etc.). Es sind in Javascript aber auch Inhalte verschiedenen Typs möglich.

Wie verwendet man Arrays?

Anlegen

Ein Array legt man wie eine Variable an. Das Array steht im Programm dort, wo auch andere Variablen zu finden sind. Ein Array mit Platz für drei Zahlen kann man wie folgt anlegen:
var Zahlen = new Array(3) ;
Man spricht beim Array dann von Feldern, die belegt werden mit Werten. Das obige Array hat also 3 Felder, welche allerdings noch nicht belegt sind, d.h. es wurden noch keine Werte in den Feldern gespeichert. Die Felder haben alle erst einmal den Wert null, bis das Feld mit einem richtigen Wert belegt wird.
Man kann auch leere Arrays anlegen, deren Felder zu einem späteren Zeitpunkt einzeln erzeugt mit Werten gefüllt werden:
var Zahlen = new Array();

Werte zuweisen, d.h. ins Array eintragen

Wenn jetzt einzelne Werte in den drei Felder geschrieben werden sollen, dann geht das so:
Zahlen[0] = 3;
Zahlen[1] = 7;
Zahlen[2] = 15;
Wie Sie vielleicht bemerkt haben, fangen wir mit dem Zählen im Array bei 0 an. In diesem Array steht also der erste Zahlenwert im Feld 0 - in diesem Fall die 3.

Alternativ kann das obige Array auch einfach wie folgt angelegt werden:
var Zahlen = new Array( 3, 7, 15 );
oder auch so:
var Zahlen = [ 3, 7, 15 ];
Die Anzahl der Elemente wird von Javascript in diesen Fällen automatisch erkannt.

Werte auslesen, d.h. aus dem Array lesen

Wenn Sie Werte aus den Feldern des Arrays lesen und ausgeben möchten, dann geht das z.B. so:
alert("Die erste Zahl im Array lautet: " + Zahlen[0]);
alert("Die zweite Zahl im Array lautet: " + Zahlen[1]);
Sie können natürlich auch alle Zahlen in einer Schleife ausgeben - denn Arrays können manchmal richtig gross sein!
Wie groß ist das Array? Entweder sehen Sie noch einmal nach, wie viele Speicherplätze Sie beim Anlagen vergeben haben, oder Sie fragen einfach diesen Wert ab.
var laenge = Zahlen.length;

Arrays in einer Wiederholungsanweisung

In einer Wiederholungsanweisung kann man Arrays wesentlich einfacher handhaben als einfache Variablen, denn man kann alle Werte über den gleichen Namen und einen einfachen Zähler ausgeben:
for( var i=0 ; i < Zahlen.length ; i++ )
{
  alert(Zahlen[i]);
}
Sie können auch Werte in einer Schleife in das Array schreiben, z.B. die Zahlen 1-10:
for( var i=0 ; i < 10 ; i++ )
{
  Zahlen[i] = i+1;
}

Beispiel einer Verknüpfung von Array anlegen, Wertzuweisung und Auslesen

Der folgende Quelltext zeigt die Kombination der zuvor beschriebenen Funktionalitäten Array anlegen, Werte zuweisen und Werte auslesen:
    var count=10;
    // Hier wird Platz geschaffen für so viele Elemente
    // wie in count festgelegt wurde!
    var Zahlen = new Array(count) ;
 
    // Den Inhalten der "Fächer" 5, 6 und 7 des Arrays
    // werden Werte zugewiesen.
    Zahlen[4] = 3;
    Zahlen[5] = 7;
    Zahlen[6] = 15;
 
    // Die Werte aller "Fächer" des Arrays werden ausgegeben.
    for( var i=0; i<count; i++ )
    {
      document.write( "Zahl im Array-Element Nr."
                    + i
                    + " lautet: "
                    + Zahlen[i]
                    + "<br>");
    }
 

Zeichenketten kopieren

Der folgende Quelltext zeigt Möglichkeiten, Arrays zu kopieren:
    // Schueler-Array
    var schueler = new Array( "Peter", "Mona", "Harry" );
 
    // Einfache Kopie
    function simple()
    {
      // Leeres Array
      var kopie1 = new Array();
 
      kopie1 = schueler;
      alert( "1: " + kopie1 );
    }
 
    // Kopie mit Möglichkeit der Manipulation einzelner Werte
    function manipulate()
    {
      // Leeres Array
      var kopie2 = new Array();
 
      for( var x=0; x<schueler.length; x++ )
      {
        kopie2[x] = schueler[x];
      }
      alert( "2: " + kopie2 );
    }
 
    // Kopie mit Umsortieren von hinten nach vorne
    function orderbackwards()
    {
      // Leeres Array
      var kopie3 = new Array();
 
      for( var x=schueler.length-1, y=0
         ; x>=0
         ; x--, y++ )
      {
        kopie3[y] = schueler[x];
        alert( "kopie[y] = schueler[x] --- kopie[y] y:"
             +  y + " schueler[x] x:" + x );
      }
      alert( "3: " + kopie3 );
    }
 
    simple();
    manipulate();
    orderbackwards();

Zeichenketten zerlegen

Die Eingabe von Zeichenketten in ein Javascript-Programm erfolgt über ein Formular oder über prompt. Falls man über eine Zeile mehrere Werte in ein Array eingeben möchte, dann benötigt man zur Trennung der einzelnen Werte die Javascript-Methode split.
// verkürzte Eingabe  ;-)
var zeichenkette = "2,3,5,7,11,13,15";
 
// Methode zum Auftrennen der obigen Zeichenkette in einzelne Zahlen in einem Array
var zahlen = zeichenkette.split (',');
 
// Ausgabe
// Schreiben Sie selbst ein paar Zeilen zum Ausgeben der eingelesenen
// Zahlen entsprechend der in den letzten Kapiteln gezeigten Möglichkeiten,
// d.h. Verwendung von length und for-Schleife

Einlesen von Zeichenketten aus Formularen

Ein Formularfeld fügen Sie Ihrem HTML-Code hinzu:
 <form name="Ausschluss" action="" onsubmit="">
        <input type="text" size="100" name="FehlendeSchueler">
 </form>
Den Wert des Feldes können Sie so auslesen:
var eingabe;
eingabe = document.Ausschluss.FehlendeSchueler.value;

Beispiel

Die einzelnen Felder des folgenden Arrays sollen nacheinander in einer Schleife ausgegeben werden.
var Zahlen = new Array( 0,1,2,3,66,4,5,66,7,8,9,10,11,66,12,13,89 );
     var Zahlen = new Array( 0,1,2,3,66,4,5,66,7,8,9,10,11,66,12,13,89 );
 
     // Der folgende Quelltext ist umständlich
     // sobald die Zahlenmenge groß wird,
     // aber natürlich kann ich erst einmal
     // zum Ausprobieren die einzelnen Elemente
     // wie folgt ausgeben:
     document.write( Zahlen[0] );
     document.write( Zahlen[1] );
     document.write( Zahlen[2] );
     document.write( Zahlen[3] );
     document.write( Zahlen[4] );
     // usw.
 
     // Absatz einfuegen und bitte die Loesung in der Schleife!
     document.write( "<p>" );
 
     for( var i=0; i < Zahlen.length; i++ )
     {
       document.write( Zahlen[i] + " " );
     }

Verständnis?

Folgenden Quelltext sollten Sie nun verstehen! Hier sollte der Unterschied zwischen einer einfachen Variable und einem Array klar werden sowie der Zugriff auf einzelne Array-Felder.
    // Eine einfache Variable, d.h. Speicherplatz für  E I N E N  Wert
    var zahl;
 
    // Eine Variable zum Abspeichern mehrerer Werte,
    // d.h. so viele, wie in den runden Klammern stehen
    // Da jetzt alle Werte den gleichen Variablennamen besitzen - nämlich zahlen -
    // muss man auf die gespeicherten Werte im Array über Nummern zugreifen
    var zahlen = new Array(6);  // Inhalte sind also numeriert von 0-5
 
    // Speichern eines Wertes in der einfachen Variable zahl
    zahl = 1;
    // Speichern eines Wertes in einem F E L D des Arrays zahlen.
    // Die Felder sind durchnumeriert von 0-5
    zahlen[0] = 1;
 
    // Ausgabe des Inhalts der einfachen Variable zahl;
    // ergibt eine 1 auf dem Bildschirm
    alert( zahl );
    // Ausgabe des ersten Feldes des Arrays zahlen;
    // ergibt eine 1 auf dem Bildschirm
    alert( zahlen[0] );
 
    // Addition von 4 und 1 (wert aus dem ersten Feld des Arrays zahlen)
    zahl = zahlen[0]+4;
    // Ausgabe des Ergebnisses
    alert( zahl );
 
    // Länge des Arrays ermitteln
    document.write( "Länge: " + zahlen.length + "<br>" );
 
    // Zahlen 3-8 in das Array füllen
    for( var i=0 ; i<zahlen.length ; i=i+1 )
    {
      zahlen[i]=i+3;
    }
 
    // Vollständige Ausgabe des Arrays mit Trennzeichen " "
    for( var j=0; j<zahlen.length ; j++ )
    {
      document.write( zahlen[j] + " " );
    }

Array-Methoden

Die Methoden "length" und "split" haben wir bereits kennen gelernt. Es gibt weitere Methoden, welche die Arbeit beim Programmieren mit Arrays komfortabler machen können, z.B. ...
Methode
Zweck
pop
entfernt das letzte Element eines Arrays und gibt es zurück
push
fügt ein Element dem Array hinzu und gibt es zurück
reverse
kehrt den Inhalt des Arrays um, d.h. tauscht das erste und das letzte Element usw.
slice
extrahiert ein Teil-Array
splice
fügt Elemente an bestimmter Stelle hinzu bzw. löscht diese
sort
sortiert ein Array
Genaueres zur Benutzung dieser und anderer Methoden finden Sie inkl. Beispielen hier:


Passende Aufgabe:

siehe hier: Schülerauswahl

Teillösung: AlleSchueler.html ist ein Script, welches alle Elemente eines Arrays ausgibt.

Tipps & Tricks:

Ausgeben eines Arrays

var namen=new Array("Leonid", "Marcel", "Matthias", "Michelle", "Annika");
 
for( var i=0; i<namen.length; i++ )
{
  document.write( namen[i] + ", " );
}

Ausgeben einer farbigen Tabellenzelle unter einer bestimmten Bedingung

var Zahlen=new Array(23,45,768,45,67,89);
 
...
if( Zahlen[i] > 50 )
{
  document.write("<td class='...'>");
}
else
{
  document.write("<td>");
}
...
 
document.write("<\/td>");



Quellen zur Vertiefung:

Infos zur Funktion split (Zeichenketten in Arrays aufspalten):
Assoziative Arrays: