SELFHTML: JavaScript / Objektreferenz / Array
Description: (SELFHTML 7.0) Das JavaScript-Objekt Array
Keywords: SELFHTML, JavaScript, Objekt, Array-Objekt

SELFHTML/Quickbar JavaScript Objektreferenz

| ## Array
| Allgemeines zur Verwendung Eigenschaften: length (Anzahl Elemente) Methoden: concat() (Arrays verketten) join() (Array in Zeichenkette umwandeln) pop() (letztes Array-Element löschen) push() (neue Array-Elemente anhängen) reverse() (Elementreihenfolge umkehren) shift() (Erstes Array-Element entfernen) slice() (Teil-Array extrahieren) splice() (Elemente löschen und hinzufügen) sort() (Array sortieren) unshift() (Elemente am Array-Anfang einfügen)

## Array: Allgemeines zur Verwendung

Das Objekt `Array` ist als "Container" für Ketten gleichartiger Variablen gedacht. In der Programmierersprache spricht man auch von einem "Vektor". Wenn Sie beispielsweise die 16 Grundfarben speichern wollen, brauchen Sie keine 16 Variablen, sondern ein Array-Objekt, in dem Sie 16 gleichartige Werte (im Beispiel: Farbwerte) speichern können.

### Schema 1 / Beispiel 1:

    Objektname = new Array();
    MeineFrauen = new Array();

### Schema 2 / Beispiel 2:

    Objektname = new Array(Zahl);
    MeineFrauen = new Array(100);

### Schema 3 / Beispiel 3:

    Objektname = new Array(Element0, Element1, ..., element_n);
    MeineFrauen = new Array("Anita","Bettina","Christa","Doris");

### Erläuterung:

Eine Objektinstanz von `Array` speichern Sie in einem selbst vergebenen Objektnamen. Hinter dem Namen folgt ein Istgleichzeichen. Dahinter folgt das reservierte Wort `new` und der Aufruf der Objektfunktion `Array()`.

Benutzen Sie Schema 1, wenn Sie zum Zeitpunkt der Definition noch nicht wissen, wie viele Elemente in dem Variablenvektor gespeichert werden sollen.
Benutzen Sie Schema 2, wenn Sie zum Zeitpunkt der Definition bereits wissen, wie viele Elemente in dem Variablenvektor gespeichert werden sollen. Die Anzahl können Sie der Objektfunktion als Parameter übergeben.
Benutzen Sie Schema 3, um den Variablenvektor gleich mit Anfangswerten vorzubelegen. Bei den Varianten 1 und 2 bleiben die einzelnen Variablen des Variablenvektors leer, bis ihnen im Programmverlauf ein Wert zugewiesen wird.

Nachdem Sie eine Instanz des Array-Objekts erzeugt haben, können Sie dies in Ihrem JavaScript-Code verwenden.

### Beispiel:

    Zahlen = new Array(34,86,167,413);
    var x = Zahlen[1];

### Erläuterung:

Nachdem Sie eine Instanz des Array-Objekts in einem Namen gespeichert haben (im Beispiel der Name `Zahlen`), können Sie wie in der zweiten Zeile gezeigt einzelne Werte innerhalb des Variablenvektors ansprechen. Im Beispiel wird eine gewöhnliche Variable `x` definiert. In dieser Variablen wird der Wert der zweiten Variable des Zahlen-Vektors gespeichert, also 86. Beachten Sie, daß der Zähler bei 0 beginnt, d.h. den ersten Wert im Vektor sprechen Sie im Beispiel mit `Zahlen[0]` an, den zweiten mit `Zahlen[1]` usw.

### Beachten Sie:

Sie können auch mehrdimensionale Arrays erzeugen.

### Beispiel:

    <html><head><title>Test</title>
    <script language="JavaScript">
    a = new Array(4)
    for (i=0; i < a.length; ++i)
     a[i] = new Array(10);
    a[3][1] = "Hallo";
    alert(a[3][1]);
    </script>
    </head><body>
    </body></html>

### Erläuterung:

