Flache Kopie gegen tiefe Kopie in JavaScript

Die Kopieraufgabe in JavaScript ist für primitive Datentypen recht einfach. Sie müssen jedoch sorgfältig zwischen dem wählen Flache und tiefe Kopie Techniken beim Umgang mit Objekten und Referenzen.

In flache Kopie nur Referenzadressen werden kopiert; Das Ändern eines Objekts wendet daher auch dieselben Änderungen auf ein anderes Objekt an. Um eine solche Situation zu vermeiden, können Sie das Deep Copy -Verfahren nutzen.

Dieser Beitrag erläutert das Konzept der flachen Kopie und der tiefen Kopie anhand entsprechender Beispiele. So lass uns anfangen!

Flache Kopie in JavaScript

Ein Mechanismus, in dem ein Objekt bitwise in ein bestimmtes Objekt kopiert wird, wird als flache Kopie bezeichnet.

• Die flache Kopiermethode fügt eine genaue Kopie eines bestimmten Objekts in ein anderes Objekt zu.
• Es wird hauptsächlich zum Kopieren einer dimensionalen Array -Elemente verwendet, in der es nur die auf der ersten Ebene vorhandenen Elemente kopiert.
• Es kopiert nur die Referenzadressen an ein anderes Objekt.

Methoden zur flachen Kopie eines Objekts in JavaScript

Um ein JavaScript -Objekt in ein anderes Objekt zu kopieren, können Sie die folgenden Methoden verwenden:

• Objekt.Zuordnung () Methode
• Operator ausbreiten […]
• Zuweisungsoperator "="

Notiz: Wenn Sie das verwenden "Operator ausbreiten" oder "Objekt".zuordnen()" Methode, dann nach dem flachen Kopieren wird das kopierte Objekt vom ursprünglichen Objekt getrennt, während bei der Verwendung der "die"Abtretung”Operator und Änderungen des kopierten Objekts ändern auch das ursprüngliche Objekt.

Wir werden kurz jede der genannten Methoden diskutieren, um ein Objekt in JavaScript zu kopieren.

Flache kopieren Sie ein Objekt in JavaScript mit Spread Operator

Der "AusbreitungDer Bediener kann für das flache Kopieren eines Objekts verwendet werden. Es wird als drei aufeinanderfolgende Punkte „…“ dargestellt.

Syntax der Verwendung von Spread Operator zur flachen Kopie eines Objekts in JavaScript

sei Object2 = … Object1;

Hier kopiert der Spread-Operator das Schlüsselwertpaar von "Object1" zu "Object2".

Beispiel: Flaches kopieren Sie ein Objekt in JavaScript mit dem Spread Operator

Zunächst werden wir ein Objekt namens erstellen. “Mitarbeiter”Mit zwei Schlüsselwertpaaren:

const Mitarbeiter =
Name: 'Alex',
Bezeichnung: 'Manager'
;

Dann werden wir flach kopieren "Mitarbeiter"Objekt dem neu erstellten"EMP1”Objekt mit dem Spread Operator:

lass emp1 = … Mitarbeiter;

Zusätzlich können Sie überprüfen, ob die Eigenschaftswerte der “geändert werdenEMP1"Objekt kann auch die" beeinflussen "MitarbeiterEigenschaft des Objekts:

EMP1.name = 'max';

Konsole.log („Emp1 ​​Name:“ + EMP1.Name);

Konsole.Protokoll ("Mitarbeitername:" + Mitarbeiter.Name); [/cc]

Wir haben die “erfolgreich kopiert“Mitarbeiter"Objekt dem"EMP1"Objekt und ändern die"EMP1.Name"Immobilienwert haben keine Änderungen an der" angewendet "Mitarbeiter.Name" Eigentum:

Flache Kopie in JavaScript mit Objekt.Zuordnung () Methode

Das JavaScript "Objekt.zuordnen()"Methode wird verwendet, um die" flach zu kopieren "SchlüsselwertPaar eines bereits erstellten Objekts in ein anderes Objekt. Das ursprüngliche Objekt wird bei der Verwendung des Objekts nicht betroffen sein.Zuordnung () Methode.

Syntax der Verwendung von Objekten.Zuweisen () Methode zur flachen Kopie in JavaScript

Objekt.zuweisen (Ziel, Quelle)

Hier, "Ziel”Repräsentiert das JavaScript-Objekt, dessen Schlüsselwertpaar kopiert wird und“Quelle”Gibt das Objekt an, in dem das kopierte Schlüsselwertpaar platziert wird.

Beispiel: Flache Kopie in JavaScript mit dem Objekt.Zuordnung () Methode

Wir werden die aufrufen "Objekt.zuordnen()Methode zum flachen Kopieren der "Mitarbeiter" Objekt "EMP1":

Sei emp1 = ; Objekt.zuweisen (EMP1, Mitarbeiter);

Der "Objekt.zuordnen()"Methode gibt das Zielobjekt zurück" zurück "EMP1" in unserem Fall:

Als nächstes werden wir das aktualisierenEMP.Name" Eigentumswert:

EMP1.Name = 'Stepheny'; Konsole.log ("EMP1 Name:" + EMP1.Name);
Konsole.Protokoll ("Mitarbeiter.Name: " + Mitarbeiter.Name);

Wie Sie in der untergegebenen Ausgabe sehen können, ändern Sie die “EMP.NameDer Eigenschaftswert hat die "nicht geändert"Mitarbeiter" Objekt.

