JavaScript-Array-Methoden: Übersicht mit Beispielen

Q: Welche Array-Methoden verändern das Original?

push, pop, shift, unshift, splice, sort, reverse, fill und copyWithin. Alle anderen Methoden in der Liste lassen das Array unverändert und geben einen neuen Wert zurück.

Q: Warum sortiert sort() Zahlen falsch?

Ohne Vergleichsfunktion wandelt sort() die Elemente in Text um und sortiert nach Unicode-Reihenfolge. Deshalb steht 10 vor 9. Für Zahlen schreiben Sie arr.sort((a, b) => a - b).

Q: Was ist der Unterschied zwischen find und filter?

find() gibt das erste passende Element zurück (oder undefined) und hört dann auf zu suchen. filter() geht alle Elemente durch und gibt immer ein Array mit allen Treffern zurück, notfalls ein leeres.

Q: Wie bekomme ich das letzte Element eines Arrays?

Am kürzesten mit arr.at(-1). Die ältere Schreibweise arr[arr.length - 1] funktioniert überall.

Q: Was ist der Unterschied zwischen forEach und map?

forEach() ruft die Funktion nur auf und gibt undefined zurück. map() gibt ein neues Array mit den Rückgabewerten zurück. Wer das Ergebnis nicht braucht, nimmt forEach() oder eine for...of-Schleife.

Q: Wie entferne ich Duplikate aus einem Array?

Für einfache Werte mit [...new Set(arr)]. Für Objekte nach einem Schlüssel etwa so: arr.filter((x, i, a) => a.findIndex(y => y.id === x.id) === i) oder über eine Map mit dem Schlüssel.

JavaScript-Array-Methoden mit Beispiel und Ergebnis: map, filter und reduce, sort und toSorted, find, includes, Array.from und Object.groupBy. Mit Hinweis, welche Methoden das Array verändern.

Suchen

Gruppe

54 Einträge

Verändern das Array

arr.push(4, 5)Hängt Elemente hinten an, gibt die neue Länge zurück

arr.pop()Entfernt das letzte Element und gibt es zurück

arr.unshift(0)Fügt vorne ein, gibt die neue Länge zurück

arr.shift()Entfernt das erste Element und gibt es zurück

arr.splice(1, 2)Entfernt ab Index 1 zwei Elemente, gibt sie als Array zurück

arr.splice(1, 0, 'x')Fügt an Index 1 ein, ohne etwas zu entfernen

arr.sort()Sortiert an Ort und Stelle; ohne Vergleichsfunktion als Text: [10, 9, 1].sort() → [1, 10, 9]

arr.sort((a, b) => a - b)Zahlen aufsteigend sortieren; seit ES2019 stabil

arr.sort((a, b) => a.name.localeCompare(b.name, 'de'))Objekte nach Namen sortieren, Umlaute richtig

arr.reverse()Kehrt die Reihenfolge an Ort und Stelle um

arr.fill(0)Füllt alle Positionen mit einem Wert; fill(0, 2) erst ab Index 2

arr.copyWithin(0, 3)Kopiert Elemente ab Index 3 an den Anfang, Länge bleibt gleich

arr.length = 0Leert das Array; alle Verweise darauf sehen das leere Array

Neues Array, Original bleibt

arr.map(x => x * 2)Neues Array mit den Rückgabewerten: [1, 2, 3] → [2, 4, 6]

arr.filter(x => x > 1)Neues Array nur mit Elementen, für die die Funktion wahr ergibt

arr.slice(1, 3)Ausschnitt von Index 1 bis vor 3; slice(-2) die letzten zwei

arr.concat([4, 5])Verbindet Arrays zu einem neuen

[...a, ...b]Spread-Syntax: Arrays verbinden oder flach kopieren

arr.flat()Verschachtelte Arrays eine Ebene glätten; flat(Infinity) ganz (ES2019)

arr.flatMap(x => [x, x * 10])Erst map, dann eine Ebene glätten

arr.toSorted((a, b) => a - b)Sortierte Kopie, Original bleibt unverändert (ES2023)

