So verwenden Sie JavaScripts structureClone() für Deep Object Cloning

Inhaltsverzeichnis

• Einführung
• Strukturiertes Clone verstehen und verwenden
• Fazit

Einführung

Haben Sie schon einmal versucht, ein Objekt in Javascript mit dem Spread-Operator (...) zu kopieren, nur um festzustellen, dass Änderungen am Original immer noch Auswirkungen auf die Kopie haben? Es kann frustrierend sein, wenn Sie eine vom Original unabhängige Kopie erwarten, am Ende aber eine Kopie mit dem Original verknüpft haben. Dies ist ein häufiges Problem beim Umgang mit tiefen Objekten und kann zu unerwarteten Fehlern führen. Glücklicherweise verfügt Javascript über die Methode „structuredClone()“, um dieses Problem zu lösen

StructuredClone() verstehen und verwenden

Zunächst wird die Methode „structuredClone()“ in Javascript verwendet, um tiefe Kopien von Objekten zu erstellen, einschließlich solcher mit verschachtelten Strukturen wie Arrays, Objekten und anderen komplexen Datentypen.

Sie fragen sich vielleicht: Was genau ist eine Kopie und wie viele Arten des Kopierens gibt es in JavaScript? Nun, wir haben die flachen und tiefen Exemplare. Während wir wissen, dass structureClone() Letzteres erstellt, erstellt die Verwendung des Spread-Operators Ersteres.

Eine flache Kopie kopiert nur die Eigenschaften der obersten Ebene eines Objekts, was bedeutet, dass verschachtelte Objekte oder Arrays weiterhin vom Original referenziert werden. Andererseits dupliziert eine tiefe Kopie alles, einschließlich verschachtelter Strukturen, und stellt so sicher, dass der Klon völlig unabhängig vom Original ist.

Sehen wir uns einige Beispiele der Shallow- und Deep-Kopien in Javascript an

Beispiel für eine flache Kopie

const person = {
    name: "John Doe", 
    languages: [
       "English", 
       "German"
    ]
};

const personClone = {...person}; // shallow copy

// Modify the languages array in the cloned object
personClone.languages.push("Spanish");

// Check the original and the cloned object
console.log(person.languages);  // Output: ["English", "German", "Spanish"]
console.log(personClone.languages);  // Output: ["English", "German", "Spanish"]
console.log(person.languages === personClone.languages) // true

// However, changing a primitive value won't affect the original
personClone.name = "Jane Doe";

console.log(person.name);  // Output: "John Doe"
console.log(personClone.name);  // Output: "Jane Doe"
console.log(person.name === personClone.name) // false

Aus dem obigen Code können wir Folgendes sagen:

• Die Eigenschaft name ist ein primitiver Wert, daher hat eine Änderung in der flachen Kopie (personClone.name = "Jane Doe";) keine Auswirkungen auf das Original (person.name)
• Das Array Sprachen ist nicht primitiv, sodass sowohl das Original (Person) als auch der Klon (PersonClone) dieselbe Referenz haben. Das Ändern des personClone-Arrays wirkt sich auf das ursprüngliche Personen-Array aus

Deep Copy-Beispiel

const person = {
    name: "John Doe", 
    languages: [
       "English", 
       "German"
    ]
};

// Create a deep copy using structuredClone
const deepClonedPerson = structuredClone(person);

// Modify the deep cloned object
deepClonedPerson.languages.push("Spanish");

// Check if the original and the deep clone are equal
console.log(person === deepClonedPerson);  // Output: false
console.log(person.languages) // ['English', 'German']
console.log(deepClonedPerson.languages) // ['English', 'German', 'Spanish']
console.log(person.languages === deepClonedPerson.languages);  // Output: false

// Check if the properties are equal
console.log(person.name === deepClonedPerson.name);  // Output: false

// Changes in the deep cloned object don't affect the original
deepClonedPerson.name = "Jane Doe";

console.log(person.name);  // Output: "John Doe"
console.log(deepClonedPerson.name);  // Output: "Jane Doe"

Aus dem obigen Code können wir Folgendes schließen:

• person === deepClonedPerson bestätigt, dass structureClone() ein neues, unabhängiges Objekt erstellt.
• person.sprachen === deepClonedPerson.sprachen zeigt, dass das verschachtelte Array auch unabhängig kopiert wird.
• Durch die Überprüfung von person.name === deepClonedPerson.name wird sichergestellt, dass Änderungen am Deep Clone keine Auswirkungen auf das Originalobjekt haben.
• Sprachwerte zeigen, dass Änderungen am tiefen Klon (deepClonedPerson) nicht im Original (Person) widergespiegelt werden

Abschluss

In diesem Artikel haben wir untersucht, wie die Methode „structuredClone()“ eine zuverlässige Möglichkeit bietet, tiefe Kopien von Objekten zu erstellen und sicherzustellen, dass verschachtelte Strukturen völlig unabhängig vom Original sind.

Vielen Dank, dass Sie diesen Artikel gelesen haben. Wenn Sie diesen Artikel hilfreich fanden, liken Sie ihn bitte und teilen Sie ihn mit anderen, die möglicherweise davon profitieren könnten, etwas über Deep Copy in Javascript zu lernen

Was denken Sie zu diesem Thema? Sind Ihnen andere Techniken zum Kopieren von Objekten in Javascript begegnet? Teilen Sie Ihre Erkenntnisse gerne im Kommentarbereich unten mit.

P.S. Ich bin derzeit auf der Suche nach Möglichkeiten für Frontend-Entwickler. Wenn Sie Hinweise haben oder jemanden einstellen möchten, schauen Sie sich gerne meinen Lebenslauf an oder vernetzen Sie sich mit mir auf LinkedIn. Ich würde gerne von Ihnen hören!

Das obige ist der detaillierte Inhalt vonSo verwenden Sie JavaScripts structureClone() für Deep Object Cloning. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!