In diesem Artikel werden wir uns mit zwei wichtigen Methoden aus dem JavaScript-Standardbibliothek befassen: filter() und reduce(). Diese Funktionen sind sehr nützlich, um komplexe Datenstrukturen zu verarbeiten und Informationen daraus extrahieren.
JavaScript: Was ist Filter?
Die Methode filter() wird verwendet, um eine neue Array-Instanz zurückzugeben, die nur die Elemente enthält, die einer bestimmten Bedingung entsprechen. Die Syntax lautet wie folgt:
|
1 2 |
arr.filter(callback(element, index, array) { ... }) |
callbackist eine Funktion, die für jeden Array-Element aufgerufen wird.elementist das aktuelle Array-Element.indexist der Index des aktuellen Array-Elements.arrayist das Original-Array.
Ein Beispiel:
|
1 2 3 4 5 |
const numbers = [1, 2, 3, 4, 5, 6]; const evenNumbers = numbers.filter(num => num % 2 === 0); console.log(evenNumbers); // Ausgabe: [2, 4, 6] |
JavaScript: Was ist Reduce?
Die Methode reduce() wird verwendet, um eine neue Werteinstanz zurückzugeben, die durch das Kombinieren aller Array-Elemente entsteht. Die Syntax lautet wie folgt:
|
1 2 |
arr.reduce(callback(accumulator, current) { ... }, [initialValue]) |
callbackist eine Funktion, die für jeden Array-Element aufgerufen wird.accumulatorist der vorherige Wert.currentist das aktuelle Array-Element.[initialValue]ist der optionalen Initialwert.
Ein Beispiel:
|
1 2 3 4 5 |
const numbers = [1, 2, 3, 4, 5]; const sum = numbers.reduce((acc, current) => acc + current); console.log(sum); // Ausgabe: 15 |
Komplexe Datenstrukturen mit Filter und Reduce verarbeiten
Das folgende Beispiel zeigt, wie eine komplexe JSON-Datenstruktur (hier ein Array of Dictionaries), sehr elegant mit JS Filter und Reduce in Kombination verarbeitet werden kann, ohne mühsam über verschachtelte Strukturen zu iterieren.
Aufgabe: Berechne den Gesamtumsatz aller Produkte mit dem String “magnus” im Namen:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
let produkte = { "Daten": [ { "ID": 1, "Produkt": "Magnus One Black", "Umsatz": 10000.0 }, { "ID": 2, "Produkt": "Magnus One White", "Umsatz": 15000.0 }, { "ID": 3, "Produkt": "Intel NUC", "Umsatz": 2000.0 } ] }; let sum = produkte.Daten.filter(p => p.Produkt.toLowerCase().includes("magnus")).reduce((sum, current) => sum + current.Umsatz, 0); console.log(sum); |
Die Ausgabe ist 25.000,00. Passt :-)
