Kopieren von JavaScript -Objekten ist nicht so einfach, wie es scheint. Das Verständnis, wie Objekte und Referenzen während dieses Prozesses funktionieren, ist für Webentwickler von entscheidender Bedeutung und kann Stunden der Debugging -Zeit sparen. Dies wird immer wichtiger, wenn Sie große staatliche Anwendungen verwenden, wie z. B. die in React oder Vue gebauten.
flache Kopie und Deep Copy beziehen Sie sich, wie wir Kopien von Objekten in JavaScript erstellen und welche Daten wir in "Kopie" erstellen. In diesem Artikel werden wir tief in die Unterschiede zwischen diesen Methoden eintauchen, ihre praktischen Anwendungen untersuchen und mögliche Fallstricke aufdecken, die bei der Verwendung auftreten können.
flache Kopie bezieht sich auf den Prozess des Erstellens eines neuen Objekts, bei dem es sich um eine Kopie eines vorhandenen Objekts handelt, dessen Eigenschaften sich auf denselben numerischen Wert oder Objekt wie das ursprüngliche Objekt beziehen. In JavaScript wird dies normalerweise mit Methoden wie Object.assign() oder Expansionssyntax ({...originalObject}) erreicht. Durch die flache Kopie werden nur neue Verweise auf vorhandene Objekte oder Werte erstellt und erstellt keine tiefe Kopie, was bedeutet, dass noch verschachtelte Objekte verwiesen werden, nicht Duplikate.
Schauen wir uns das folgende Code -Beispiel an. Das neu erstellte Objekt shallowCopyZoo ist eine Kopie von zoo, die durch Erweiterung des Bedieners erstellt wurde, das einige unerwartete Konsequenzen hat.
let zoo = {
name: "Amazing Zoo",
location: "Melbourne, Australia",
animals: [
{
species: "Lion",
favoriteTreat: "?",
},
{
species: "Panda",
favoriteTreat: "?",
},
],
};
let shallowCopyZoo = { ...zoo };
shallowCopyZoo.animals[0].favoriteTreat = "?";
console.log(zoo.animals[0].favoriteTreat);
// "?"，而不是 "?" Aber mal sehen, was genau in shallowCopyZoo ist. Die Eigenschaften name und location sind die ursprünglichen Werte (Zeichenfolgen), so dass ihre Werte kopiert werden. Die Eigenschaft animals ist jedoch ein Array von Objekten, also ist das, was kopiert wird, ein Verweis auf dieses Array, nicht auf das Array selbst.
Sie können den strengen Gleichstellungsoperator (===) verwenden, um dies schnell zu testen (wenn Sie mir nicht glauben). Nur wenn sich ein Objekt auf dasselbe Objekt bezieht, ist ein Objekt einem anderen Objekt gleich (siehe primitive Datentypen und Referenzdatentypen). Beachten Sie, dass die animals -attribute in beiden gleich sind, das Objekt selbst nicht gleich ist.
let zoo = {
name: "Amazing Zoo",
location: "Melbourne, Australia",
animals: [
{
species: "Lion",
favoriteTreat: "?",
},
{
species: "Panda",
favoriteTreat: "?",
},
],
};
let shallowCopyZoo = { ...zoo };
shallowCopyZoo.animals[0].favoriteTreat = "?";
console.log(zoo.animals[0].favoriteTreat);
// "?"，而不是 "?"Dies kann potenzielle Probleme in der Codebasis verursachen und ist besonders schwierig, wenn es um große Modifikationen geht. Das Ändern verschachtelter Objekte in flachen Repliken wirkt sich auch auf das ursprüngliche Objekt und alle anderen flachen Repliken aus, da sie alle dieselbe Referenz haben.
Deep Copy ist ein Trick, um ein neues Objekt zu erstellen, das eine genaue Kopie eines vorhandenen Objekts ist. Dies beinhaltet das Kopieren aller Eigenschaften und alle verschachtelten Objekte und nicht alle Referenzen. Tiefes Klonen ist nützlich, wenn Sie zwei separate Objekte benötigen, die keine Referenzen teilen, um sicherzustellen, dass Änderungen an einem Objekt die andere nicht beeinflussen.
Programmierer verwenden häufig ein tiefes Klonen, wenn sie sich mit Anwendungsstatusobjekten in komplexen Anwendungen befassen. Das Erstellen eines neuen Zustandsobjekts ohne Beeinflussung des vorherigen Zustands ist entscheidend für die Aufrechterhaltung der Anwendungsstabilität und die korrekte Implementierung der Rückgängigkeits-/Wiederherstellungsfunktionalität.
JSON.stringify() und JSON.parse() für Deep Copy Eine beliebte und bibliotheksfreie Tiefenkopie-Methode besteht darin, die integrierten Methoden JSON.stringify() und JSON.parse() zu verwenden.
parse(stringify()) Die Methode ist nicht perfekt. Beispielsweise werden spezielle Datentypen wie Date in Zeichenfolgen konvertiert und undefinierte Werte werden ignoriert. Wie bei allen Optionen in diesem Artikel sollten Sie es anhand Ihres spezifischen Anwendungsfalls berücksichtigen.
Im folgenden Code werden wir diese Methoden verwenden, um eine deepCopy -Funktion zu erstellen, um ein Objekt tief zu klonen. Dann kopieren wir das playerProfile Objekt und ändern das kopierte Objekt, ohne das ursprüngliche Objekt zu beeinflussen. Dies zeigt den Wert der tiefen Replikation bei der Aufrechterhaltung unabhängiger Objekte, die keine Referenzen teilen.
console.log(zoo.animals === shallowCopyZoo.animals) // true console.log(zoo === shallowCopyZoo) // false
Es gibt auch eine Vielzahl von Bibliotheken von Drittanbietern, die tiefe Replikationslösungen bieten.
cloneDeep()
extend()
Die [deep = true] Immerbibliothek wurde für React-Redux-Entwickler erstellt und bietet bequeme Tools zum Ändern von Objekten. Nachteile der tiefen Kopie
const playerProfile = {
name: 'Alice',
level: 10,
achievements: [
{
title: 'Fast Learner',
emoji: '?'
},
{
title: 'Treasure Hunter',
emoji: '?'
}
]
};
function deepCopy(obj) {
return JSON.parse(JSON.stringify(obj));
}
const clonedProfile = deepCopy(playerProfile);
console.log(clonedProfile);
// 输出与playerProfile相同
// 修改克隆的配置文件而不影响原始配置文件
clonedProfile.achievements.push({ title: 'Marathon Runner', emoji: '?' });
console.log(playerProfile.achievements.length); // 输出：2
console.log(clonedProfile.achievements.length); // 输出：3Date, RegExp, DOM -Elemente). Wenn beispielsweise ein tiefes Kopieren eines Objekts, das eine Funktion enthält, kann ein Verweis auf die Funktion kopiert werden, aber der Verschluss der Funktion und ihr gebundener Kontext wird nicht kopiert. Ebenso können Objekte mit besonderen Merkmalen ihre einzigartigen Eigenschaften und ihr Verhalten verlieren, wenn sie tief repliziert werden. JSON.parse(JSON.stringify(obj)) haben auch einige Einschränkungen, z. Während es einige Bibliotheken von Drittanbietern gibt, wie z. _.cloneDeep()
FAQs über flache und tiefe Replikation in JavaScript (FAQ)
Wie funktioniert der Erweiterungsbetreiber in einer flachen Kopie?
Ja, Sie können die JSON -Methode verwenden, um ein tiefes Kopieren in JavaScript durchzuführen. Eine Kombination aus JSON.stringify() und JSON.parse() Methoden erzeugt eine tiefe Kopie eines Objekts. JSON.stringify() konvertiert das Objekt in eine Zeichenfolge, JSON.parse() analysiert die Zeichenfolge zurück in das neue Objekt. Diese Methode hat jedoch einige Einschränkungen, da sie die Methode nicht kopiert und nicht für spezielle JavaScript -Objekte wie Date, RegExp, Map, Set usw. geeignet ist.
flache Kopie reproduziert nur die Attribute und Verweise auf die erste Ebene auf verschachtelte Objekte. Wenn das ursprüngliche Objekt verschachtelte Objekte enthält, beeinflussen Änderungen an diesen verschachtelten Objekten das ursprüngliche Objekt und das kopierte Objekt. Dies kann zu unerwarteten Ergebnissen und Fehlern im Code führen.
Object.assign() Wie funktioniert die Methode in einer flachen Kopie? Object.assign() Methode wird verwendet, um die Werte aller aufzählbaren Eigenschaften eines oder der Quellobjekte in das Zielobjekt zu kopieren. Es gibt das Zielobjekt zurück. Es führt jedoch ein flaches Kopieren durch, was bedeutet, dass es nur die Eigenschaften der ersten Ebene und Verweise auf verschachtelte Objekte kopiert.
Der beste Weg, um Objekte in JavaScript zu kopieren, hängt von den spezifischen Anforderungen des Codes ab. Wenn Ihr Objekt keine Methoden oder spezielle JavaScript -Objekte enthält, können Sie eine Kombination aus Methoden JSON.stringify() und JSON.parse() verwenden. Für komplexere Objekte möchten Sie Bibliotheken wie Lodash verwenden, die tiefgreifende Klonfunktionen liefern.
Nein, der Erweiterungsoperator in JavaScript führt nur ein flaches Kopieren durch. Es kopiert das Attribut der ersten Ebene und Verweise auf verschachtelte Objekte. Um eine tiefe Replikation durchzuführen, müssen Sie eine andere Methode oder Bibliothek verwenden.
tiefe Replikation kann mehr Ressourcen als flache Replikation konsumieren, insbesondere für große Objekte. Dies liegt daran, dass Deep Copy neue Instanzen für alle verschachtelten Objekte erstellt, die mehr Speicher- und Verarbeitungsleistung in Anspruch nehmen können.
JSON.stringify() und JSON.parse() verarbeiten keine kreisförmigen Referenzen und werfen einen Fehler. Eine kreisförmige Referenz tritt auf, wenn sich die Eigenschaften eines Objekts auf das Objekt selbst beziehen. Um kreisförmige Referenzen zu verarbeiten, müssen Sie eine Bibliothek verwenden, die sie unterstützt, z. B. Lodash.
Das Verständnis des Unterschieds zwischen flacher und tiefer Replikation ist entscheidend für die Verwaltung von Daten in JavaScript. Es wirkt sich aus, wie Ihre Objekte miteinander interagieren. Wenn Sie nicht vorsichtig sind, kann das flache Kopieren zu unerwarteten Ergebnissen und Fehlern führen, da Änderungen an verschachtelten Objekten die ursprünglichen und kopierten Objekte beeinflussen. Die Deep Copy hingegen stellt sicher, dass Ihr Kopierobjekt völlig unabhängig vom ursprünglichen Objekt ist.
Das obige ist der detaillierte Inhalt vonFlach und tiefes Kopieren in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
