Javascript Arrays

Array ähnliche oder gleichartige Elemente unter einem Namen

Javascript Arrays gruppieren zusammengehörige Elemente, um sie mit einem einzigen Namen und einem Index 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 oder let und einen Namen fest. Das Gleichheitszeichen weist 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:

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

Da ist ein Array effizienter:

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

Javascript kennt nur 6 Datentypen (boolean, number, string, null, undefined und object). Arrays stehen nicht auf der Liste, weil Arrays Objekte sind. Der Javascript-Interpreter weiß, dass die eckigen Klammern ein Array erzeugen.

let items = [1, 3, 5, 7, 11];

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.

let 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.

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

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

Anstelle des klassischen for-Loops ist ein forEach für die Iteration eines Arrays eleganter – schon allein, weil wir nicht einmal mehr die Anzahl der Elemente sondieren müssen.

let elements = ["bull.jpg", "rabbit.jpg", "snail.jpg"];

elements.forEach(function(img, index) {
	let i = document.createElement("img");
	i.src = elements[index];
	document.querySelector(".running").appendChild(i);
});

Kurzschrift und Schreibweisen für Arrays

Statt jeden Wert einzeln zu setzen, reicht die Kurzschreibweise.

let 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.

Array definieren

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:

let farbe = [];           // literale Schreibweise
let farbe = new Array();  // Object
let 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.

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

let 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.

let 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.

let 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 oder Anzahl von Elemente eines Arrays

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

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

So ganz einfach ist die Sache mit der Größe des Arrays nicht, denn length gibt einfach den größten Index des Arrays plus 1 zurück. Das klingt heimtückisch, ist aber durchaus effizient, denn das erspart Javascript das Zählen der Elemente.

Der Wert von length kann auch gesetzt werden. Wenn length auf 0 gesetzt wird, ist das Array gelöscht.

let arr = [0, 1, 2, 3, 4]; // 5
console.log ("arr length " + arr.length);

arr[20] = 2;               // 21
console.log ("arr length " + arr.length);

Herausfinden, ob das Objekt ein Array ist

Um herauszufinden, ob ein Objekt ein Array ist, hat EcmaScript 5 eine Sonderlösung ausgeworfen: Array.isArray(obj). isArray gibt true zurück, wenn das Objekt ein Array ist und ansonsten false.

let month = ["Januar", "Februar", "März", "April"];
console.log ("*** ein Array? " + Array.isArray(month));

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