CSS, HTML und Javascript mit {stil}

Javascript Arrays

Array sind Gruppen von Elementen unter einem Namen

Javascript Arrays gruppieren zusammengehörige Elemente, um sie mit einem einzigen Namen anzusprechen und ihre Verwandtschaft hervorzuheben.

Arrays sind die Kommoden der Programmiersprachen: Wir füllen die einzelnen Schubladen mit Dingen, die in irgendeiner Weise zusammengehören.

Ein Array ist eine Variable, die mehrere Werte enthalten kann. Statt vier, fünf oder 75 Variablennamen zu definieren, nutzt Javascript den Namen des Arrays und spricht die einzelnen Elemente über ihren Index an.

Eine Variable legen wir durch das Schlüsselwort var und einen Namen fest. Mit dem Gleichheitszeichen weisen wir der Variablen einen Wert zu. Ein Array ist ebenfalls eine einzelne Variable mit einem Namen, nur dass Javascript einem Array eine ganze Reihe von Werten zugewiesen kann.

Statt also eine Reihe von Variablen anzulegen – z.B. um eine HTML-Tabelle mit Javascript zu erzeugen:

var tr = document.createElement("TR");
var t0 = document.createElement("TD");
var t1 = document.createElement("TD");
var t2 = document.createElement("TD");
var t3 = document.createElement("TD");

Da sind Javascript Arrays effizienter:

var tr = document.createElement("TR");
var td = [];
for (var i=0; i<4; i++) {
    td[i] = document.createElement("TD");
    tr.appendChild(td[i]);
}

Der Datentyp Array muss nicht benannt werden. Der Javascript-Interpreter weiß, dass die eckigen Klammern ein Array erzeugen.

Der Array-Index

Die einzelnen Werte werden durch ihren Index angesprochen und können unterschiedlicher Natur sein: Integer, String, Boolean oder wieder ein Array. Der Index beginnt immer bei 0.

var myarray = [];
myarray [0] = "gelb";
myarray [1] = "grün";
myarray [2] = 18;
myarray [3] = false;

Mit derselben Schreibweise liest Javascript die Werte eines Arrays:

console.log (myarray [1]); // gibt "grün" aus

oder gleich aufs Ganze gehen

console.log (myarray); //
"gelb""grün"18falsemyarray[0]myarray[1]myarray[2]myarray[3]

Arrays gibt es in vielen Programmiersprachen. Javascript-Programmierung ohne Arrays ist gar nicht denkbar. Kaum ein Script kommt ohne Arrays aus.

In Javascript brauchen Arrays keine Größe, die Zahl der Plätze im Array muss nicht bei der Definition der Variablen festgelegt werden. Wer von C oder Java kommt: In Wirklichkeit sind Javascript-Arrays Hash-Tabellen und bilden keinen zusammenhängenden Speicher.

Array durchlaufen

Zu den praktischen Seiten von Arrays – neben dem gemeinsamen Namen für alle Elemente – gehört, dass Javascript mit einer for-Schleife über die Elemente des Arrays iterieren kann. Wenn das Array mehr als eine Handvoll Elemente hat, ist die Iteration deutlich effizienter als zahllose Wiederholungen.

var food = ["Pizza", "Nudeln", "Fisch", "Kartoffeln", "Pommes"];
var foodLength = food.length;

for (var i=0; i<foodLength; i++) {
    console.log (food[i]);
    …
}

Kurzschrift und Schreibweisen für Arrays

Statt jeden Wert einzeln zu setzen, reicht die Kurzschreibweise.

var colors = ["grün", "rot", "blau", "schwarz"];

Nach dem letzten Element sollte besser kein Komma folgen – ansonsten könnte das Komma zu einem inkonsistenten Verhalten der Browser führen (ist dahinter noch ein leeres Element oder nicht?).

Javascript hat keinen einfachen Datentyp array, sondern ein Array ist ein Javascript Object – ein zusammengesetzter Datentyp.

Von daher gibt mehrere Methoden, um ein Javascript Array anzulegen: die literale (wörtliche) Schreibweise mit eckigen Klammern (meist genutzt) und den ausdrücklichen Array-Konstruktor mit dem Schlüsselwort new Array (das man aber genauso gut weglassen kann).

