JavaScript Array-Methoden

Einführung

Arrays sind eine der am häufigsten verwendeten Datenstrukturen in JavaScript, und der Großteil ihrer Leistungsfähigkeit stammt aus den eingebauten Methoden — Funktionen, die du auf einem array aufrufst, um Elemente hinzuzufügen, zu entfernen, zu suchen, zu transformieren oder neu anzuordnen. Dieser Leitfaden behandelt die Methoden, die du täglich verwendest, erklärt den wichtigen Unterschied zwischen Methoden, die das ursprüngliche array verändern (mutieren), und solchen, die ein neues array zurückgeben, und zeigt jede mit einem ausführbaren Beispiel.

Wenn du noch neu bei Arrays bist, beginne mit dem Kapitel JavaScript Array und komm dann hierher zurück.

JavaScript Arrays verstehen

Ein array speichert eine geordnete Liste von Werten in einer einzigen Variable. Die Werte können von jedem der JavaScript-Datentypen sein — Zahlen, strings, objects, sogar andere arrays — und du musst die Größe nicht im Voraus festlegen.

Ein Array erstellen

Der einfachste Weg, ein array zu erstellen, ist die Literal-Syntax mit eckigen Klammern:

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

Dadurch wird ein array namens fruits mit drei string-Elementen erstellt.

Auf Array-Elemente zugreifen

Auf Elemente wird über ihren Index zugegriffen, einer nullbasierten Position, die vom Anfang des Arrays gezählt wird:

Die Eigenschaft length gibt an, wie viele Elemente vorhanden sind, und at() akzeptiert negative Indizes, sodass at(-1) immer das letzte Element zurückgibt.

Mutierende vs. nicht-mutierende Methoden

Bevor du dir einzelne Methoden ansiehst, lerne diesen Unterschied kennen — er erklärt die meisten array-Fehler:

• Mutierende Methoden ändern das array direkt. push, pop, shift, unshift, splice, sort, reverse und fill verändern alle das array, auf dem sie aufgerufen werden.
• Nicht-mutierende Methoden lassen das Original unverändert und geben ein neues array oder einen Wert zurück. map, filter, slice, concat, reduce, find und die neueren toSorted/toSpliced/toReversed gehören zu dieser Gruppe.

Wenn du ein array über Funktionen hinweg teilst oder es im State speicherst (zum Beispiel in einer React-Komponente), bevorzuge nicht-mutierende Methoden, damit du nicht versehentlich Daten veränderst, auf die jemand anderes angewiesen ist.

Grundlegende Array-Methoden

Elemente hinzufügen und entfernen

push()

push() hängt ein oder mehrere Elemente an das Ende des Arrays an und gibt die neue Länge zurück.

unshift()

unshift() fügt Elemente am Anfang des Arrays ein.

pop()

pop() entfernt das letzte Element und gibt es zurück. Zusammen mit push() ermöglicht es einem array, wie ein Stack zu agieren (last in, first out).

shift()

shift() entfernt das erste Element und gibt es zurück. Beachte, dass shift und unshift langsamer sind als push/pop, weil jedes verbleibende Element neu indiziert werden muss.

Elemente finden

indexOf()

indexOf() gibt den ersten Index eines Werts zurück, oder -1, wenn der Wert nicht gefunden wird. Es verwendet strikte Gleichheit, daher kann es objects nicht anhand ihres Inhalts finden.

includes()

includes() beantwortet eine einfachere Ja/Nein-Frage: Ist dieser Wert im array? Es ist klarer als indexOf(x) !== -1 und kann im Gegensatz zu indexOf auch NaN finden.

find() und findIndex()

Wenn du ein Element anhand einer Bedingung und nicht eines genauen Werts suchen möchtest, verwende find() (gibt das Element zurück) oder findIndex() (gibt seinen Index zurück). Beide stoppen beim ersten Treffer.

some() und every()

some() gibt true zurück, wenn mindestens ein Element den Test besteht; every() gibt true nur zurück, wenn alle Elemente ihn bestehen.

Iterieren und Transformieren

Diese Methoden nehmen eine Callback-Funktion entgegen und sind das Herzstück des modernen, deklarativen JavaScript. Sie passen gut zu den Mustern im Kapitel JavaScript Loops.

forEach()

forEach() führt eine Funktion einmal pro Element aus. Es gibt immer undefined zurück, daher verwende es für Seiteneffekte (wie Logging), nicht zum Erstellen eines neuen Werts.

map()

map() erstellt ein neues array, indem jedes Element transformiert wird. Das neue array hat immer die gleiche Länge wie das Original.

filter()

filter() erstellt ein neues array, das nur die Elemente enthält, für die der Callback einen truthy-Wert zurückgibt.

reduce()

reduce() reduziert ein array auf einen einzelnen Wert, indem wiederholt eine Funktion angewendet wird. Der Callback erhält einen Akkumulator und das aktuelle Element; das zweite Argument von reduce ist der Startwert des Akkumulators.

Du kannst diese Transformatoren verketten: zuerst map, dann filter, dann reduce, wobei jeder Schritt die Eingabe für den nächsten liefert.

Neuordnen und Slicing

sort()

sort() sortiert direkt im array. Standardmäßig vergleicht es Elemente als strings, was bei Zahlen zu überraschenden Ergebnissen führt — 10 wird vor 2 sortiert, weil "10" alphabetisch vor "2" kommt. Übergib beim Sortieren von Zahlen immer eine Vergleichsfunktion.

reverse()

reverse() kehrt die Reihenfolge der Elemente direkt im array um.

slice()

slice(start, end) gibt eine flache Kopie eines Teils des Arrays zurück. Der end-Index ist nicht enthalten, und das Original bleibt unverändert — was slice() zu einem praktischen Weg macht, ein array zu kopieren.

splice()

splice(start, deleteCount, ...items) ist der universelle In-Place-Editor: Er kann entfernen, ersetzen und einfügen. Hier fügt er "Grape" an Index 2 ein, ohne etwas zu löschen (deleteCount ist 0).

concat()

concat() verbindet arrays zu einem neuen array, ohne die Originale zu verändern. Die Spread-Syntax ([...a, ...b]) tut dasselbe — siehe Rest-Parameter und Spread-Syntax.

fill()

fill(value, start, end) überschreibt einen Bereich von Elementen direkt im array mit einem statischen Wert.

Unveränderliche (kopierende) Methoden

Diese in ES2023 eingeführten Methoden tun genau das, was sort, splice und reverse tun — aber sie geben ein neues array zurück und lassen das Original unverändert. Sie sind ideal für State, den du nicht mutieren darfst.

toSorted()

toSpliced()

Fazit

Die Beherrschung von JavaScript Array-Methoden ist eine der effektivsten Fähigkeiten in der Sprache: map, filter und reduce ersetzen die meisten manuellen Schleifen, während das Wissen, welche Methoden mutieren und welche kopieren, eine ganze Klasse von Fehlern verhindert. Übe weiter mit den ausführbaren Beispielen oben und erkunde verwandte Themen wie die JavaScript Array-Grundlagen und die Spread-Syntax.

Übungen