Array-Methoden mit Brief-Metadaten

Dieses Beispiel demonstriert die wichtigsten Array-Methoden anhand von Briefmetadaten aus der Schuchardt-Korrespondenz. Klicken Sie auf die Buttons, um die Methoden in Aktion zu sehen.

Ausgangsdaten: Korrespondenz-Array

map() — Titel extrahieren

Extrahiert aus jedem Objekt nur den Titel und erstellt ein neues Array:

const titel = korrespondenz.map(brief => brief.titel);

filter() — Briefe nach 1890 filtern

Gibt nur die Briefe zurück, deren Jahr größer als 1890 ist:

const nachricht = korrespondenz.filter(brief => brief.jahr > 1890);

find() — Brief an Vossler finden

Findet den ersten Brief, dessen Titel „Vossler“ enthält:

const vossler = korrespondenz.find(brief => brief.titel.includes('Vossler'));

forEach() — Briefe als Karten rendern

Iteriert über alle Briefe und erzeugt für jeden eine HTML-Karte:

korrespondenz.forEach(brief => {
  // Karte erstellen und in den DOM einfuegen
});

Kombination: filter + sort + map

Briefe von Schuchardt, sortiert nach Jahr, als formatierte Liste:

const ergebnis = korrespondenz
  .filter(b => b.absender === 'Hugo Schuchardt')
  .sort((a, b) => a.jahr - b.jahr)
  .map(b => `${b.jahr}: ${b.titel}`);

Destrukturierung in map()-Callbacks

Destrukturierung macht Callbacks kürzer und lesbarer:

const zusammenfassung = korrespondenz.map(
  ({ titel, absender, jahr }) =>
    `${absender} (${jahr}): ${titel}`
);