Flache Kopie in JavaScript mit Zuordnungsbetreiber

Der Zuordnungsoperator “=”Kann auch helfen, ein Objekt in JavaScript zu kopieren. Bei Verwendung des Zuordnungsoperators beziehen sich beide Variablen auf dasselbe Objekt. Änderungen in einem Objekt beeinflussen auch den Eigenschaftswert des entsprechenden Objekts:

Syntax der Verwendung von Zuordnungsbetreiber zur flachen Kopie in JavaScript

Object2 = Object1

Hier kopiert der Zuordnungsbetreiber die "Object1" zu "Object2".

Beispiel: Flache Kopie in JavaScript mit dem Zuordnungsoperator

Jetzt werden wir den JavaScript -Zuweisungsoperator verwenden, um das zu kopieren, das das kopiert "Mitarbeiter" Objekt "EMP1":

Sei emp1 = ; emp1 = Mitarbeiter;

Im nächsten Schritt werden wir angeben “Stepheny”Als Wert von“EMP1.Name" Eigentum:

EMP1.Name = 'Stepheny'; Konsole.log ("EMP1 Name:" + EMP1.Name);
Konsole.Protokoll ("Mitarbeiter.Name: " + Mitarbeiter.Name);

Die angegebene Ausgabe bedeutet, dass das Ändern des “EMP.NameDer Eigenschaftswert hat die nicht geändert "Mitarbeiter" Objekt "Name" Eigentum:

Jetzt werden wir das Konzept der tiefen Kopie eines Objekts in JavaScript diskutieren.

Deep Kopie in JavaScript

“Tiefe KopieIst ein rekursives Verfahren zum Kopieren von Objekten. Dieser Mechanismus schafft ein neues Objekt und kloniert dann das Schlüsselwertpaar des angegebenen Objekts. Diese Aussage bedeutet, dass ein JavaScript -Objekt während des tiefen Kopierens vollständig in ein anderes Objekt kloniert wird. Danach wird das kopierte Objekt vom ursprünglichen Objekt getrennt.

Methoden zur tiefen Kopie eines Objekts in JavaScript

Methoden, die zum tiefen Kopieren eines JavaScript -Objekts verwendet werden, sind JSON.Stringify () und JSON.analysieren (), wobei die Stringify () -Methode ein bestimmtes JavaScript -Objekt in eine Zeichenfolge umwandelt und dann die Parse () -Methode den Parsing -Operation ausführt und ein Objekt zurückgibt.

Syntax der Verwendung von JSON.Stringify () und JSON.Parse () Methoden, um ein Objekt in JavaScript zu kopieren

Sei Object2 = json.analysieren (JSON.Stringify (Object1));

Hier das Stringify () methoD Konvertiert JavaScript “Objekt1”Zu einer Zeichenfolge, und dann führt die Parse () -Methode den Parsing -Operation und die Rückgabe durch, die in“ gespeichert werden. “Objekt2”.

Beispiel: Tiefe Kopie in JavaScript Ein Objekt in JavaScript mit JSON.Stringify () und JSON.Parse () Methoden

In diesem Beispiel haben wir die verwendet Stringify () und Parse () Methoden Kopieren "Mitarbeiter" zum "EMP1" Objekt. Der "JSON.Stringify ()"Methode konvertiert die"Mitarbeiter"Objekt in eine"SaiteUnd dann die “JSON.analysieren ()”Methode analysieren Sie die resultierende Zeichenfolge und geben Sie ein JavaScript -Objekt zurück:

lass Mitarbeiter =
Name: 'Alex',
Adresse: City: 'Ankara', Land: 'Türkei'
;
var emp1 = json.analysieren (JSON.Stringify (Mitarbeiter));
Konsole.log (emp1);

Die Ausgabe bedeutet, dass wir die erfolgreich kopiert haben "Mitarbeiter" Objekt "EMP1":

Zuletzt werden wir einige Eigenschaften des „EMP1“ -Objekts ändern und dann das Ergebnis ansehen:

EMP1.name = 'max';
EMP1.Adresse.City = 'Istanbul';
Konsole.log ("EMP1.Name: " + emp1.Name);
Konsole.log ("EMP1.Adresse.Stadt: " + emp1.Adresse.Stadt);
Konsole.Protokoll ("Mitarbeiter.Name: " + Mitarbeiter.Name);
Konsole.Protokoll ("Mitarbeiter.Adresse.Stadt: " + Mitarbeiter.Adresse.Stadt);

Nach der Durchführung der tiefen Kopieroperation die “EMP1"Wird von der" getrennt "Mitarbeiter,"Also alle Änderungen in der"EMP1"Wird die" nicht beeinflussen "Mitarbeiter" Objekt:

Wir haben alle wesentlichen Informationen in Bezug auf flache Kopie und tiefe Kopierobjekte in JavaScript zusammengestellt. Sie können es weiter nach Ihren Anforderungen untersuchen.

Abschluss

Operator „[…]“, „Objekt verteilt.Zuordnen () und "Zuweisungs" -Operator sind Methoden, die es Ihnen ermöglichen flache Kopierobjekte und um ein JavaScript -Objekt zu kopieren, JSON.Stringify () und JSON.Parse () Methoden werden verwendet, wo der JSON.Stringify () -Methode wandelt ein bestimmtes Objekt in eine Zeichenfolge um, die dann mit JSON analysiert wird.Parse () Methode. Dieser Beitrag erläuterte das Konzept der flachen und tiefen Kopie anhand entsprechender Beispiele.