Tiefes Klonen eines Objekts in JavaScript

1. Untiefe Kopie vs Tiefe Kopie
2. Flache Kopiermethoden in JavaScript
3. Deep Copy-Methoden in JavaScript

JavaScript ist eine Sprache der Objekte. Fast alles ist ein Objekt in JavaScript. Boolesche Werte, Zahlen, Zeichenketten, Daten, Mathematik, Regex, Arrays, Funktionen und Objekte selbst sind Objekte. Sie sind eine Sammlung von Schlüssel-Wert-Paaren, die aus verschiedenen Attributen und Methoden bestehen. Sie werden direkt im Speicher gespeichert und können nur als Referenz kopiert werden. Eine Variable speichert das Objekt nicht, sondern nur einen Verweis auf dieses Objekt im Speicher. Wenn wir also versuchen, eine Objektvariable zu kopieren, erstellen wir am Ende einen zusätzlichen Verweis auf dasselbe Objekt. Diese Methode wird als flache Kopie bezeichnet. Es ist nicht ideal, da wir nicht möchten, dass Änderungen am ursprünglichen Objekt den Klon beeinflussen. Dies erfordert eine Methode zum tiefen Klonen des Objekts. In diesem Tutorial erfahren Sie, wie Sie ein Objekt in JavaScript tief klonen.

Untiefe Kopie vs Tiefe Kopie

Eine flache Kopie ist eine bitweise Kopie des Objekts. Das neu erstellte Objekt kopiert erfolgreich die Grundelemente wie Zahlen, Boolesche Werte und Zeichenketten, kopiert jedoch keine Verweise auf Objekte. Nur die Referenzadressen führen dazu, dass ein Zeiger auf dasselbe Objekt zeigt. Alle am Originalobjekt vorgenommenen Änderungen werden in der flachen Kopie wiedergegeben.

Andererseits kopiert eine tiefe Kopie nicht nur die Adresse/Referenz auf das Originalobjekt, sondern das gesamte Objekt. Das neu erstellte Objekt ist nicht vom kopierten Objekt abhängig. JavaScript bietet uns verschiedene integrierte Methoden zum Kopieren eines Objekts, aber die flache Kopie ist in den meisten Fällen das Standardverhalten.

Flache Kopiermethoden in JavaScript

Wir werden kurz auf die flachen Kopiermethoden eingehen, um Sie auf einige der falschen Methoden zum tiefen Kopieren aufmerksam zu machen.

Verwendung von die Spread-Syntax zum flachen Klonen eines Objekts in JavaScript

Wir können ein Objekt klonen, indem wir ein neues Objekt erstellen und dann mithilfe der Spread-Syntax den Inhalt eines Objekts als eigenen auflisten. Es scheint der richtige Weg zu sein, aber es wird eine flache Kopie der Daten erstellt.

const obj = {
  a: 1,
  b: {c: 2}
}

const clone = {...obj};  // creates a shallow copy

obj.b.c = 5;
console.log(clone.b.c);  // outputs 5

Im obigen Code verwenden wir die spread, um eine flache Kopie des Objekts zu erstellen. Wir ändern dann eine der Eigenschaften des referenzierten Objekts im ursprünglichen Objekt und zeigen, dass die Eigenschaft im geklonten Objekt geändert wird.

Verwendung von die Syntax Object.assign() zum flachen Klonen eines Objekts in JavaScript

Die Methode object.assign() weist einer neuen Objektvariablen eine flache Kopie des Objekts zu. Es werden zwei Argumente benötigt: Ziel und Quelle. Das target ist normalerweise ein Paar leerer Klammern, die das leere Objekt darstellen, in das kopiert werden soll. Es ist ein optionales Argument, aber das Übergeben stellt sicher, dass das ursprüngliche Objekt nicht geändert wird. Das zweite Argument ist das zu kopierende Objekt.

const obj = {
  a: 1,
  b: {c: 2}
}

const clone = Object.assign({}, obj);  // creates a shallow copy

obj.b.c = 5;
console.log(clone.b.c);  // outputs 5

Im obigen Code verwenden wir Object.assign(), um eine flache Kopie des Objekts zu erstellen. Wir ändern dann eine der Eigenschaften des referenzierten Objekts im ursprünglichen Objekt und zeigen, dass die Eigenschaft im geklonten Objekt geändert wird.

Deep Copy-Methoden in JavaScript

