JavaScript Structured Clone: Tiefes Kopieren von Objekten meistern

In JavaScript ist das Erstellen von Kopien von Objekten und Arrays eine häufige Aufgabe. Während eine einfache Zuweisung (`=`) bei primitiven Werten funktioniert, erzeugt sie bei Objekten nur eine Referenz. Das bedeutet, dass Änderungen am kopierten Objekt auch das Original beeinflussen. Um unabhängige Kopien zu erstellen, benötigen wir einen Mechanismus für eine tiefe Kopie. Der Structured-Clone-Algorithmus bietet eine leistungsstarke und vielseitige Möglichkeit, dies zu erreichen, insbesondere beim Umgang mit komplexen Datenstrukturen.

Was ist Structured Clone?

Der Structured-Clone-Algorithmus ist ein in JavaScript integrierter Mechanismus, der es Ihnen ermöglicht, tiefe Kopien von JavaScript-Werten zu erstellen. Im Gegensatz zur einfachen Zuweisung oder zu flachen Kopiermethoden (wie `Object.assign()` oder der Spread-Syntax `...`) erstellt das strukturierte Klonen vollständig neue Objekte und Arrays, indem es alle verschachtelten Eigenschaften rekursiv kopiert. Dies stellt sicher, dass das kopierte Objekt vollständig unabhängig vom Original ist.

Dieser Algorithmus wird auch intern für die Kommunikation zwischen Web Workern und beim Speichern von Daten mit der History API verwendet. Zu verstehen, wie er funktioniert, kann Ihnen helfen, Ihren Code zu optimieren und unerwartetes Verhalten zu vermeiden.

Wie Structured Clone funktioniert

Der Structured-Clone-Algorithmus funktioniert, indem er den Objektgraphen durchläuft und neue Instanzen von jedem angetroffenen Objekt und Array erstellt. Er verarbeitet verschiedene Datentypen, darunter:

• Primitive Typen (Zahlen, Zeichenketten, Booleans, null, undefined) - werden als Wert kopiert.
• Objekte und Arrays - werden rekursiv geklont.
• Dates (Datumsobjekte) - werden als neue Date-Objekte mit demselben Zeitstempel geklont.
• Reguläre Ausdrücke - werden als neue RegExp-Objekte mit demselben Muster und denselben Flags geklont.
• Blobs und File-Objekte - werden geklont (kann jedoch das Lesen der gesamten Dateidaten erfordern).
• ArrayBuffers und TypedArrays - werden durch Kopieren der zugrunde liegenden Binärdaten geklont.
• Maps und Sets - werden rekursiv geklont, wodurch neue Maps und Sets mit geklonten Schlüsseln und Werten erstellt werden.

Der Algorithmus behandelt auch zirkuläre Referenzen und verhindert so unendliche Rekursion.

Verwendung von Structured Clone

Obwohl es nicht in allen JavaScript-Umgebungen eine direkte `structuredClone()`-Funktion gibt (ältere Browser haben möglicherweise keine native Unterstützung), wird der zugrunde liegende Mechanismus in verschiedenen Kontexten verwendet. Eine gängige Methode, darauf zuzugreifen, ist über die `postMessage`-API, die für die Kommunikation zwischen Web Workern oder iFrames verwendet wird.

Methode 1: Verwendung von `postMessage` (Empfohlen für breite Kompatibilität)

Dieser Ansatz nutzt die `postMessage`-API, die intern den Structured-Clone-Algorithmus verwendet. Wir erstellen einen temporären iFrame, senden das Objekt mit `postMessage` an diesen und empfangen es dann zurück.

            function structuredClone(obj) {
  return new Promise(resolve => {
    const { port1, port2 } = new MessageChannel();
    port1.onmessage = ev => resolve(ev.data);
    port2.postMessage(obj);
  });
}

// Anwendungsbeispiel
const originalObject = { 
  name: "John Doe",
  age: 30, 
  address: { city: "New York", country: "USA" }
};

async function deepCopyExample() {
  const clonedObject = await structuredClone(originalObject);

  console.log("Original Object:", originalObject);
  console.log("Cloned Object:", clonedObject);

  // Das geklonte Objekt ändern
  clonedObject.address.city = "Los Angeles";

  console.log("Original Object (after modification):", originalObject); // Unverändert
  console.log("Cloned Object (after modification):", clonedObject); // Geändert
}

deepCopyExample();

            

              
                Copy
              
            
          

Diese Methode ist über verschiedene Browser und Umgebungen hinweg weitgehend kompatibel.

Methode 2: Natives `structuredClone` (Moderne Umgebungen)

Viele moderne JavaScript-Umgebungen bieten mittlerweile direkt eine eingebaute `structuredClone()`-Funktion an. Dies ist die effizienteste und einfachste Methode, um eine tiefe Kopie durchzuführen, wenn sie verfügbar ist.

            // Prüfen, ob structuredClone unterstützt wird
