Array-Methoden

Arrays sind in React allgegenwärtig — Listen von Studenten, Produkten, Nachrichten. Um diese Listen zu transformieren, filterst, sortierst und baust du Arrays um. Dabei ist eine Frage zentral: Verändert die Methode das Original-Array oder gibt sie ein neues zurück?

Mutierende vs. nicht-mutierende Methoden

JavaScript-Array-Methoden lassen sich in zwei Kategorien einteilen:

Nicht-mutierend (gibt neues Array zurück)	Mutierend (verändert das Original)
map, filter, slice, concat, flat, flatMap, toSorted, toReversed, toSpliced	push, pop, shift, unshift, splice, sort, reverse, fill

Goldene Regel in React

In React darfst du State nie direkt mutieren. Verwende immer nicht-mutierende Methoden oder erstelle eine Kopie, bevor du eine mutierende Methode aufrufst. React erkennt Änderungen nur, wenn du ein neues Array (oder Objekt) übergibst.

// Falsch — mutiert das Array direkt
studenten.push("Max");
setStudenten(studenten); // React erkennt keine Änderung!

// Richtig — neues Array erstellen
setStudenten([...studenten, "Max"]);

map — Elemente transformieren

map ruft eine Funktion für jedes Element auf und gibt ein neues Array mit den Ergebnissen zurück:

const zahlen = [1, 2, 3, 4];

const verdoppelt = zahlen.map(x => x * 2);
// [2, 4, 6, 8]

console.log(zahlen); // [1, 2, 3, 4] — unverändert

In React ist map die Standardmethode, um Listen zu rendern:

const studenten = ["Dan", "Sophie", "Max"];

function StudentenListe() {
  return (
    <ul>
      {studenten.map(name => (
        <li key={name}>{name}</li>
      ))}
    </ul>
  );
}

Mit Objekten:

const studenten = [
  { id: 1, name: "Dan", fach: "Informatik" },
  { id: 2, name: "Sophie", fach: "Mathematik" },
];

function StudentenListe() {
  return (
    <ul>
      {studenten.map(student => (
        <li key={student.id}>
          {student.name} — {student.fach}
        </li>
      ))}
    </ul>
  );
}

filter — Elemente auswählen

filter gibt ein neues Array zurück, das nur die Elemente enthält, für die die Callback-Funktion true zurückgibt:

const zahlen = [1, 2, 3, 4, 5, 6];

const gerade = zahlen.filter(x => x % 2 === 0);
// [2, 4, 6]

In React typisch: Elemente entfernen, ohne das Original zu mutieren:

function entferneStudent(id) {
  setStudenten(studenten.filter(s => s.id !== id));
}

Oder Elemente nach Kriterien anzeigen:

function AktiveStudenten({ studenten }) {
  const aktive = studenten.filter(s => s.aktiv);

  return (
    <ul>
      {aktive.map(s => (
        <li key={s.id}>{s.name}</li>
      ))}
    </ul>
  );
}

find und findIndex — Einzelne Elemente suchen

find gibt das erste Element zurück, das die Bedingung erfüllt (oder undefined):

const studenten = [
  { id: 1, name: "Dan" },
  { id: 2, name: "Sophie" },
  { id: 3, name: "Max" },
];

const sophie = studenten.find(s => s.name === "Sophie");
// { id: 2, name: "Sophie" }

const unbekannt = studenten.find(s => s.name === "Anna");
// undefined

findIndex gibt den Index zurück (oder -1):

const index = studenten.findIndex(s => s.id === 2);
// 1

reduce — Auf einen Wert reduzieren

reduce durchläuft das Array und „sammelt” einen Wert auf:

const zahlen = [1, 2, 3, 4, 5];

const summe = zahlen.reduce((acc, zahl) => acc + zahl, 0);
// 15

Der Ablauf Schritt für Schritt:

Schritt	acc	zahl	Ergebnis
1	0	1	1
2	1	2	3
3	3	3	6
4	6	4	10
5	10	5	15

acc (Akkumulator) ist der aufgesammelte Wert, 0 ist der Startwert.

Objekt aus Array bauen:

const studenten = [
  { id: 1, name: "Dan" },
  { id: 2, name: "Sophie" },
];

const nachId = studenten.reduce((acc, student) => {
  acc[student.id] = student;
  return acc;
}, {});

// { 1: { id: 1, name: "Dan" }, 2: { id: 2, name: "Sophie" } }

Hinweis

reduce ist mächtig, aber oft schwerer zu lesen als map + filter. Verwende es gezielt — wenn du einen einzelnen Wert aus einem Array berechnen willst.

slice — Teilarray ohne Mutation

slice gibt einen Ausschnitt des Arrays zurück, ohne das Original zu ändern:

const buchstaben = ["a", "b", "c", "d", "e"];

buchstaben.slice(1, 3);  // ["b", "c"] (Index 1 bis 3, exklusiv)
buchstaben.slice(2);     // ["c", "d", "e"] (ab Index 2)
buchstaben.slice(-2);    // ["d", "e"] (die letzten 2)

Mutierende Methoden sicher verwenden

Manchmal brauchst du sort oder reverse. Erstelle dann zuerst eine Kopie:

const namen = ["Sophie", "Dan", "Max"];

// Falsch — mutiert das Original
namen.sort();

// Richtig — Kopie erstellen, dann sortieren
const sortiert = [...namen].sort();

Seit ES2023 gibt es auch nicht-mutierende Varianten der klassischen Methoden:

const zahlen = [3, 1, 2];

zahlen.toSorted();             // [1, 2, 3] — neues Array
zahlen.toReversed();           // [2, 1, 3] — neues Array
zahlen.toSpliced(1, 1, 99);   // [3, 99, 2] — neues Array

In React

Wenn du State sortieren willst:

// Falsch — mutiert den State direkt
studenten.sort((a, b) => a.name.localeCompare(b.name));
setStudenten(studenten);

// Richtig — neues sortiertes Array
setStudenten([...studenten].sort((a, b) => a.name.localeCompare(b.name)));

// Alternativ mit toSorted
setStudenten(studenten.toSorted((a, b) => a.name.localeCompare(b.name)));

Methoden verketten

Weil map, filter und andere nicht-mutierende Methoden neue Arrays zurückgeben, kannst du sie verketten:

const studenten = [
  { name: "Dan", note: 1.3, aktiv: true },
  { name: "Sophie", note: 2.0, aktiv: true },
  { name: "Max", note: 3.7, aktiv: false },
  { name: "Anna", note: 1.0, aktiv: true },
];

const ergebnis = studenten
  .filter(s => s.aktiv)
  .map(s => s.name)
  .sort();

// ["Anna", "Dan", "Sophie"]

In React:

function BestenlListe({ studenten }) {
  return (
    <ol>
      {studenten
        .filter(s => s.aktiv)
        .toSorted((a, b) => a.note - b.note)
        .map(s => (
          <li key={s.name}>{s.name} — Note: {s.note}</li>
        ))}
    </ol>
  );
}