JavaScript Academy · Lektion

Deklarative Datentransformation

Transformieren Sie Daten mit map, filter und reduce.

Deklarative Datentransformation ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. 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 4 Lektionen.

Deklarativ vs. imperativ

Imperativer Code beschreibt, WIE etwas geschieht (Schleifen, Zähler, Änderungen). Deklarativer Code beschreibt, WAS geschehen soll. Array-Methoden wie map, filter und reduce ermöglichen es Ihnen, Transformationen ohne manuelle Schleifen zu beschreiben.

const nums = [1, 2, 3, 4];
const doubled = nums.map((n) => n * 2);
console.log(doubled); // [2, 4, 6, 8]

map: Jedes Element transformieren

map gibt ein neues Array gleicher Länge zurück, in dem jedes Element durch Ihre Funktion transformiert wurde. Das ursprüngliche Array bleibt unverändert.

const names = ["ada", "bob"];
const upper = names.map((n) => n.toUpperCase());
console.log(upper); // ["ADA", "BOB"]
console.log(names); // unchanged

filter: Einige Elemente behalten

filter gibt ein neues Array zurück, das nur Elemente enthält, für die Ihr Prädikat einen truthy-Wert liefert.

const nums = [1, 2, 3, 4, 5, 6];
const evens = nums.filter((n) => n % 2 === 0);
console.log(evens); // [2, 4, 6]

reduce: Zu einem Wert zusammenfassen

reduce fasst ein Array durch Akkumulieren zu einem einzelnen Wert zusammen. Übergeben Sie eine Reducer-Funktion und einen Anfangswert.

const nums = [1, 2, 3, 4];
const sum = nums.reduce((acc, n) => acc + n, 0);
console.log(sum); // 10

Operationen verketten

Da jede Methode ein neues Array zurückgibt, können Sie sie zu einer gut lesbaren Pipeline verketten, die sich von oben nach unten liest.

const nums = [1, 2, 3, 4, 5, 6];
const result = nums
  .filter((n) => n % 2 === 0)
  .map((n) => n * 10);
console.log(result); // [20, 40, 60]

Eine realistische Pipeline

Kombinieren Sie filter, map und reduce, um eine Frage zu einem Datensatz in einem Ausdruck zu beantworten.

const orders = [
  { item: "pen", price: 3, paid: true },
  { item: "ink", price: 8, paid: false },
  { item: "pad", price: 5, paid: true }
];
const paidTotal = orders
  .filter((o) => o.paid)
  .map((o) => o.price)
  .reduce((a, p) => a + p, 0);
console.log(paidTotal); // 8

Neue Strukturen mit map erzeugen

map kann nicht nur Zahlen, sondern auch Objekte umformen. Projizieren Sie jeden Datensatz auf die für Sie relevanten Felder.

const users = [{ id: 1, name: "Ada", age: 36 }];
const summary = users.map((u) => ({ id: u.id, label: u.name }));
console.log(summary); // [{ id: 1, label: "Ada" }]

reduce kann alles Mögliche aufbauen

reduce dient nicht nur zum Addieren. Damit können Sie Objekte erstellen, Daten gruppieren oder sogar map und filter neu implementieren.

const words = ["a", "bb", "a", "ccc"];
const counts = words.reduce((acc, w) => {
  acc[w] = (acc[w] || 0) + 1;
  return acc;
}, {});
console.log(counts); // { a: 2, bb: 1, ccc: 1 }

Die Reihenfolge ist entscheidend

Wenn Sie vor dem Mapping filtern, vermeiden Sie die Transformation von Elementen, die Sie anschließend verwerfen. Platzieren Sie kostengünstige Filter früh in der Kette, um Klarheit und Effizienz zu verbessern.

const data = [1, 2, 3, 4, 5];
const out = data
  .filter((n) => n > 2)   // shrink first
  .map((n) => n * n);     // then transform
console.log(out); // [9, 16, 25]

Keine Änderungen irgendwo

Diese Methoden verändern das Quellarray nie. Dadurch sind Pipelines sicher und vorhersehbar und passen perfekt zum funktionalen Stil.

const src = [3, 1, 2];
const sorted = [...src].sort((a, b) => a - b);
console.log(sorted); // [1, 2, 3]
console.log(src);    // [3, 1, 2] untouched

flatMap für verschachtelte Ergebnisse

Wenn map Arrays erzeugt, wendet flatMap map an und flacht die Ergebnisse in einem einzigen Schritt um eine Ebene ab.

const pairs = [1, 2, 3].flatMap((n) => [n, n * 10]);
console.log(pairs); // [1, 10, 2, 20, 3, 30]

Kurzer Check

Deklarative Transformationen.

Zusammenfassung

Deklarative Transformationen beschreiben WAS, nicht WIE. map transformiert, filter wählt aus und reduce fasst zu einem Wert zusammen. Verketten Sie sie zu gut lesbaren Pipelines. Keine dieser Methoden verändert die Quelle; frühes Filtern ist effizient und reduce kann jede Struktur aufbauen. Verwenden Sie flatMap, wenn map Arrays liefert.

Häufig gestellte Fragen

Ist die Lektion „Deklarative Datentransformation“ kostenlos?

Ja — der vollständige Text von „Deklarative Datentransformation“ 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 4 Lektionen.

Was lerne ich in „Deklarative Datentransformation“?

Transformieren Sie Daten mit map, filter und reduce. 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 2 von 4.

Wie lange dauert die Lektion „Deklarative Datentransformation“?

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

← Zurück zu JavaScript Academy