Das Beispiel definiert zunächst einen Array `a` mit 4 Elementen. Dann wird in einer for-Schleife für jedes dieser Elemente ein neuer Array definiert, wobei für jeden Array 10 leere Elemente erzeugt werden. Anschließend können Sie durch eine Angabe wie `a[3][1]` das zweite Element (1) im vierten Array (3) ansprechen. im Beispiel wird dieses Element mit dem Wert `Hallo` belegt. Zur Kontrolle wird der Wert in einem Meldungsfenster ausgegeben.

## length

Speichert die Anzahl der Elemente in einem Array. Beachten Sie, daß alle JavaScript-Objekte, die eine Eigenschaft `length` besitzen, wie zum Beispiel die Objekte forms oder elements, aus Sicht von JavaScript Arrays darstellen.

### Beispiel:

    <html><head><title>Test</title>
    <script language="JavaScript">
     Zahlen = new Array(1,2,4,8,16,32,64,128,256);
     alert(Zahlen.length + " Zahlen sind definiert");
    </script>
    </head><body>
    </body></html>

### Erläuterung:

Das Beispiel definiert einen Array, bestehend aus 9 Zahlen. Anschließend wird zur Kontrolle ausgegeben, wie viele Elemente der Array enthält.

## concat()

Hängt einen Array an einen anderen an. Erwartet als Parameter den Namen des anzuhängenden Arrays. Gibt den zusammengefügten Array zurück.

### Beispiel:

    <html><head><title>Test</title>
    <script language="JavaScript">
     Zahlen = new Array(1,2,3);
     AndereZahlen = new Array(10,20,30);
     ZahlenGesamt = new Array();
     ZahlenGesamt = Zahlen.concat(AndereZahlen);
     alert(ZahlenGesamt.length);
    </script>
    </head><body>
    </body></html>

### Erläuterung:

Das Beispiel definiert zunächst zwei Arrays `Zahlen` und `AndereZahlen` mit je drei Zahlen und dann einen leeren Array `ZahlenGesamt`. In diesem letzten Array wird anschließend der Rückgabewert von `concat()` gespeichert, wobei die Methode auf den ersten definierten Array `Zahlen` angewendet wird und den zweiten Array `AndereZahlen` an diesen Array anhängt. Zur Kontrolle wird nach der Operation die Gesamtzahl der Elemente von `ZahlenGesamt` ausgegeben. Dieser Array enthält nun die Werte 1,2,3,10,20,30 und hat deshalb also 6 Elemente.

## join()

Verwandelt einen Array in eine Zeichenkette. Erwartet als Parameter ein oder mehrere Trennzeichen, durch das/die die Array-Einträge in der Zeichenkette voneinander getrennt sein sollen.

### Beispiel:

    <html><head><title>Test</title>
    <script language="JavaScript">
     Zahlen = new Array(1,2,4,8,16,32,64,128,256);
     Zahlenkette = Zahlen.join(" ");
     alert(Zahlenkette);
    </script>
    </head><body>
    </body></html>

### Erläuterung:

Das Beispiel definiert einen Array mit 9 Zahlen. Dann wird die Methode `join` auf die Variable `Zahlen` angewendet, in der der Array gespeichert ist. Dabei wird im Beispiel ein Leerzeichen als Parameter übergeben. Der Rückgabewert der Prozedur wird in der Variablen `Zahlenkette` gespeichert. Der Effekt ist, daß in `Zahlenkette` alle definierten Zahlen stehen, und zwar durch Leerzeichen voneinander getrennt. Zur Kontrolle wird das Ergebnis als Meldungsfenster ausgegeben.

## pop()

Entfernt das letzte Element aus einem Array und ändert dadurch die Anzahl der Elemente im Array.

### Beispiel:

    <html><head><title>Test</title>
    <script language="JavaScript">
     Zahlen = new Array(1,2,3,4,5);
     alert(Zahlen.length + " Zahlen im Array");
     function Entfernen()
     {
      Zahlen.pop();
      alert(Zahlen.length + " Zahlen im Array");
     }
    </script>
    </head><body>
    <a href="javascript:Entfernen()">Zahl entfernen</a>
    </body></html>