if (typeof structuredClone === 'function') {
  const originalObject = { 
    name: "Alice Smith",
    age: 25, 
    address: { city: "London", country: "UK" }
  };

  const clonedObject = structuredClone(originalObject);

  console.log("Original Object:", originalObject);
  console.log("Cloned Object:", clonedObject);

  // Das geklonte Objekt ändern
  clonedObject.address.city = "Paris";

  console.log("Original Object (after modification):", originalObject); // Unverändert
  console.log("Cloned Object (after modification):", clonedObject); // Geändert
}
else {
  console.log("structuredClone wird in dieser Umgebung nicht unterstützt. Verwenden Sie den postMessage-Polyfill.");
}

            

              
                Copy
              
            
          

Bevor Sie `structuredClone` verwenden, ist es wichtig zu prüfen, ob es in der Zielumgebung unterstützt wird. Falls nicht, greifen Sie auf den `postMessage`-Polyfill oder eine andere Alternative für tiefe Kopien zurück.

Einschränkungen von Structured Clone

Obwohl leistungsstark, hat Structured Clone einige Einschränkungen:

• Funktionen: Funktionen können nicht geklont werden. Wenn ein Objekt eine Funktion enthält, geht sie während des Klonvorgangs verloren. Die Eigenschaft wird im geklonten Objekt auf `undefined` gesetzt.
• DOM-Knoten: DOM-Knoten (wie Elemente auf einer Webseite) können nicht geklont werden. Der Versuch, sie zu klonen, führt zu einem Fehler.
• Fehlerobjekte: Bestimmte Fehlerobjekte können ebenfalls nicht geklont werden, und der Structured-Clone-Algorithmus kann einen Fehler auslösen, wenn er auf sie stößt.
• Prototyp-Ketten: Die Prototyp-Kette von Objekten wird nicht beibehalten. Geklonte Objekte haben `Object.prototype` als ihren Prototyp.
• Leistung: Tiefes Kopieren kann rechenintensiv sein, insbesondere bei großen und komplexen Objekten. Berücksichtigen Sie die Leistungsauswirkungen bei der Verwendung von Structured Clone, insbesondere in leistungskritischen Anwendungen.

Wann sollte man Structured Clone verwenden?

Structured Clone ist in mehreren Szenarien wertvoll:

• Web Worker: Beim Übergeben von Daten zwischen dem Hauptthread und Web Workern ist Structured Clone der primäre Mechanismus.
• History API: Die Methoden `history.pushState()` und `history.replaceState()` verwenden Structured Clone, um Daten im Browserverlauf zu speichern.
• Tiefes Kopieren von Objekten: Wenn Sie eine vollständig unabhängige Kopie eines Objekts erstellen müssen, bietet Structured Clone eine zuverlässige Lösung. Dies ist besonders nützlich, wenn Sie die Kopie ändern möchten, ohne das Original zu beeinflussen.
• Serialisierung und Deserialisierung: Obwohl es nicht sein Hauptzweck ist, kann Structured Clone als eine grundlegende Form der Serialisierung und Deserialisierung verwendet werden (obwohl JSON normalerweise für die Persistenz bevorzugt wird).

Alternativen zu Structured Clone

Wenn Structured Clone für Ihre Anforderungen nicht geeignet ist (z. B. aufgrund seiner Einschränkungen oder Leistungsbedenken), ziehen Sie diese Alternativen in Betracht:

• JSON.parse(JSON.stringify(obj)): Dies ist ein gängiger Ansatz für tiefe Kopien, hat aber Einschränkungen. Er funktioniert nur für Objekte, die in JSON serialisiert werden können (keine Funktionen, Datumsobjekte werden in Zeichenketten umgewandelt usw.) und kann bei komplexen Objekten langsamer sein als Structured Clone.
• Lodashs `_.cloneDeep()`: Lodash bietet eine robuste `cloneDeep()`-Funktion, die viele Randfälle behandelt und eine gute Leistung bietet. Es ist eine gute Option, wenn Sie Lodash bereits in Ihrem Projekt verwenden.
• Benutzerdefinierte Funktion für tiefe Kopien: Sie können Ihre eigene Funktion für tiefe Kopien mithilfe von Rekursion schreiben. Dies gibt Ihnen die volle Kontrolle über den Klonvorgang, erfordert jedoch mehr Aufwand und kann fehleranfällig sein. Stellen Sie sicher, dass Sie zirkuläre Referenzen korrekt behandeln.

Praktische Beispiele und Anwendungsfälle

Beispiel 1: Benutzerdaten vor der Änderung kopieren

