Bei der Arbeit mit Objekten in JavaScript ist es entscheidend, den Unterschied zwischen Objektverweisen und Objektkopieren zu verstehen. Hier ist eine detaillierte Übersicht:
let obj1 = { name: "Alice" }; let obj2 = obj1; // obj2 now references the same object as obj1 obj2.name = "Bob"; console.log(obj1.name); // Output: "Bob"
let a = { key: "value" }; let b = { key: "value" }; console.log(a === b); // Output: false (different references) let c = a; console.log(a === c); // Output: true (same reference)
Es gibt zwei Haupttypen des Objektkopierens: flache Kopie und tiefe Kopie.
Techniken für flaches Kopieren:
Object.assign():
let original = { name: "Alice", details: { age: 25 } }; let copy = Object.assign({}, original); copy.details.age = 30; console.log(original.details.age); // Output: 30 (shared reference)
Spread-Operator (...):
let original = { name: "Alice", details: { age: 25 } }; let copy = { ...original }; copy.details.age = 30; console.log(original.details.age); // Output: 30 (shared reference)
Beide Methoden erstellen eine flache Kopie, was bedeutet, dass verschachtelte Objekte weiterhin verknüpft sind.
Techniken für Deep Copy:
JSON.parse() und JSON.stringify():
let original = { name: "Alice", details: { age: 25 } }; let copy = JSON.parse(JSON.stringify(original)); copy.details.age = 30; console.log(original.details.age); // Output: 25
StructuredClone() (Modernes JavaScript):
let original = { name: "Alice", details: { age: 25 } }; let copy = structuredClone(original); copy.details.age = 30; console.log(original.details.age); // Output: 25
Benutzerdefinierte Bibliotheken:
let obj1 = { name: "Alice" }; let obj2 = obj1; // obj2 now references the same object as obj1 obj2.name = "Bob"; console.log(obj1.name); // Output: "Bob"
Action | Result |
---|---|
Assignment (=) | Creates a reference. Changes to one variable affect the other. |
Shallow Copy | Creates a new object but retains references for nested objects. |
Deep Copy | Creates a completely independent object, including nested structures. |
Ergebnis
Das obige ist der detaillierte Inhalt vonVerstehen Sie JavaScript-Objektreferenzen und das Kopieren – kurze Erklärung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!