Name und Index
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. Der Index beginnt mit 0.
Die Werte eines Arrays werden durch Kommas voneinander getrennt in eckige Klammern gesetzt.
const arr = [ 188, 720, 100, 4711, 18, 20.5 ]
▲ ▲ ▲ ▲ ▲ ▲
│ │ │ │ │ │
0 1 2 3 4 5
Die Werte der Elemente können von einem beliebigen Datentyp oder sogar selber wieder Arrays oder Objekte sein.
const fruit = ["Orange", "Zitrone", "Kirsche"];
Statt also eine Reihe von Variablen anzulegen – z.B. um eine HTML-Tabelle mit Javascript zu erzeugen:
const tr = document.createElement("TR");
const t0 = document.createElement("TD");
const t1 = document.createElement("TD");
const t2 = document.createElement("TD");
const t3 = document.createElement("TD");
Da ist ein Array effizienter:
const tr = document.createElement("TR");
const td = [];
for (let i=0; i<4; i++) {
td[i] = document.createElement("TD");
tr.appendChild(td[i]);
}
Javascript kennt nur acht Datentypen (String, Number, Boolean, Null, Undefined, Symbol (seit ES6), BigInt und Objekte). Arrays stehen nicht auf der Liste, weil Arrays Objekte sind. Der Javascript-Interpreter weiß, dass die eckigen Klammern ein Array erzeugen.
const items = [1, 3, 5, 7, 11];
Kurzschrift und Schreibweisen für Arrays
Statt jeden Wert einzeln zu setzen, reicht die Kurzschreibweise.
const 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.
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); //
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ößenangabe, 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.
const food = ["Pizza", "Nudeln", "Fisch", "Kartoffeln", "Pommes"];
const 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.
const elements = ["bull.jpg", "rabbit.jpg", "lion.jpg"];
elements.forEach(function(image, index) {
const img = document.createElement("img");
img.src = elements[index];
document.querySelector(".running").appendChild(img);
});
for of
Noch einfacher ist der Loop durch ein Array mit for of ohne ein Callback. for of ist in ES6 hinzugestoßen und ersetzt sowohl for in als auch forEach. for of läuft über Arrays, Sets, Strings und Maps (nicht IE11)
for (const elem of elements) {
const img = document.createElement ("IMG");
img.src = elem;
document.querySelector(".running").appendChild(img);
}
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 (). 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));
*** ein Array? true
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.