### Erläuterung:

Das Beispiel definiert beim Einlesen der Datei einen Array `Zahlen` mit 5 Elementen. Zur Kontrolle wird in einem Meldungsfenster die Elementanzahl ausgegeben. Im Dateikörper enthält das Beispiel einen Verweis. Bei jedem Anklicken des Verweises wird die Funktion `Entfernen()` aufgerufen, die mit der `pop()`-Methode jeweils das letzte Element aus dem Zahlen-Array entfernt. Zur Kontrolle wird die neue Länge des Arrays ausgegeben.

## push()

Hängt ein oder mehrere Elemente an das Ende eines Arrays an. Erwartet als Parameter ein oder mehrere anzuhängende Elemente. Gibt das letzte (neueste) Element zurück.

### Beispiel:

    <html><head><title>Test</title>
    </head><body>
    <script language="JavaScript">
     Orte = new Array("Augsburg");
     document.write(Orte.join(",") + '<p>');
     NeuestesElement = Orte.push("Berlin");
     document.write(Orte.join(",") + '<br>');
     document.write('Neu dabei: ' + NeuestesElement + '<p>');
     NeuestesElement = Orte.push("Chemnitz","Dortmund","Essen","Frankfurt");
     document.write(Orte.join(",") + '<br>');
     document.write('Neuestes Element: ' + NeuestesElement);
    </script>
    </body></html>

### Erläuterung:

Das Beispiel erzeugt in einem JavaScript, das im Dateikörper steht, einen Array `Orte`, in dem zunächst nur ein Wert, nämlich `Augsburg`, gespeichert wird. Zur Kontrolle wird der Inhalt mit der write()-Methode in die Datei geschrieben. Anschließend wird dem Array mit der `push()`-Methode ein Element angehängt, nämlich `Berlin`. Der Rückgabewert der Operation wird in der Variablen `NeuestesElement` gespeichert. Zur Kontrolle wird dann der erweiterte Array und der Rückgabewert in die Datei geschrieben. Der Array besteht jetzt aus den Elementen `Augsburg` und `Berlin`. Das neueste Element ist `Berlin`. Dann werden werden nach dem gleichen Schema gleich vier neue Elemente an den Array angehängt. Der Array besteht hinterher aus den zwei bisherigen Städten plus den vier neuen. In der Variablen `NeuestesElement` wird jedoch nur das letzte, neueste Element gespeichert. Im Beispiel ist das `Frankfurt`. Zur Kontrolle werden auch diese Vorgänge in die Datei geschrieben.

## reverse()

Kehrt die Elementreihenfolge innerhalb eines Arrays um. Das erste Element ist hinterher das letzte, das letzte das erste.

### Beispiel:

    <html><head><title>Test</title>
    </head><body>
    <script language="JavaScript">
    var Name = new Array("S","T","E","F","A","N");
    Name.reverse();
    document.write(Name.join(""));
    </script>
    </body></html>

### Erläuterung:

Das Beispiel definiert einen Array `Name`, dessen Elemente aus den einzelnen Buchstaben des Namens Stefan bestehen. Anschließend wird auf diesen Array die Mathoe `reverse()` angewendet. Mit Hilfe der join()-Methode wird der Array mit seiner neuen Elementreihenfolge anschließend so in die Datei geschrieben, daß keine Zeichen zwischen den Elementen stehen (das wird durch die leere Zeichenkette `""` bei `join()` erreicht). Als Effekt erscheint der Name Stefan rückwärts geschrieben in der Datei.

## shift()

Entfernt das erste Element aus einem Array. Die nachfolgenden Elemente rücken entsprechend nach vorne. Das bisher zweite Element wird das neue erste usw. Gibt das entfernte Element zurück.