arr.toReversed()Umgekehrte Kopie (ES2023)

arr.toSpliced(1, 1)Kopie mit entfernten bzw. eingefügten Elementen (ES2023)

arr.with(0, 'neu')Kopie mit ersetztem Element an einem Index (ES2023)

structuredClone(arr)Tiefe Kopie inklusive verschachtelter Objekte

Suchen und Prüfen

arr.includes(3)Ist der Wert enthalten? Findet anders als indexOf auch NaN (ES2016)

arr.indexOf(3)Erster Index des Werts oder −1

arr.lastIndexOf(3)Letzter Index des Werts oder −1

arr.find(u => u.id === 7)Erstes passendes Element oder undefined

arr.findIndex(u => u.id === 7)Index des ersten passenden Elements oder −1

arr.findLast(x => x < 5)Letztes passendes Element (ES2023)

arr.findLastIndex(x => x < 5)Index des letzten passenden Elements (ES2023)

arr.some(x => x > 10)Wahr, wenn mindestens ein Element passt

arr.every(x => x > 0)Wahr, wenn alle Elemente passen (bei leerem Array immer wahr)

arr.at(-1)Element am Index, negative Werte zählen von hinten: das letzte Element (ES2022)

Array.isArray(wert)Prüft zuverlässig, ob ein Wert ein Array ist

Durchlaufen und Zusammenfassen

arr.reduce((summe, x) => summe + x, 0)Fasst alle Elemente zu einem Wert zusammen; Startwert immer angeben

arr.reduceRight((a, x) => a + x, '')Wie reduce, aber von hinten nach vorne

arr.forEach((x, i) => console.log(i, x))Ruft die Funktion für jedes Element auf, gibt undefined zurück

for (const [i, x] of arr.entries()) {}Schleife mit Index und Wert; break ist möglich

arr.join(', ')Elemente zu einem Text verbinden

Object.groupBy(arr, u => u.rolle)Gruppiert in ein Objekt mit Schlüssel je Gruppe (ES2024)

Map.groupBy(arr, u => u.rolle)Gruppiert in eine Map, Schlüssel dürfen beliebige Werte sein (ES2024)

Math.max(...arr)Größter Wert; bei sehr großen Arrays lieber reduce nutzen

Erzeugen und Umwandeln

Array.from('abc')Array aus einem iterierbaren Wert: ['a', 'b', 'c']

Array.from({ length: 5 }, (_, i) => i)Zahlenfolge [0, 1, 2, 3, 4]

Array.from(document.querySelectorAll('a'))NodeList in ein echtes Array umwandeln

Array.of(7)Array mit genau diesem Element; anders als Array(7), das 7 leere Plätze anlegt

new Array(3).fill(0)Array mit drei Nullen

await Array.fromAsync(quelle)Array aus einer asynchronen Quelle, etwa einem Async-Generator (neuere Laufzeitumgebungen)

[...new Set(arr)]Doppelte Werte entfernen

arr.keys() / arr.values() / arr.entries()Iteratoren über Indizes, Werte oder Paare [index, wert]

Object.entries(obj).map(([k, v]) => [k, v * 2])Objekt als Array von Schlüssel-Wert-Paaren bearbeiten

Object.fromEntries(paare)Array von Paaren zurück in ein Objekt

Alles läuft in Ihrem Browser. Eingaben verlassen Ihr Gerät nicht.

Array-Methoden in JavaScript

Dieser JS Spickzettel listet 54 JavaScript-Array-Methoden und Schreibweisen mit Beispiel und Rückgabewert. Die Gruppen zeigen auf einen Blick, was das Original verändert und was ein neues Array liefert. Wählen Sie „Verändern das Array“, um alle Methoden mit Nebenwirkung zu sehen, oder suchen Sie nach einer Aufgabe wie „entfernen“ oder „gruppieren“.