Verwendung von JSON.parse() und JSON.stringify() zum tiefen Klonen eines Objekts in JavaScript

Mit JSON.stringify() wird ein JavaScript-Objekt in einen JSON-String und mit JSON.parse() ein JSON-String in ein JavaScript-Objekt konvertiert. Wir können JSON.parse() um JSON.stringify() wickeln, um zunächst ein JavaScript-Objekt in einen JSON-String zu konvertieren und diesen dann zu parsen, um eine Kopie des Objekts zu erhalten.

var user = {name: 'Harshit', age: 21, Profession: 'Software Engineer'};
let fakeDeepCopy = JSON.parse(JSON.stringify(user));

Diese Methode erstellt eine tiefe Kopie, jedoch nur für Objekte ohne Funktionen. Es gibt Probleme mit zirkulären Abhängigkeiten wie bei anderen referenzierten Objekten. Die Reihenfolge der Eigenschaften im kopierten Objekt kann auch vom ursprünglichen Objekt abweichen. Diese Methode ist also ein guter Trick, wenn wir ein einfaches Objekt mit wenigen primitiven Datentypen haben, aber es wird für die reale Welt nicht empfohlen.

Verwenden Sie das native Deep Cloning, um ein Objekt in JavaScript tief zu klonen

Wir können den Serialisierungsalgorithmus des Moduls Node.js v8 verwenden, um ein Objekt tief zu klonen. Obwohl es auf bestimmte integrierte Datentypen beschränkt ist, werden Verweise innerhalb der geklonten Daten beibehalten. Es ermöglicht uns, mehrere zyklische und rekursive Strukturen zu kopieren, die von der JSON-Methode nicht unterstützt wurden.

const v8 = require('v8');

const structuredClone = obj => {
  return v8.deserialize(v8.serialize(obj));
};

Wir deserialisieren und serialisieren das Objekt dann genau wie das Stringifizieren und Parsen der JSON-Methoden. Aber es bewahrt zirkuläre Abhängigkeiten und ist etwas besser.

Verwenden Sie die Lodash-Bibliothek, um ein Objekt in JavaScript tief zu klonen

Die Lodash-Bibliothek bietet Funktionen für flaches und tiefes Kopieren, nämlich clone und clonedeep. Es ist eine großartige Bibliothek, mit der wir nur die Funktionen importieren können, die wir benötigen, und nicht die gesamte Bibliothek. Die Methode clonedeep kopiert den Wert rekursiv und behält dann alle Objektvererbungen bei, wodurch eine echte Kopie des Objekts erstellt wird.

const lodashClonedeep = require('lodash.clonedeep');
let obj = {a: 1, b: {c: 2}} let deepClone = lodashClonedeep(obj);

Hier laden wir die Funktion clonedeep aus lodash und klonen damit das Objekt tief. Es ist eine gut getestete und gepflegte Bibliothek, die jedoch nur mit Node.js und nicht mit Vanilla JavaScript verwendet werden kann.

Verwenden Sie die jQuery-Methode expand(), um ein Objekt in JavaScript tief zu klonen

Wir können jQuerys .extend() verwenden, um ein Objekt flach und tief zu kopieren. Es ist die zuverlässigste Deep-Cloning-Methode ohne Datenverlust oder Datenbeschädigung. Seine Hauptfunktion besteht darin, zwei oder mehr Objekte zusammenzuführen. Kann aber auch zum Klonen eines Objekts verwendet werden. Es werden folgende Argumente verwendet: [deep], target, object1 ..... objectN.

1. [deep]: Dies ist ein optionales Argument. Der einzig zulässige Wert ist wahr. Wenn es in der Funktion übergeben wird, erstellt die Funktion eine tiefe Kopie des Objekts. Andernfalls wird eine flache Kopie erstellt.
2. target: Das zu erweiternde Objekt. Es werden alle zusammengeführten Objekte empfangen.
3. object1, ..., objectN: Dies sind die Objekte, die zu einem neuen Objekt zusammengeführt/geklont werden sollen.

let obj = {a: 1, b: {c: 2}} let shallowClone =
    $.extend({}, obj);                    // creates a shallow copy
let deepClone = $.extend(true, {}, obj);  // creates a deep copy

Eine naheliegendere Lösung kann darin bestehen, einfach jede Eigenschaft des Quellobjekts zu durchlaufen und sie in ein neues Objekt zu replizieren. Alle oben beschriebenen Methoden sind mit allen gängigen Browsern kompatibel.