JavaScript: map, filter, reduce und Co.

Kurz: Statt Schleifen schreibst du Listenverarbeitung in JavaScript meist mit Array-Methoden, die eine Funktion als Argument bekommen. Sie ändern das Original nicht und sind gut lesbar.

Teil des Kurses JavaScript

Kapitel 14 von 40 im Kurs JavaScript. Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.

Statt Schleifen schreibst du Listenverarbeitung in JavaScript meist mit Array-Methoden, die eine Funktion als Argument bekommen. Sie ändern das Original nicht und sind gut lesbar.

forEach

Ruft eine Funktion für jedes Element auf (kein Rückgabewert):

["a", "b", "c"].forEach((x, i) => console.log(i, x));

Ausgabe:

0 a
1 b
2 c

map: jedes Element umwandeln

Liefert ein neues Array gleicher Länge:

const preise = [10, 20, 30];
console.log(preise.map(p => p * 1.19));
console.log(["mia", "tom"].map(n => n[0].toUpperCase() + n.slice(1)));
const personen = [{ name: "Mia", alter: 17 }, { name: "Tom", alter: 19 }];
console.log(personen.map(p => p.name));
console.log(["1", "2", "3"].map(Number));

Ausgabe:

[ 11.899999999999999, 23.799999999999997, 35.699999999999996 ]
[ 'Mia', 'Tom' ]
[ 'Mia', 'Tom' ]
[ 1, 2, 3 ]

filter: Elemente auswählen

Liefert nur die Elemente, für die die Funktion true ergibt:

const zahlen = [1, 2, 3, 4, 5, 6];
console.log(zahlen.filter(z => z % 2 === 0));
const daten = [0, "a", "", null, 5, undefined];
console.log(daten.filter(Boolean));
console.log(personen2().filter(p => p.alter >= 18).map(p => p.name));
function personen2() { return [{ name: "Mia", alter: 17 }, { name: "Tom", alter: 19 }]; }

Ausgabe:

[ 2, 4, 6 ]
[ 'a', 5 ]
[ 'Tom' ]

reduce: alles zu einem Wert zusammenfassen

reduce((akku, element) => neuerAkku, startwert):

const z = [1, 2, 3, 4];
console.log(z.reduce((summe, x) => summe + x, 0));
console.log(z.reduce((m, x) => Math.max(m, x), -Infinity));
const worte = ["a", "b", "a", "c", "a"];
const haeufigkeit = worte.reduce((acc, w) => {
  acc[w] = (acc[w] || 0) + 1;
  return acc;
}, {});
console.log(haeufigkeit);

Ausgabe:

10
4
{ a: 3, b: 1, c: 1 }

Verketten (Pipelines)

const bestellungen = [
  { artikel: "Stift", preis: 2, menge: 10 },
  { artikel: "Heft", preis: 3, menge: 2 },
  { artikel: "Lineal", preis: 1, menge: 0 },
];
const umsatz = bestellungen
  .filter(b => b.menge > 0)
  .map(b => b.preis * b.menge)
  .reduce((s, x) => s + x, 0);
console.log(umsatz);

Ausgabe:

26

Weitere nützliche Methoden

Methode	Wirkung
flatMap(f)	map und danach ein Level flach machen
find, findIndex, findLast	erstes/letztes passendes Element
some, every	mindestens eins / alle erfüllen
join(trenner)	zu Text verbinden
Object.groupBy(arr, f)	nach Schlüssel gruppieren
toSorted, toReversed, toSpliced, with	Kopien statt Änderung

console.log([[1, 2], [3]].flatMap(x => x));
console.log(["Hallo Welt", "Guten Tag"].flatMap(s => s.split(" ")));
const gruppen = Object.groupBy([1, 2, 3, 4, 5], n => (n % 2 ? "ungerade" : "gerade"));
console.log(gruppen);
console.log([3, 1, 2].with(0, 99), [1, 2, 3].join(" - "));

Ausgabe:

[ 1, 2, 3 ]
[ 'Hallo', 'Welt', 'Guten', 'Tag' ]
[Object: null prototype] { ungerade: [ 1, 3, 5 ], gerade: [ 2, 4 ] }
[ 99, 1, 2 ] 1 - 2 - 3

Callback-Argumente

Die übergebene Funktion bekommt bis zu drei Argumente: Element, Index und das ganze Array.

console.log(["a", "b"].map((el, i, arr) => `${i + 1}/${arr.length}: ${el}`));
console.log(["10", "10", "10"].map(parseInt));   // Falle! parseInt bekommt den Index als Basis
console.log(["10", "10", "10"].map(s => parseInt(s, 10)));

Ausgabe:

[ '1/2: a', '2/2: b' ]
[ 10, NaN, 2 ]
[ 10, 10, 10 ]

Merke

• map wandelt um, filter wählt aus, reduce fasst zusammen
• Sie liefern neue Werte und ändern das Original nicht
• Pipelines aus filter, map, reduce ersetzen viele Schleifen
• flatMap, some, every, find, Object.groupBy ergänzen die Palette
• Vorsicht bei map(parseInt): das zweite Argument ist der Index

Übungsaufgabe

Gegeben ist eine Liste von Wörtern. Bilde mit einer Pipeline die Liste aller Wörter mit mehr als drei Buchstaben in Großschreibung, sortiert.

Quiz zur Selbstkontrolle

.map(x => x * 2)?

• [2, 4, 6] (richtig)
• 12
• [1, 2, 3]
• undefined

Wozu dient reduce?

• Um ein Array zu einem einzigen Wert zusammenzufassen (richtig)
• Um Elemente zu löschen
• Um ein Array zu sortieren
• Um Arrays zu kopieren

Welche Methode liefert nur Elemente, die eine Bedingung erfüllen?

• filter (richtig)
• map
• forEach
• join

Weiter im Kurs

Zurück: Arrays

Weiter: Objekte

Alle Kapitel: JavaScript im Überblick