### Beispiel:

    <html><head><title>Test</title>
    <script language="JavaScript">
     Zahlen = new Array(1,2,3,4,5);
     alert("Erste Zahl im Array: " + Zahlen[0]);
     function Entfernen()
     {
      geloeschtesElement = Zahlen.shift();
      alert("Erste Zahl im Array: " + Zahlen[0]);
     }
    </script>
    </head><body>
    <a href="javascript:Entfernen()">Zahl entfernen</a>
    </body></html>

### Erläuterung:

Das Beispiel definiert beim Einlesen der Datei einen Array `Zahlen` mit 5 Elementen. Zur Kontrolle wird in einem Meldungsfenster der Wert des ersten Elements ausgegeben, im Beispiel `1`. Im Dateikörper enthält das Beispiel einen Verweis. Bei jedem Anklicken des Verweises wird die Funktion `Entfernen()` aufgerufen, die mit der `shift()`-Methode jeweils das erste Element aus dem Zahlen-Array entfernt. Zur Kontrolle wird das neue erste Element ausgegeben.

## slice()

Extrahiert einen Teil aus einem Array. Erwartet als Parameter die Indexnummer des ersten und des letzten zu extrahierenden Elements. Als Indexnummer für das letzte Element kann auch ein negativer Wert übergeben werden. Dies bedeutet so viel wie "das soundsoviele Element von hinten", wobei auch dort bei 0 zu zählen begonnen wird. Ein Wert von -1 bedeutet also das vorletzte Element.
Die Methode gibt die extrahierten Elemente als neuen Array zurück.

### Beispiel:

    <html><head><title>Test</title>
    <script language="JavaScript">
     Zahlen = new Array(1,2,3,4,5);
     for(i = 0; i < Zahlen.length; ++i)
     {
      NeueZahlen = Zahlen.slice(i,Zahlen.length);
      alert(NeueZahlen.join(","));
     }
    </script>
    </head><body>
    </body></html>

### Erläuterung:

Das Beispiel definiert einen Array `Zahlen` mit 5 Elementen. Anschließend ist eine `for`-Schleife notiert. Die Schleife zählt von 0 bis 4. Innerhalb der Schleife wird bei jedem Schleifendurchgaben das Ergebnis von `Zahlen.slice(i,Zahlen.length)` in einem neuen Array namens `NeueZahlen` gespeichert. Der Schleifenzähler `i` ist dabei die Indexnummer des ersten zu extrahierenden Elements. Das letzte zu extrahierende Element wird im Beispiel durch `Zahlen.length` angegeben (was allerdings eigentlich nicht ganz korrekt ist, da die Anzahl der Elemente 1 höher ist als der Index des letzten Elements - Netscape interpretiert es jedoch auf diese Weise korrekt, der MS Internet Explorer 4 interpretiert es dagegen eher wie erwartet. Dort muß man mit `Zahlen.length-1` arbeiten). Durch die Angaben werden alle Elemente von Element `i` bis zum letzten Element extrahiert. Da `i` bei jedem Schleifendurchgang höher wird, werden im Beispiel immer weniger Zahlen extrahiert, und zwar immer die hinteren des Arrays.

## splice()

Fügt ein oder mehrere neue Elemente in einen Array ein, und zwar an einer bestimmten gewünschten Stelle. Überschreibt dabei vorhandene Elemente. Erwartet folgende Parameter:
1. Startindex = Indexnummer im Array, an der das oder die neuen Elemente eingefügt werden sollen.
2. Anzahl = Anzahl der einzufügenden Elemente.
3.[4...] Element[e] = neue Elemente.
Der 3. und die folgenden Parameter sind optional. Wenn Sie nur die ersten beiden Parameter angeben, werden leere Elemente eingefügt.

### Beispiel:

    <html><head><title>Test</title>
    <script language="JavaScript">
     Zahlen = new Array(1,2,3);
     Zahlen.splice(1,3,4,5,6);
     alert(Zahlen.join(","));
    </script>
    </head><body>
    </body></html>

### Erläuterung:

