Arrays
Arrays sind geordnete Listen. map, filter und reduce verarbeiten sie deklarativ — ohne manuelle Schleifen.
Ansicht
01
Verstehen
Lies die Kernidee und das Beispiel.
02
Prüfen
Beantworte die Aktiv-Checks.
03
Anwenden
Setze die Transferaufgabe um.
Lerninhalt
Verstehen & anwenden
Grundlagen
Arrays entstehen mit eckigen Klammern, der Zugriff läuft über den Index ab 0.
push hängt hinten an, pop entfernt hinten, length liefert die Anzahl.
const farben = ['rot', 'grün'];
farben.push('blau');
farben.length; // 3
farben[0]; // 'rot'map und filter
Array.map() transformiert jedes Element in ein neues Array gleicher Länge.
Array.filter() behält nur Elemente, die eine Bedingung erfüllen.
Beide verändern das Original nicht — sie liefern neue Arrays.
const zahlen = [1, 2, 3, 4];
zahlen.map((n) => n * 2); // [2, 4, 6, 8]
zahlen.filter((n) => n % 2 === 0); // [2, 4]reduce, find und Co.
reduce faltet ein Array zu einem einzelnen Wert zusammen, etwa einer Summe.
find liefert das erste passende Element, some und every prüfen Bedingungen, includes prüft Enthaltensein.
const punkte = [10, 20, 5];
punkte.reduce((summe, p) => summe + p, 0); // 35Vertiefung
map, filter und reduce ohne Mutation
map, filter und reduce verändern das Original nicht. Sie geben neue Arrays oder einen einzelnen Wert zurück — das macht Datenflüsse nachvollziehbar.
Wähle die Methode nach Absicht: map für gleich viele transformierte Werte, filter für eine Auswahl, reduce für eine Zusammenfassung, find für das erste passende Element.
const punkte = [12, 7, 19, 4];
const bestanden = punkte
.filter((p) => p >= 10)
.map((p) => p * 2);
console.log(bestanden); // [24, 38]Merksatz: Erst filtern, dann transformieren, am Ende reduzieren. Jede Methode hat eine klare Aufgabe.
Übungsaufgabe
Lernkarten-Auswertung
Werte eine Liste von Lernkarten aus: Anzahl, durchschnittliche Wiederholungen und die Titel der Karten, die noch offen sind.
Das soll dein Programm können
- map für die Titel
- filter für offene Karten
- reduce für die Summe
- find für eine bestimmte Karte
Schreibe den Code hier oder in deiner IDE und vergleiche ihn dann mit der Lösung.
Dein Code wird automatisch auf diesem Gerät gespeichert.
Hinweis anzeigen
Summe mit reduce: karten.reduce((sum, karte) => sum + karte.wiederholungen, 0). Offene Titel mit filter(...).map(...).
Lösung anzeigen
const karten = [
{ titel: "Variablen", offen: true, wiederholungen: 2 },
{ titel: "Arrays", offen: false, wiederholungen: 4 },
{ titel: "Objekte", offen: true, wiederholungen: 1 }
];
const offeneTitel = karten.filter((k) => k.offen).map((k) => k.titel);
const summe = karten.reduce((sum, k) => sum + k.wiederholungen, 0);
const schnitt = summe / karten.length;
const arrays = karten.find((k) => k.titel === "Arrays");
console.log(offeneTitel);
console.log(schnitt);
console.log(arrays);Warum funktioniert das?
filter und map lassen sich verketten, weil beide neue Arrays liefern. reduce fasst die Wiederholungen zusammen; find bricht beim ersten Treffer ab.
Aktiv-Check
Teste dein Verständnis
Erkennen: Welcher Abschnitt passt?
Welcher Abschnitt passt zu diesen Begriffen?
Transfer
Mini-Projekt: Der Lernzähler
Baue einen kleinen Zähler, der bei jedem Klick hochzählt und den Wert im DOM anzeigt. Erweitere ihn um einen Reset-Button.
Selbstcheck
Kann ich das schon?
Hake ab, was du wirklich erklären oder selbst bauen könntest.
Fortschritt
Bereit zum Abschließen?
Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.