Stellen Sie sich vor, Sie erstellen eine Benutzerverwaltungsanwendung. Bevor Sie einem Benutzer erlauben, sein Profil zu bearbeiten, möchten Sie möglicherweise eine tiefe Kopie seiner aktuellen Daten erstellen. Dies ermöglicht es Ihnen, zu den ursprünglichen Daten zurückzukehren, wenn der Benutzer die Bearbeitung abbricht oder wenn während des Aktualisierungsvorgangs ein Fehler auftritt.

            let userData = {
  id: 12345,
  name: "Carlos Rodriguez",
  email: "carlos.rodriguez@example.com",
  preferences: {
    language: "es",
    theme: "dark"
  }
};

async function editUser(newPreferences) {
  // Eine tiefe Kopie der Originaldaten erstellen
  const originalUserData = await structuredClone(userData);

  try {
    // Die Benutzerdaten mit den neuen Einstellungen aktualisieren
    userData.preferences = newPreferences;

    // ... Die aktualisierten Daten auf dem Server speichern ...

    console.log("Benutzerdaten erfolgreich aktualisiert!");
  } catch (error) {
    console.error("Fehler beim Aktualisieren der Benutzerdaten. Ursprüngliche Daten werden wiederhergestellt.", error);
    // Zu den ursprünglichen Daten zurückkehren
    userData = originalUserData;
  }
}

// Anwendungsbeispiel
editUser({ language: "en", theme: "light" });

            

              
                Copy
              
            
          

Beispiel 2: Daten an einen Web Worker senden

Web Worker ermöglichen es Ihnen, rechenintensive Aufgaben in einem separaten Thread auszuführen, wodurch verhindert wird, dass der Hauptthread nicht mehr reagiert. Wenn Sie Daten an einen Web Worker senden, müssen Sie Structured Clone verwenden, um sicherzustellen, dass die Daten ordnungsgemäß übertragen werden.

            // Hauptthread
const worker = new Worker('worker.js');

let dataToSend = {
  numbers: [1, 2, 3, 4, 5],
  text: "Process this data in the worker."
};

worker.postMessage(dataToSend);

worker.onmessage = (event) => {
  console.log("Received from worker:", event.data);
};

// worker.js (Web Worker)
self.onmessage = (event) => {
  const data = event.data;
  console.log("Worker received data:", data);

  // ... Eine Verarbeitung der Daten durchführen ...
  const processedData = data.numbers.map(n => n * 2);

  self.postMessage(processedData);
};

            

              
                Copy
              
            
          

Best Practices für die Verwendung von Structured Clone

• Verstehen Sie die Einschränkungen: Seien Sie sich der Datentypen bewusst, die nicht geklont werden können (Funktionen, DOM-Knoten usw.), und behandeln Sie sie entsprechend.
• Berücksichtigen Sie die Leistung: Bei großen und komplexen Objekten kann Structured Clone langsam sein. Bewerten Sie, ob es die effizienteste Lösung für Ihre Anforderungen ist.
• Prüfen Sie die Unterstützung: Wenn Sie die native `structuredClone()`-Funktion verwenden, prüfen Sie, ob sie in der Zielumgebung unterstützt wird. Verwenden Sie bei Bedarf einen Polyfill.
• Umgang mit zirkulären Referenzen: Der Structured-Clone-Algorithmus behandelt zirkuläre Referenzen, aber seien Sie sich ihrer in Ihren Datenstrukturen bewusst.
• Vermeiden Sie das Klonen unnötiger Daten: Klonen Sie nur die Daten, die Sie tatsächlich kopieren müssen. Vermeiden Sie das Klonen großer Objekte oder Arrays, wenn nur ein kleiner Teil davon geändert werden muss.

Fazit

Der JavaScript Structured-Clone-Algorithmus ist ein leistungsstarkes Werkzeug zum Erstellen tiefer Kopien von Objekten und Arrays. Das Verständnis seiner Fähigkeiten und Grenzen ermöglicht es Ihnen, ihn in verschiedenen Szenarien effektiv einzusetzen, von der Kommunikation mit Web Workern bis hin zum tiefen Kopieren von Objekten. Indem Sie die Alternativen berücksichtigen und Best Practices befolgen, können Sie sicherstellen, dass Sie die für Ihre spezifischen Anforderungen am besten geeignete Methode verwenden.

Denken Sie daran, immer die Leistungsauswirkungen zu berücksichtigen und den richtigen Ansatz basierend auf der Komplexität und Größe Ihrer Daten zu wählen. Indem Sie Structured Clone und andere Techniken für tiefe Kopien meistern, können Sie robusteren und effizienteren JavaScript-Code schreiben.

Weiterführende Lektüre

• MDN Web Docs: Structured-Clone-Algorithmus
• MDN Web Docs: structuredClone
• MDN Web Docs: Worker.postMessage()