JavaScript Arrays

Einführung in JavaScript Arrays

Ein JavaScript array ist eine geordnete, ganzzahlig indizierte Sammlung von Werten. Im Gegensatz zu Objekten, die Schlüsseleigenschaften ohne garantierte Reihenfolge speichern, hält ein array seine Elemente in einer bestimmten Reihenfolge und ermöglicht den Zugriff auf jedes Element über seine Position (den Index). Indizes beginnen bei 0, das erste Element befindet sich also bei Index 0, das zweite bei Index 1 und so weiter.

Arrays sind eine der am häufigsten verwendeten Datenstrukturen in der Sprache, da sie eine Mischung aus beliebigen Wertetypen aufnehmen können — Zahlen, strings, booleans, Objekte und sogar andere arrays — und sie wachsen oder schrumpfen automatisch, wenn Elemente hinzugefügt oder entfernt werden. Diese Seite erklärt, wie man arrays erstellt, deren Inhalte ändert, über sie iteriert, sie transformiert und durchsucht, sowie welche Praktiken array-lastigen Code lesbar halten.

Arrays erstellen und initialisieren

Die gebräuchlichste Methode zum Erstellen eines arrays ist die array-Literal-Syntax — eine kommagetrennte Liste in eckigen Klammern:

let fruits = ["Apple", "Banana", "Cherry"];

Man kann auch den new Array()-Konstruktor verwenden, der jedoch selten eingesetzt wird und einen verwirrenden Sonderfall hat: Übergibt man eine einzelne Zahl, wird die Länge des arrays gesetzt, anstatt diese Zahl als Element hinzuzufügen.

Wegen dieses Fallstricks empfiehlt sich die Literal-Syntax für alles außer der gezielten Vorab-Größenfestlegung eines arrays.

Auf Elemente und Länge zugreifen

Ein Element kann über seinen Index gelesen oder ersetzt werden; die Gesamtanzahl lässt sich mit der Eigenschaft length auslesen. Das Zuweisen an einen Index jenseits des aktuellen Endes erweitert das array.

Elemente hinzufügen und entfernen

Vier Methoden decken die beiden Enden eines arrays ab. Beachten Sie, welchen Wert jede zurückgibt — das ist eine häufige Fehlerquelle.

• push() — fügt ein oder mehrere Elemente am Ende hinzu und gibt die neue Länge zurück.

• pop() — entfernt das letzte Element und gibt dieses Element zurück.

• unshift() — fügt ein oder mehrere Elemente am Anfang hinzu und gibt die neue Länge zurück.

• shift() — entfernt das erste Element und gibt dieses Element zurück.

Einfügen und Entfernen in der Mitte mit splice()

push/pop/shift/unshift berühren nur die Enden. Um Elemente an beliebiger Stelle hinzuzufügen, zu entfernen oder zu ersetzen, verwendet man splice(start, deleteCount, ...itemsToInsert). Die Methode ändert das array direkt und gibt ein array der entfernten Elemente zurück.

Einen Abschnitt mit slice() kopieren

slice(start, end) gibt eine flache Kopie eines Teils des arrays zurück, ohne das Original zu verändern. Der end-Index ist nicht enthalten.

Über Elemente iterieren

Es gibt mehrere Möglichkeiten, ein array zu durchlaufen. Verwenden Sie eine for...of-Schleife oder forEach(), wenn Sie einfach jeden Wert benötigen; greifen Sie auf indexbasierte Schleifen nur zurück, wenn Sie den Index tatsächlich benötigen. (Im Schleifen-Kapitel finden Sie alle Schleifenformen.)

• for...of — der sauberste Weg, jeden Wert der Reihe nach zu lesen.

• forEach() — führt einen Callback einmal pro Element aus und erhält dabei den Wert, den Index und das array selbst.

Arrays transformieren

Diese Methoden geben ein neues array (oder einen Wert) zurück, anstatt das Original zu verändern, was sie ideal für vorhersehbare, verkettbare Datenverarbeitung macht.

• map() — erstellt ein neues array, indem es jedes Element transformiert.

• filter() — erstellt ein neues array nur mit den Elementen, die einen Test bestehen.

• reduce() — reduziert das gesamte array auf einen einzelnen Wert, indem ein Ergebnis akkumuliert wird. Die Methode nimmt einen Callback (accumulator, current) und einen Anfangswert entgegen.

Da map und filter jeweils ein array zurückgeben, können sie verkettet werden:

Arrays durchsuchen

• includes() — gibt true/false zurück, ob ein Wert vorhanden ist. indexOf() gibt den Index des Werts zurück, oder -1 wenn er nicht gefunden wird.

• find() und findIndex() — geben das erste Element (oder seinen Index) zurück, das einen Test-Callback erfüllt.

Arrays sortieren

sort() ordnet die Elemente in place und gibt dasselbe array zurück.

Arrays in Strings umwandeln

Die Methode join() kombiniert alle Elemente zu einem einzelnen string, wobei das übergebene Trennzeichen verwendet wird (standardmäßig ein Komma).

Fortgeschrittene Array-Operationen

Mehrdimensionale Arrays

Da ein array andere arrays aufnehmen kann, lassen sich Gitter und Matrizen modellieren. Zwei Indizes — matrix[row][column] — ermöglichen den Zugriff auf einen inneren Wert.

Der Spread-Operator

Der Spread-Operator (...) expandiert ein Iterable — ein array oder einen string — in einzelne Elemente, überall wo mehrere Werte erwartet werden. Er ist die moderne Methode zum Kombinieren und Kopieren von arrays. (Zur verwandten sammelnden Form siehe Rest-Parameter und Spread-Syntax.)

• Arrays kombinieren:

• Ein array kopieren (eine flache Kopie, das Original bleibt unverändert):

• Array-Elemente als Funktionsargumente übergeben:

Array-Destrukturierung

Destrukturierung entpackt array-Werte in einem einzigen Statement in separate Variablen. (Dasselbe Konzept gilt für Objekte — siehe Destrukturierungszuweisung.)

• Variablen tauschen ohne eine temporäre Variable:

• Standardwerte werden eingesetzt, wenn eine Position fehlt:

Best Practices für die Verwendung von Arrays

• Mit const deklarieren, wenn sich die array-Referenz nicht ändert. const verhindert nur die Neuzuweisung der Variablen — push, pop und das Bearbeiten von Elementen sind weiterhin möglich, da der Inhalt des arrays nicht eingefroren ist.

• Bevorzugen Sie map, filter und reduce gegenüber manuellen Schleifen zur Datentransformation — sie beschreiben die Absicht und geben neue arrays zurück, anstatt gemeinsamen Zustand zu verändern.
• Den Spread-Operator zum Kopieren vor einer Mutation verwenden, wenn das Original-array unverändert bleiben soll.
• Übergeben Sie sort() immer eine Vergleichsfunktion bei Zahlen.

Fazit

Arrays sind das Rückgrat der Datenverarbeitung in JavaScript: geordnet, indexbasiert und dynamisch in der Größe. Wenn man weiß, welche Methoden das array verändern (push, pop, splice, sort) und welche neue Werte zurückgeben (map, filter, slice, reduce), lassen sich Sammlungen sicher bearbeiten. Kombiniert mit dem Spread-Operator und der Destrukturierung entsteht prägnanter, lesbarer Code. Erkunden Sie als Nächstes die vollständige Array-Methoden-Referenz und wie arrays im Vergleich zu JavaScript-Objekten stehen.

Übungen