JavaScript Arrays: Erstellen, Zugreifen, Ändern, Iterieren

Ein Array ist eine geordnete Liste

Ein JavaScript Array speichert eine geordnete Folge von Werten. Die Werte können beliebige Typen haben – Zahlen, Strings, Objekte oder sogar weitere Arrays – und sie müssen auch nicht alle vom selben Typ sein. Ein Array in JavaScript erstellen geht ganz einfach mit eckigen Klammern:

Diese Literal-Schreibweise wirst du in 99 % der Fälle nutzen, um ein Array in JavaScript zu erstellen. Es gibt zwar auch new Array(...), aber Vorsicht, hier lauert eine Falle: new Array(3) erzeugt ein Array mit Länge 3 ohne tatsächliche Elemente – eben nicht [3]. Bleib bei [].

Indizierung beginnt bei Null

Auf Elemente greifst du per Position zu, und zwar beginnend bei 0:

Zwei Dinge solltest du dir merken. Erstens: Wenn du über das Ende eines JavaScript Arrays hinaus zugreifst, wirft das keinen Fehler – du bekommst einfach undefined zurück. Genau daher kommen viele dieser klassischen „warum ist das jetzt undefined?"-Bugs. Zweitens kannst du jedem beliebigen Index einen Wert zuweisen, auch einem, der weit hinter dem aktuellen Ende liegt – JavaScript vergrößert das Array dann klaglos:

Die Positionen 3 und 4 werden zu „leeren Slots" (sparse holes). Die length springt auf 6. Genau das willst du in der Regel nicht – es ist eher ein Nebeneffekt der flexiblen Natur von Arrays als ein Feature, auf das du dich stützen solltest.

javascript array length ist immer aktuell

array.length ist stets um eins höher als der größte Index. Der Wert aktualisiert sich automatisch, sobald du Elemente hinzufügst oder entfernst:

Dieser letzte Kniff ist Gold wert: Wenn du length überschreibst, kürzt du das Array. Mit nums.length = 0 leerst du es blitzschnell an Ort und Stelle.

push, pop, shift, unshift

Vier Methoden, um Elemente an den Enden hinzuzufügen oder zu entfernen:

• push(x) hängt ein Element am Ende an und gibt die neue Länge zurück.
• pop() entfernt das letzte Element und gibt es zurück.
• unshift(x) fügt am Anfang ein.
• shift() entfernt das erste Element.

push und pop sind schnell. shift und unshift müssen dagegen alle übrigen Elemente neu durchindizieren und sind deshalb bei großen Arrays langsamer — für Alltagsgrößen völlig okay, aber gut zu wissen, sobald du mit Millionen von Einträgen hantierst.

slice vs splice in JavaScript

Die beiden Methoden klingen fast gleich, verhalten sich aber komplett unterschiedlich. Wenn du den Unterschied einmal verinnerlicht hast, ersparst du dir später viel Kopfzerbrechen.

slice(start, end) liefert eine Kopie eines Ausschnitts des Arrays zurück. Das Original bleibt unangetastet. end ist dabei exklusiv, also nicht enthalten:

splice(start, deleteCount, ...items) verändert das Array direkt. Damit kannst du Elemente löschen, einfügen oder beides gleichzeitig – zurück bekommst du das, was entfernt wurde:

Merkhilfe: Wenn du beim Wort an eine Scheibe vom Brot denkst, die du dir abschneidest, dann ist das slice. Wenn du an das Spleißen von Filmrollen denkst (rausschneiden und einfügen), dann ist das splice.

Elemente in einem Array suchen: indexOf, includes, find

Drei Wege, um etwas in einem JavaScript-Array zu finden – je nachdem, was du gerade brauchst:

• indexOf(x) liefert dir die Position – oder -1, falls das Element nicht vorhanden ist. Praktisch, wenn du den Index brauchst.
• includes(x) gibt einen Boolean zurück. Sauberer, wenn du einfach nur wissen willst: „Ist das drin?" Außerdem geht die Methode korrekt mit NaN um, was indexOf nicht tut.
• find(predicate) führt eine Funktion für jedes Element aus und gibt das erste zurück, das passt. Das ist die richtige Wahl für Arrays aus Objekten, wo indexOf und includes nur auf strikte Gleichheit prüfen.

JavaScript Array durchlaufen

Es gibt mehrere gute Varianten, je nach Situation:

for...of ist die naturliche Wahl – gut lesbar, funktioniert mit jedem iterierbaren Objekt und liefert dir den Wert direkt. forEach ist praktisch, wenn du zusätzlich den Index brauchst und die Schleife nicht vorzeitig abbrechen willst (aus forEach kannst du nämlich nicht mit break aussteigen). Die klassische for-Schleife mit Zähler ist zwar etwas geschwätzig, gibt dir aber die volle Kontrolle – ideal, wenn du Elemente überspringen, rückwärts laufen oder beides kombinieren musst.

Eine Schleife solltest du meiden: for...in. Sie läuft über Schlüssel und zieht auch geerbte Eigenschaften mit rein. Das ist etwas für Objekte, nicht für Arrays.

Arrays kopieren und zusammenführen

Arrays sind Referenzwerte. Wenn du eines einem anderen zuweist, wird nichts kopiert – du hast einfach zwei Namen für dasselbe Array:

Um wirklich eine Kopie zu erstellen, nutzt du den Spread-Operator oder slice():

Beide liefern dir eine flache Kopie – das äußere Array ist zwar neu, aber wenn die Elemente Objekte sind, teilen sich die Kopien weiterhin dieselben Objekte. Der Spread-Operator ist außerdem der sauberste Weg, um Arrays zusammenzuführen:

Arrays von Objekten

In echtem Code stecken in den meisten JavaScript-Arrays Objekte. Die gleichen Array-Methoden funktionieren auch hier – nur wird das Filtern und Finden dadurch deutlich spannender:

filter gibt ein neues Array mit genau den Elementen zurück, die zu einem Prädikat passen. map liefert ein neues Array, in dem jedes Element transformiert wurde. Beide zu verketten ist das tägliche Brot beim Umgang mit Arrays von Objekten – und auf der nächsten Seite schauen wir uns diese Familie von Methoden noch genauer an.

Arrays oder Objekte – wann was?

Ein kleines mentales Modell: Nimm ein Array, wenn die Reihenfolge zählt und du eine Liste gleichartiger Dinge hast. Nimm ein Objekt (oder eine Map), wenn du Werte über einen Namen ansprichst. „Erstens, zweitens, drittens" ist Array-Gebiet. „Finde den User mit id 42" ist Sache von Objekten oder Map.

Du kannst beides kombinieren – Arrays aus Objekten begegnen dir ständig – aber benutz ein Array nicht als Dictionary mit Schlüsseln und ein Objekt nicht als geordnete Liste. Jedes erledigt genau eine Aufgabe gut.

Als Nächstes: Destructuring

Werte per Index aus Arrays herauszuziehen (und Eigenschaften per Namen aus Objekten) kommt so häufig vor, dass JavaScript dafür eine eigene Syntax hat. Das nennt sich Destructuring – und darum geht es im nächsten Abschnitt.