So tiefe Klonobjekte in JavaScript tiefe Klonobjekte

JavaScript basiert ausschließlich auf Objekten, alles in JavaScript ist ein Objekt. Arrays sind Objekte, Zeichenfolgen Objekte und Objekte sind Objekte. Wenn Sie mit Objekten oder Arrays arbeiten, müssen manchmal ein Array oder Objekt kopiert oder klonen.

Es gibt zwei Arten von Klonen von Objekten \ Arrays, von denen einer davon ist flache Klone Und der andere ist Wesen tiefe Klone.

Erschaffen tiefe Klone In Vanille JavaScript müssen wir a verwenden Kombination von JSON PARSE () Funktion und Json stringify () Funktion. In diesem Beitrag werden wir diskutieren, was flache Klone und tiefe Klone sind, wie man Klone in JavaScript herstellt und wie man tiefe Klone macht.

Flache Klone gegen tiefe Klone

Immer wenn ein Array \ Objekt, das ein anderes Array \ Objekt enthält, darin enthält, von einer Variablen zu einer anderen Variablen kopiert wird, werden die Elemente dieses Array \ Objekts nicht kopiert. Vielmehr wird ein Referenzzeiger in die neue Variable kopiert, die auf die alte Variable zeigt. Solche Kopien sind als flache Kopien bekannt oder flache Klone

Wenn die Elemente eines Array \ Objekt tiefe Klone oder tiefe Kopien.

Erläuterung mit JavaScript -Code

Hier. Erstellen Sie zum Einstieg ein Array mit verschiedenen Elementen mit der folgenden Codezeile:

var originalArray = [True, False, 2, "Google", undefiniert];

Jetzt gibt es zwei Möglichkeiten, dieses Array zu klonen:

• Mit der Slice -Methode
• Durch die Verwendung des Spread -Operators

Um einen Klon mit der Slice -Methode zu erstellen, verwenden Sie die folgende Zeile:

var klone1 = originalArray.Slice (0);

Und um einen Klon mit dem Spread Operator zu erstellen, verwenden Sie die folgende Zeile:

var klone2 = [… originalArray];

Um zu testen, ob unsere Elemente kopiert wurden oder nicht, können wir die Konsolenprotokollfunktion verwenden, um das ursprüngliche Array sowie unsere beiden Klone auszudrucken:

Konsole.log (originalArray);
Konsole.log (Clone1);
Konsole.log (Clone2);

Wir erhalten die folgende Ausgabe auf unserer Konsole:

Um zu beweisen, dass dies tatsächliche Klone sind und keine Referenzen des ursprünglichen Arrays, das in diesen Variablen übergeben wurde.

Clone1 [0] = 1;
Clone2 [1] = "Hallo";

Drucken Sie alle Arrays erneut auf die Konsole, um die Änderungen mit den folgenden Zeilen zu untersuchen:

Konsole.log (originalArray);
Konsole.log (Clone1);
Konsole.log (Clone2);

Sie werden die folgende Ausgabe beobachten:

Wie Sie sehen können, hat sich Änderungen in den Klonarrays nicht auf das ursprüngliche Array ausgewirkt, was bedeutet, dass andere Arrays die Referenz des ursprünglichen Arrays nicht kopierten.

Überprüfung der flachen Klone

Wir haben gesehen, wie man einfache Arrays klontiert, aber was ist, wenn wir ein Array oder ein Objekt haben, das ein anderes Array enthält, betrachten Sie das folgende Array:

var originalArray = [["Google"]];

Wie Sie sehen können, haben wir ein Array in einem anderen Array. Versuchen wir, einen Klon dieses Arrays mit der Slice -Methode zu erstellen, die wir bereits im obigen Beispiel verwendet haben:

var klone = originalArray.Slice (0);

Wir haben einen Klon dieses Arrays in der Variablen gemacht "Klon", Drucken Sie diese beiden Arrays mit der Konsolenprotokollfunktion aus:

Konsole.log (originalArray [0]);
Konsole.log (klon [0]);

Sie sollten das folgende Ergebnis auf der Konsole Ihres Bildschirms sehen:

Versuchen wir, einige Änderungen im geklonten Array mit der folgenden Codezeile vorzunehmen:

Klon [0].Push ("Karten");

Dies sollte nur Änderungen in nur der vornehmen "Klon" Array und nicht im ursprünglichen Array, aber hier werden die Dinge interessant. Drucken Sie beide Arrays mit der Konsolenprotokollfunktion aus:

Konsole.log (originalArray [0]);
Konsole.log (klon [0]);

Sie sollten das folgende Ergebnis auf Ihrer Konsole sehen:

Sie können leicht aus dem Bild oben beobachten, dass Änderungen im klonierten Array Änderungen im ursprünglichen Array verursacht haben. Dies bedeutet, dass, wenn unser Objekt \ Array Objekt \ Arrays enthält flacher Klon.

Tiefes Klonen in Vanille JavaScript

Puh ... das war eine Menge Dinge, nur um ein Konzept von zu erklären flache Klone Andererseits sind dies Konzepte auf fortgeschrittener Ebene. Um tiefe Klone mit JavaScript zu machen, sind mehrere Methoden verfügbar, aber die meisten benötigen NodeJs. Um tiefe Klone in Vanille -JavaScript zu machen, müssen Sie eine Kombination aus der Funktion JSON Parse () und der Funktion JSON Stringify () verwenden. Erstellen Sie ein Array mit einem verschachtelten Array mit der folgenden Codezeile:

var originalArray = [["Google"]];

Verwenden Sie eine Kombination von JSON PARSE und JSON STRINGIFY () mit der folgenden Zeile:

var Deepclone = json.analysieren (JSON.Stringify (OriginalArray));

Nachdem wir unseren Klon gemacht haben, müssen wir ihn überprüfen, indem wir ihn mit der Konsolenprotokollfunktion auf die Konsole ausdrucken:

Konsole.log (klon [0]);

Sie erhalten das folgende Ergebnis auf der Konsole:

Versuchen wir nun, die Elemente des geklonten Arrays mit der folgenden Zeile zu ändern:

Deepclone [0].Push ("Karten");

Das Letzte, was übrig bleibt, ist, beide Arrays auf der Konsole zu beobachten, um festzustellen, ob das Ändern des geklonten Arrays das ursprüngliche Array geändert hat oder nicht:

Konsole.log (originalArray [0]);
Konsole.log (DeepClone [0]);

Sie erhalten das folgende Ergebnis auf Ihrer Konsole:

Im obigen Bild können Sie beobachten, dass Änderungen in der geklont Array hat im ursprünglichen Array keine Änderung verursacht. Dies bedeutet, dass die verschachtelten Arrays \ Objekte auch nicht kopiert wurden, anstatt ihre Referenz an die neue Variable zu übergeben, und deshalb werden solche Klone als die genannt tiefe Klone.

Abschluss

Deep -Klone in Vanille JavaScript werden mit einer Kombination aus JSON PARSE () -Funktion und JSON Stringify () -Funktion verwendet, wenn ein Objekt \ Array in einer neuen Variablen analysiert wird. Alles in JavaScript ist ein Objekt, und wenn wir versuchen, verschachtelte Objekte zu kopieren. Wenn die Referenz eines Objekts an eine neue Objektänderung im neuen Objekt übergeben wird, verursachen Sie auch Änderungen im alten Objekt, was nicht sehr effizient ist. Dies ist der Grund, warum JavaScript eine Methode zum Erstellen von tiefen Klonen hinzugefügt hat.