Das Beispiel definiert einen Array `Zahlen`, bestehend aus 5 Elementen mit den Zahlen 1 bis 3. Anschließend wird auf diesen Array die `splice()`-Methode angewendet, und zwar so: an Indexnummer 1, also bei der 2. Zahl im Array, werden 3 neue Elemente eingefügt, nämlich die Elemente mit den Werten 4, 5 und 6. Die ehemaligen Elemente mit den Werten 2 und 3 werden dabei mit den Werten 4 und 5 überschrieben. Das Element mit dem Wert 6 kommt neu hinzu. Hinterher enthält der Array also 4 Elemente mit folgenden Werten: 1,4,5,6.

## sort()

Sortiert die Elemente eines Arrays. Wenn Sie keinen Parameter übergeben, wird lexikalisch sortiert, numerische Werte werden also intern in Zeichenketten verwandelt und wie Zeichenketten sortiert. Dabei kommt beispielsweise die Zahl 13 vor der Zahl 7, weil "13" als Zeichenkette lexikalisch vor "7" kommt. Wenn Sie numerische Werte sortieren wollen, können Sie eine Vergleichsfunktion definieren und deren Namen als Parameter übergeben.

### Beispiel:

    <html><head><title>Test</title>
    <script language="JavaScript">
    </script>
    </head><body>
    <script language="JavaScript">
    function Numsort(a,b)
    { return a-b; }

    Namen = new Array("Ina","Bettina","Tina","Martina");
    Namen.sort();
    Zahlen = new Array(27,2,10,4);
    Zahlen.sort(Numsort);
    Namenausgabe = Namen.join(",");
    Zahlenausgabe = Zahlen.join(",");
    document.write("sortierte Namen: " + Namenausgabe + "<br>");
    document.write("sortierte Zahlen: " + Zahlenausgabe);
    </script>
    </body></html>

### Erläuterung:

Das Beispiel zeigt, wie Sie Zeichenketten und numerische Werte sortieren können. Im Beispiel wird ein Array `Namen` definiert, dessen Elemente Zeichenketten darstellen. Um einen solchen Array zu sortieren, genügt es, die Methode `sort()` einfach auf den Array anzuwenden. Die Elemente des Arrays werden dann neu angeordnet, nämlich lexikalisch aufsteigend sortiert. Um Zahlen zu sortieren brauchen Sie eine einfache Vergleichsfunktion. Sie können dazu die im Beispiel definierte Funktion `Numsort()` verwenden. Das Beispiel definiert einen Array `Zahlen` und wendet die `sort()`-Methode auf diesen Array so an, daß der Funktionsname `Numsort` als Parameter übergeben wird. Dadurch werden die Elemente des Arrays numerisch sortiert.
Wenn Sie eine umgekehrte Sortierreihenfolge wünschen, wenden Sie nach der `sort()`-Methode die reverse()-Methode an.

## unshift()

Fügt am Anfang eines Arrays ein oder mehrere neue Elemente ein. Erwartet als Parameter die einzufügenden Elemente. Gibt die neue Elementzahl des Arrays zurück.

### Beispiel:

    <html><head><title>Test</title>
    <script language="JavaScript">
    Zahlen = new Array(5,6,7,8,9);
    NeueAnzahl = Zahlen.unshift(1,2,3,4);
    alert(NeueAnzahl);
    alert(Zahlen.join(","));
    </script>
    </head><body>
    </body></html>

### Erläuterung:

Das Beispiel definiert einen Array `Zahlen` mit 5 Elementen, nämlich den Zahlen von 5 bis 9. Anschließend werden dem Array mit Hilfe der `unshift()`-Methode am Anfang 4 neue Zahlen hinzugefügt, nämlich die Zahlen von 1 bis 4. Der Rückgabewert der Operation wird in der Variablen `NeueAnzahl` gespeichert. Zur Kontrolle wird anschließend zunächst der Wert von `NeueAnzahl` ausgegeben und danach der komplette neue Array. Die Anzahl der Elemente ist nun 9, und der Array besteht aus den Elementen 1,2,3,4,5,6,7,8,9.

weiter: | Boolean
zurück: | location

SELFHTML/Quickbar JavaScript Objekt-Referenz

© 1998 Stefan Münz, muenz@csi.com