Ein JavaScript Array ist ein Objekt mit Zahlenindizes und vielen eingebauten Methoden. Am häufigsten braucht man map, filter und reduce: map() formt jedes Element um, filter() wählt aus und reduce() fasst zu einem Wert zusammen. Wichtig ist der Unterschied zwischen verändernden Methoden wie sort(), reverse() oder splice() und solchen, die eine Kopie zurückgeben. Seit ES2023 gibt es mit toSorted(), toReversed(), toSpliced() und with() kopierende Varianten; das ist etwa im React-State hilfreich.

Mit Array.from() erzeugen Sie Arrays aus Zeichenketten, NodeLists, Sets oder einer Länge. Die Jahresangaben (ES2019, ES2023 …) zeigen, ab welcher Sprachversion eine Methode im Standard steht; aktuelle Browser und Node.js unterstützen sie, sehr alte Umgebungen eventuell nicht. Für JSON-Daten, die Sie mit diesen Methoden bearbeiten, helfen der JSON-Formatierer und JSON in TypeScript.

Anleitung: JavaScript-Array-Methoden in 4 Schritten

Wählen Sie unter „Gruppe“ zum Beispiel „Verändern das Array“ oder „Suchen und Prüfen“.
Oder suchen Sie nach einer Aufgabe wie „entfernen“, „sortieren“ oder „gruppieren“.
Lesen Sie Beispiel und Ergebnis in der Beschreibung.
Kopieren Sie das Beispiel mit „Kopieren“ in Ihre Konsole oder Ihren Code.

Typische Anwendungsfälle

Die passende Methode finden, ohne die MDN-Seiten einzeln durchzugehen.
Unbeabsichtigtes Verändern von Arrays vermeiden, etwa im React-State mit toSorted() statt sort().
Datenlisten aus APIs filtern, umformen und mit reduce() oder Object.groupBy() zusammenfassen.
Code-Reviews mit einer kurzen Referenz zu Rückgabewerten und Nebenwirkungen unterstützen.

Fragen

Häufige Fragen

Welche Array-Methoden verändern das Original?

push, pop, shift, unshift, splice, sort, reverse, fill und copyWithin. Alle anderen Methoden in der Liste lassen das Array unverändert und geben einen neuen Wert zurück.

Warum sortiert sort() Zahlen falsch?

Ohne Vergleichsfunktion wandelt sort() die Elemente in Text um und sortiert nach Unicode-Reihenfolge. Deshalb steht 10 vor 9. Für Zahlen schreiben Sie arr.sort((a, b) => a - b).

Was ist der Unterschied zwischen find und filter?

find() gibt das erste passende Element zurück (oder undefined) und hört dann auf zu suchen. filter() geht alle Elemente durch und gibt immer ein Array mit allen Treffern zurück, notfalls ein leeres.

Wie bekomme ich das letzte Element eines Arrays?

Am kürzesten mit arr.at(-1). Die ältere Schreibweise arr[arr.length - 1] funktioniert überall.

Was ist der Unterschied zwischen forEach und map?

forEach() ruft die Funktion nur auf und gibt undefined zurück. map() gibt ein neues Array mit den Rückgabewerten zurück. Wer das Ergebnis nicht braucht, nimmt forEach() oder eine for...of-Schleife.

Wie entferne ich Duplikate aus einem Array?

Für einfache Werte mit [...new Set(arr)]. Für Objekte nach einem Schlüssel etwa so: arr.filter((x, i, a) => a.findIndex(y => y.id === x.id) === i) oder über eine Map mit dem Schlüssel.

Weitere Werkzeuge

Das könnte auch helfen

Alle 558 Werkzeuge

JavaScript-Array-Methoden: Übersicht mit Beispielen

Verändern das Array

Neues Array, Original bleibt

Suchen und Prüfen

Durchlaufen und Zusammenfassen

Erzeugen und Umwandeln

Array-Methoden in JavaScript

Anleitung: JavaScript-Array-Methoden in 4 Schritten

Typische Anwendungsfälle

Häufige Fragen

Das könnte auch helfen

HTTP-Statuscodes

HTTP-Header-Referenz

MIME-Typen

Git-Befehle

Bash-Befehle

Port-Liste