Alle Schreibweisen erzeugen dasselbe Array:

var farbe = [];           // literale Schreibweise
var farbe = new Array();  // Object
var farbe = Array();      // Object, new ist nicht erforderlich

Der Unterschied zur literalen Schreibweise ist gering. Runde Klammern ersetzen die eckigen Klammern und der Array-Konstruktor ist explizit aufgeführt.

var myBooks = new Array();
myBooks[0] = "Emma",
myBooks[1] = "Stolz und Vorurteil",
myBooks[2] = "Ab die Post",
myBooks[3] = "Das Parfum"
);
oder abgekürzt:

var myBooks = new Array("Emma", "Stolz und Vorurteil", "Ab die Post", "Das Parfum");

Neben dem kleinen Mehraufwand für ein paar Buchstaben hat die Constructor-Syntax allerdings weitere Nachteile.

Literale Schreibweise oder Objekt?

Wann sollte man besser ein literales Array und wann ein einfaches Array-Objekt einsetzen?

Ein Array hat eine vordefinierte Eigenschaft length, einfache Objekte hingegen hat keine derartige Eigenschaft. »Echte« Arrays erweitern das simple Array-Objekt um praktische Eigenschaften wie length, haben einen numerischen Index und Methoden wie push() und pop().

Wenn die Reihenfolge der Elemente eine Rolle spielt, ist immer ein literales Array angebracht.

Wenn die Ordnung nicht wichtig ist, bietet ein Array-Objekt einen schnellen Zugriff auf key / value-Paare.

var myPlaces = Array();
myPlaces ['A'] = "Aachen";
myPlaces ['B'] = "Berlin";
myPlaces ['C'] = "Dortmund";
console.log('Lieblingsorte ' + myPlaces.length); // gibt 0 zurück

Ein Array-Objekt kann mit einer bestimmten Länge angelegt werden.

var myBooks = Array(4)

Diese Array hat vier Plätze. Eine Beschränkung gibt es im Grunde genommen nicht. Wenn ein Element auf Platz 5 hinzukommt, reicht myBooks[5] = "Der Schwarm". Wollen wir ein Element auf Platz 100, schreiben wir myBooks[100] = "Literaturgeschichte".

Die Schreibweise ist verwirrend? Array-Objekte werden mit runden Klammern angelegt, die Elemente mit eckigen Klammern aufgerufen.

Da aber Javascript-Arrays bei der Erzeugung keinen Speicher im Voraus belegen müssen, und die Länge jederzeit ausgedehnt werden kann, bringt diese Option der Array-Objekte nur einen zweifelhaften Vorteil.

Die Größe oder Länge von Arrays

Weil Arrays Objekte sind, gibt es Informationen zum Array – Properties. Meistens interessiert uns die Größe oder Zahl der Elemente des Arrays.

 
var farbe = ["rot", "gelb", "grün", "blau", "ocker", "orange", "lila"];
var length = farbe.length;

Methoden für Javascript-Arrays

Methoden ist die Bezeichnung für Funktionen, die zu einem Objekt gehören. Methoden von Objekten werden mit dem Namen des Objekts (gefolgt von einem Punkt gefolgt vom Namen der Methode) aufgerufen.

Die vorgefertigten Methoden für Javascript erledigen die typischen wiederkehrenden Arbeiten mit Arrays.

farbe.reverse();

reverse() dreht die Reihenfolge der Elemente im Array um.

elem.getElementsByTagName und elem.children sind bekannte Methoden des DOM, die ein Array zurückgeben und denen wir in unzähligen Scripts begegnen.

push(), pop(), shift() und mehr: Elemente hinter das letzte Element einfügen, das letzte Element entfernen, mehrere Arrays aneinander hängen oder die Elemente eines Arrays in Strings umwandeln: Das sind praktische Methoden, auch wenn sie nicht in jedem Script für Arrays verwendet werden.

  • push
  • pop
  • shift
  • slice
  • splice
  • sort
  • unshift
  • reverse
  • concat
  • join
  • forEach
  • every
  • some
  • map
  • filter
Die Methoden des Arrays erweitern das einfache Objekt.
ARRAYS javascript