Array-Methoden: map, filter, reduce, find

Lerne, Daten mit den vier Array-Methoden zu transformieren, zu filtern und zu aggregieren, die in echten Projekten am häufigsten genutzt werden.

10 Min. · 3 Fragen

In einem echten Projekt verbringst du deine Zeit damit, Daten zu transformieren: eine Produktliste, die angezeigt werden soll, API-Ergebnisse zum Sortieren, ein Warenkorb, dessen Summe berechnet werden muss. Die Methoden map, filter, reduce und find ersetzen die meisten deiner for-Schleifen durch kürzeren, ausdrucksstärkeren Code. Sie verändern nie das ursprüngliche Array: Sie geben ein neues Ergebnis zurück, was eine ganze Klasse von Fehlern verhindert.

const products = [
  { name: "keyboard", price: 49, inStock: true },
  { name: "mouse", price: 25, inStock: false },
  { name: "screen", price: 199, inStock: true }
];

const names = products.map((product) => product.name);
console.log(names); // ["keyboard", "mouse", "screen"]

filter behält nur die Elemente, die einen Test bestehen, und gibt ein neues, möglicherweise leeres Array zurück. find hält beim ersten passenden Element an und gibt das Element selbst zurück, oder undefined, wenn nichts passt. Kleine Denkübung: Um alle vorrätigen Produkte zu bekommen, welche Methode wählst du? Und um das Produkt mit dem Namen "mouse" zu bekommen?

const available = products.filter((p) => p.inStock);
console.log(available.length); // 2

const mouse = products.find((p) => p.name === "mouse");
console.log(mouse.price); // 25

reduce ist die mächtigste Methode: Sie reduziert ein Array auf einen einzigen Wert (eine Zahl, ein Objekt, eine Zeichenkette). Sie nimmt eine Funktion mit einem Akkumulator und dem aktuellen Element sowie einen Startwert entgegen. Klassischer Anwendungsfall: die Berechnung einer Warenkorbsumme.

const cart = [
  { label: "T-shirt", quantity: 2, unitPrice: 15 },
  { label: "Cap", quantity: 1, unitPrice: 12 }
];

const total = cart.reduce(
  (sum, item) => sum + item.quantity * item.unitPrice,
  0
);
console.log(total); // 42

Um die richtige Methode zu wählen, stell dir eine einzige Frage: Welche Form soll das Ergebnis haben? Genauso viele Elemente wie das Original, aber transformiert: map. Eine Teilmenge: filter. Ein einzelnes Element: find. Ein einzelner berechneter Wert: reduce. Dieser Reflex spart dir wertvolle Zeit, in Bewerbungsgesprächen wie in Projekten.

Wissenscheck

Stelle sicher, dass du die wichtigsten Punkte dieser Lektion behalten hast.

1. Welche Methode gibt immer ein Array derselben Länge wie das ursprüngliche Array zurück?
   • filter
   • map
   • reduce
   • find
2. Was gibt find zurück, wenn kein Element die Bedingung erfüllt?
   • null
   • undefined
   • Ein leeres Array
   • Es wird ein Fehler geworfen
3. Wofür ist die abschließende 0 in cart.reduce((sum, item) => sum + item.unitPrice, 0) da?
   • Es ist der Startwert des Akkumulators sum
   • Es ist der Startindex des Durchlaufs
   • Es ist der Wert, der zurückgegeben wird, wenn das Array ungültig ist