JavaScript Academy · Lektion

structuredClone für tiefe Kopien

Klonen Sie komplexe Objekte sicher.

structuredClone für tiefe Kopien ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 4 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.

Das Problem mit tiefen Kopien

Spread und Object.assign erstellen flache Kopien: Verschachtelte Objekte werden per Referenz gemeinsam genutzt. Um eine verschachtelte Struktur vollständig zu duplizieren, benötigen Sie eine tiefe Kopie.

structuredClone ist die integrierte Lösung.

Warum Spread nicht ausreicht

Eine Spread-Kopie verwendet verschachtelte Objekte gemeinsam. Wenn Sie den verschachtelten Teil der Kopie ändern, wirkt sich das auch auf das Original aus.

const original = { user: { name: 'Ada' } };
const shallow = { ...original };

shallow.user.name = 'Grace';
console.log(original.user.name);

structuredClone schafft Abhilfe

structuredClone kopiert die gesamte Struktur rekursiv. Änderungen am Klon wirken sich niemals auf das Original aus.

const original = { user: { name: 'Ada' } };
const deep = structuredClone(original);

deep.user.name = 'Grace';
console.log(original.user.name);
console.log(deep.user.name);

Unabhängige verschachtelte Objekte

Nach dem Klonen ist jedes verschachtelte Objekt eine eigenständige Referenz. Deshalb ist der Identitätsvergleich auf jeder Ebene false.

const original = { a: { b: { c: 1 } } };
const clone = structuredClone(original);

console.log(original === clone);
console.log(original.a === clone.a);
console.log(original.a.b === clone.a.b);

Arrays klonen

Auch Arrays, einschließlich verschachtelter Arrays, werden tief geklont. Wenn Sie ein verschachteltes Array des Klons erweitern, bleibt die Quelle unverändert.

const original = { tags: ['a', 'b'], meta: { nested: [1] } };
const clone = structuredClone(original);

clone.meta.nested.push(2);
console.log(original.meta.nested);
console.log(clone.meta.nested);

Unterstützt Maps und Sets

Im Gegensatz zu JSON.parse(JSON.stringify(...)) unterstützt structuredClone viele integrierte Typen, darunter Map, Set und Date.

const original = { items: new Set([1, 2, 3]), when: new Date(0) };
const clone = structuredClone(original);

clone.items.add(4);
console.log([...original.items]);
console.log([...clone.items]);
console.log(clone.when instanceof Date);

Unterstützt zirkuläre Referenzen

Ein Objekt, das auf sich selbst verweist, bringt den JSON-Trick zum Scheitern, lässt sich mit structuredClone aber problemlos klonen.

const node = { name: 'root' };
node.self = node;

const clone = structuredClone(node);
console.log(clone.name);
console.log(clone.self === clone);

Was nicht geklont werden kann

structuredClone kann Funktionen und DOM-Knoten nicht kopieren; es löst einen DataCloneError aus. Außerdem werden Prototypketten entfernt, sodass einfache Objekte zurückgegeben werden.

try {
  structuredClone({ fn: () => 1 });
} catch (e) {
  console.log(e.name);
}

Prototypen bleiben nicht erhalten

Eine geklonte Klasseninstanz wird zu einem einfachen Objekt: Die Daten werden kopiert, aber Methoden und der Prototyp gehen verloren.

class Point {
  constructor(x) { this.x = x; }
  show() { return this.x; }
}
const p = new Point(5);
const clone = structuredClone(p);

console.log(clone.x);
console.log(clone instanceof Point);

structuredClone im Vergleich zum JSON-Trick

Der alte Ansatz JSON.parse(JSON.stringify(x)) verliert undefined, Datumswerte werden zu Zeichenfolgen und bei Zyklen schlägt er fehl. structuredClone vermeidet diese Probleme bei serialisierbaren Daten.

const data = { when: new Date(0), missing: undefined, n: 5 };
const viaJson = JSON.parse(JSON.stringify(data));
const viaClone = structuredClone(data);

console.log(typeof viaJson.when);
console.log(viaClone.when instanceof Date);

Warum das wichtig ist

structuredClone bietet eine zuverlässige, integrierte Möglichkeit, einfache Daten tief zu kopieren, und ersetzt fragile, selbst geschriebene Klonlösungen. Verwenden Sie es, wenn Sie eine vollständig unabhängige Kopie eines verschachtelten Zustands benötigen. Denken Sie daran, dass Funktionen und Prototypen entfernt werden.

const state = { list: [{ id: 1 }], settings: { theme: 'dark' } };
const snapshot = structuredClone(state);
snapshot.list[0].id = 99;
console.log(state.list[0].id);
console.log(snapshot.list[0].id);

Kurzer Test

Warum verwenden Sie für verschachtelte Daten structuredClone statt des Spread-Operators?

Zusammenfassung: structuredClone

Sie haben gelernt, wie Sie zuverlässig tief kopieren:

Spread kopiert flach; structuredClone kopiert tief.
Es unterstützt Map, Set, Date und zirkuläre Referenzen.
Es kann keine Funktionen oder DOM-Knoten klonen und entfernt Prototypen.
Es ist ein sicherer Ersatz für den JSON.parse(JSON.stringify())-Trick.

Häufig gestellte Fragen

Ist die Lektion „structuredClone für tiefe Kopien“ kostenlos?

Ja — der vollständige Text von „structuredClone für tiefe Kopien“ 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 „structuredClone für tiefe Kopien“?

Klonen Sie komplexe Objekte sicher. 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 4 von 4.

Wie lange dauert die Lektion „structuredClone für tiefe Kopien“?

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