Frontend Academy · Lektion

Array-Methoden: map, filter, reduce, find

Transformieren, filtern und aggregieren Sie Arrays mit höherwertigen Methoden statt mit manuellen Schleifen. Verketten Sie sie zu ausdrucksstarken Datenpipelines.

Lektion 1 von 413 Schritte

Array-Methoden: map, filter, reduce, find ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum Array-Methoden?

Imperative for-Schleifen funktionieren, verschleiern aber die Absicht. Methoden höherer Ordnung für Arrays deklarieren, was Sie erreichen möchten, statt wie iteriert werden soll. Sie erzeugen saubereren, testbaren und kombinierbaren Code, der sich wie Prosa liest.

Array.map() – Jedes Element transformieren

map() gibt ein neues Array zurück, in dem jedes Element durch den Callback transformiert wurde. Das ursprüngliche Array wird nicht verändert. Verwenden Sie die Methode immer dann, wenn Sie ein Array in ein anderes umwandeln möchten.

const names = ['alice', 'bob', 'carol'];
const upper = names.map(name => name.toUpperCase());
// ['ALICE', 'BOB', 'CAROL']

const prices = [10, 20, 30];
const withTax = prices.map(p => p * 1.2);
// [12, 24, 36]

Array.filter() – Passende Elemente auswählen

filter() gibt ein neues Array zurück, das nur Elemente enthält, für die der Callback einen truthy-Wert zurückgibt. Der Callback ist eine Prädikatsfunktion.

const users = [
  { name: 'Alice', age: 22 },
  { name: 'Bob',   age: 17 },
  { name: 'Carol', age: 30 },
];
const adults = users.filter(u => u.age >= 18);
// [{ name: 'Alice', age: 22 }, { name: 'Carol', age: 30 }]

Array.reduce() – Einen Wert akkumulieren

reduce(callback, initialValue) akkumuliert alle Elemente zu einem einzelnen Wert. Der Callback erhält den Akkumulator und das aktuelle Element. Der Anfangswert ist der Startwert des Akkumulators.

const prices = [10, 20, 30, 40];
const total = prices.reduce((sum, price) => sum + price, 0);
// 100

const tallied = ['a', 'b', 'a', 'c', 'b', 'a'].reduce((acc, letter) => {
  acc[letter] = (acc[letter] || 0) + 1;
  return acc;
}, {});
// { a: 3, b: 2, c: 1 }

Array.find() – Erste Übereinstimmung

find() gibt das erste Element zurück, das dem Prädikat entspricht, oder undefined, wenn kein Element gefunden wird. Verwenden Sie die Methode, um ein Element anhand seiner ID oder eines Eigenschaftswerts zu suchen.

const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
const bob = users.find(u => u.id === 2);
// { id: 2, name: 'Bob' }

const missing = users.find(u => u.id === 99);
// undefined

Array.findIndex()

findIndex() funktioniert wie find(), gibt aber den Index des passenden Elements zurück oder -1, wenn es nicht gefunden wird. Die Methode eignet sich, um die Position zu ermitteln, an der ein Element in einem Array aktualisiert werden soll.

const idx = users.findIndex(u => u.id === 2);
// 1

Array.some() und Array.every()

some() gibt true zurück, wenn mindestens ein Element den Test besteht. every() gibt nur dann true zurück, wenn alle Elemente den Test bestehen. Beide Methoden brechen beim ersten eindeutigen Ergebnis ab.

const hasAdult = users.some(u => u.age >= 18);  // true if any adult
const allAdults = users.every(u => u.age >= 18); // true only if all adults

Array.flatMap() – Abbilden und anschließend abflachen

flatMap() bildet jedes Element ab und flacht das Ergebnis anschließend um eine Ebene ab. Die Methode entspricht .map(...).flat(), ist aber effizienter.

const sentences = ['Hello world', 'Foo bar'];
const words = sentences.flatMap(s => s.split(' '));
// ['Hello', 'world', 'Foo', 'bar']

Array-Methoden verketten

Die Methoden geben neue Arrays zurück, sodass Sie sie verketten können. Lesen Sie solche Verkettungen von links nach rechts: zuerst filtern, dann transformieren und anschließend aggregieren.

const result = products
  .filter(p => p.inStock)
  .map(p => ({ ...p, price: p.price * 0.9 })) // 10% discount
  .sort((a, b) => a.price - b.price)
  .slice(0, 5); // top 5 cheapest in-stock products

Array.at() und Array.includes()

at(-1) ruft das letzte Element ab. includes(value) prüft, ob ein Wert vorhanden ist. Das ist deutlich übersichtlicher als arr[arr.length - 1] und arr.indexOf(v) !== -1.

const arr = [1, 2, 3, 4, 5];
arr.at(-1);        // 5
arr.at(-2);        // 4
arr.includes(3);   // true
arr.includes(99);  // false

Unveränderlichkeit: Nicht mutieren

map, filter und reduce geben neue Arrays zurück. push, pop und splice verändern das ursprüngliche Array. Erstellen Sie in React State immer neue Arrays (mit Spread oder map), statt den State direkt zu verändern.

// Bad in React:
state.items.push(newItem); // mutates original

// Good:
const newItems = [...state.items, newItem]; // new array

Schnelltest

Welche Array-Methode gibt ein neues Array mit den Elementen zurück, für die der Callback true zurückgibt?

Beantworte es in der interaktiven Lektion

Zusammenfassung: Array-Methoden

map() transformiert jedes Element. filter() wählt passende Elemente aus. reduce() akkumuliert die Elemente zu einem einzelnen Wert. find() gibt die erste Übereinstimmung zurück. some()/every() prüfen, ob Elemente die Bedingung erfüllen. Verkettungen dieser Methoden ersetzen verschachtelte Schleifen durch lesbare, deklarative Datenpipelines.

Kostenlos starten

Lerne HTML mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 41
Lektionen: 163

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „Array-Methoden: map, filter, reduce, find“ kostenlos?

Ja — der vollständige Text von „Array-Methoden: map, filter, reduce, find“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Array-Methoden: map, filter, reduce, find“?

Transformieren, filtern und aggregieren Sie Arrays mit höherwertigen Methoden statt mit manuellen Schleifen. Verketten Sie sie zu ausdrucksstarken Datenpipelines. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Array-Methoden: map, filter, reduce, find“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

Array-Methoden: map, filter, reduce, find
Destructuring und Spread von Objekten
Template Literals und Optional Chaining
Module: import und export

← Zurück zu Frontend Academy