0Pricing
JavaScript Academy · Lektion

map und filter – Grundlagen

Daten mit map und filter umwandeln und auswählen; beide verketten und Mutationen für sichereren Code vermeiden

map und filter – Grundlagen ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 2. 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 JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 2 Lektionen.

Einführung in map und filter

Ziel: Wandeln Sie Elemente mit map um und wählen Sie Elemente mit filter aus.

  • map: umwandeln
  • filter: auswählen
  • map → filter verketten
  • Keine Veränderungen
map und filter – Grundlagen — Illustration 1

Grundlagen zu map

map wendet eine Funktion auf jedes Element an und gibt ein neues Array zurück (mit derselben Länge).

// map transforms each value and returns a new array
const nums = [1, 2, 3];

const doubled = nums.map(function (n) {
  return n * 2;
});

console.log("nums:", nums);
console.log("doubled:", doubled);
map und filter – Grundlagen — Illustration 2

Grundlagen zu filter

filter gibt nur die Elemente zurück, für die Ihr Callback true zurückgibt (die Länge kann sich ändern).

// filter keeps values that pass the test
const values = [1, 2, 3, 4, 5];

const evens = values.filter(function (n) {
  return n % 2 === 0;
});

console.log("values:", values);
console.log("evens:", evens);
map und filter – Grundlagen — Illustration 3

Beispiel für Verkettung

Kombinieren Sie die Schritte: Verwenden Sie map zum Umwandeln und anschließend filter zum Auswählen.

// Chain methods for clarity
const prices = [4, 7, 10];

// First add tax, then keep items over 8
const withTax = prices.map(function (p) {
  return p * 1.1;
});

const expensive = withTax.filter(function (p) {
  return p > 8;
});

console.log("withTax:", withTax);
console.log("expensive:", expensive);
map und filter – Grundlagen — Illustration 4

Beispiel ohne Veränderung

Unveränderlichkeit: map/filter geben neue Arrays zurück; das ursprüngliche Array bleibt unverändert.

// map and filter do not mutate the original array
const base = [2, 4, 6];

const plusOne = base.map(function (n) {
  return n + 1;
});

const small = base.filter(function (n) {
  return n < 5;
});

console.log("base:", base);
console.log("plusOne:", plusOne);
console.log("small:", small);
map und filter – Grundlagen — Illustration 5

Tipps für übersichtliche Arrays

Tipps:

  • Benennen Sie kleine Callbacks aussagekräftig (n, item), damit der Code klar bleibt.
  • Halten Sie Verkettungen kurz (maximal 2–3 Schritte).
  • Bevorzugen Sie reine Callbacks (ohne Seiteneffekte).
map und filter – Grundlagen — Illustration 6

Quiz zu map und filter

Schnelltest: Jedes Element umwandeln.

map und filter – Grundlagen — Illustration 7

Zusammenfassung

Zusammenfassung: Verwenden Sie map, um Werte umzuwandeln, filter, um einige auszuwählen, und verketten Sie beide, ohne das ursprüngliche Array zu verändern.

map und filter – Grundlagen — Illustration 8

Häufig gestellte Fragen

Ist die Lektion „map und filter – Grundlagen“ kostenlos?

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

Was lerne ich in „map und filter – Grundlagen“?

Daten mit map und filter umwandeln und auswählen; beide verketten und Mutationen für sichereren Code vermeiden Du übst JavaScript 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 JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript 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 2.

Wie lange dauert die Lektion „map und filter – Grundlagen“?

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 JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript 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

  1. map und filter – Grundlagen
  2. reduce, some/every, find – einfache Muster
← Zurück zu JavaScript Academy