Lassen Sie sich die tiefe Kopie von js verstehen

Lassen Sie sich die tiefe Kopie von js verstehen

js tiefe Kopie

Bevor wir zur Sache kommen, müssen wir verstehen, wie Daten gespeichert werden.

Methode der Datenspeicherung

Bevor wir darüber sprechen, müssen wir zunächst wissen, wie Werttypen und Referenztypen gespeichert werden.

Es gibt zwei Arten von Daten in JavaScript.

Werttypen : String , Number , Boolean , Null , Undefined , Symbol .

Ein einfaches Datensegment wird im Stapelspeicher abgelegt, die Datengröße wird bestimmt und die Speicherplatzgröße kann zugeordnet werden.

Referenzdatentypen : Object , (Array , Function .

Für im Heap-Speicher gespeicherte Objekte wird ein Zeiger im Stapelspeicher gespeichert, der auf eine Stelle im Heap-Speicher zeigt. Anschließend holen Sie sich die benötigten Daten aus dem Heap-Speicher.

Die Speicherung erfolgt wie folgt:

Bildbeschreibung hier einfügen

Was ist eine flache/tiefe Kopie

Nachdem wir über die Speichermethode gesprochen haben, sprechen wir über Shallow Copy und Deep Copy

Kopieren ist das, was wir oft als Kopieren, Strg+C, Strg+V bezeichnen. Schauen wir uns also ein Beispiel an

Wenn wir Werte Werttypen bzw. Referenztypen zuweisen.

     var a = 5
     var b = a
     b += 5
     konsole.log('a=' + a,'b=' + b)
     var arr = [1,2,3]
     var brr = arr
     brr.push(10)
     console.log("arr ist",arr)
     console.log("brr ist",brr)

Bildbeschreibung hier einfügen

Phänomen : Wir haben festgestellt, dass die Werttypen sich nicht gegenseitig beeinflussten, aber das Array (Referenztyp) brr-Array das arr-Array beim Hinzufügen von Elementen änderte.

Erklärung und Analyse : Shallow Copy tritt nur bei Referenztypen auf. Wenn eine einfache Zuweisung an einem Referenztyp durchgeführt wird, wird nur ein Zeiger auf den Heap-Speicher zugewiesen. Dies wird als Shallow Copy bezeichnet. Eine tiefe Kopie ist eine vollständige Kopie eines Referenztyps, nicht eines Adresszeigers.

Machen Sie eine oberflächliche Kopie des folgenden Schemas:

Bildbeschreibung hier einfügen

Gängige Deep Copy-Implementierungen

Wenn wir Referenztypen zuweisen, dürfen wir deshalb keine oberflächlichen Kopien erstellen, da dies Auswirkungen auf die Originaldaten hätte. Dann müssen wir eine tiefe Kopie machen

1. Durch JSON.stringify und JSON.parse

Arrays und Objekte können vollständig kopiert werden, Funktionen jedoch nicht. Es können verschachtelte Kopien von Objekten oder Arrays erstellt werden.

Nachteil : Es ist unmöglich, eine tiefe Kopie von Methoden in Objekten zu erreichen

verwenden :

     var brr = JSON.parse(JSON.stringify(arr))

Beispiel:

  var arr = {
         Name: 'Romantischer Coder',
         Alter: 20,
         Adresse: ['jiangxi', 'changsha'],
         Freunde:
             Freund1: 'Zhang San',
             Freund2: „Li Si“
         },
         Funktion(){
             console.log("Ich bin das Objekt der Romantik")
         }
     }
     var brr = JSON.parse(JSON.stringify(arr))
     brr.name='Zhang San, der gesetzlose Verbrecher'
     brr.adress[0]='Changsha'
     console.log("arr ist", arr)
     console.log("brr ist", brr)

Bildbeschreibung hier einfügen

2. Spread-Operator

Dabei wird die Strukturzuweisungsmerkmalmethode des Objekts genutzt.

Nachteile : Keine Tiefenkopie verschachtelter Objekte im Objekt, was einer Tiefenkopie nur einer Ebene von Referenzobjekten entspricht

verwenden:

     var brr = {...arr}

Beispiel:

  var arr = {
         Name: 'Romantischer Coder',
         Alter: 20,
         Adresse: ['jiangxi', 'changsha'],
         Freunde:
             Freund1: 'Zhang San',
             Freund2: „Li Si“
         },
         Funktion(){
             console.log("Ich bin das Objekt der Romantik")
         }
     }
     var brr = {...arr}
     brr.name='Zhang San, der gesetzlose Verbrecher'
     brr.adress[0]='Changsha'
     console.log("arr ist", arr)
     console.log("brr ist", brr)

Bildbeschreibung hier einfügen

3. Handgeschriebene rekursive Deep-Copy-Funktion

Perfekte Lösung

Funktion:

  //Verwende Rekursion, um die Deep-Copy-Funktion zu implementieren deepClone(obj) {
         //Bestimmen Sie, ob das kopierte Objekt ein Objekt oder ein Array ist var objClone = Array.isArray(obj) ? [] : {};
         if (obj && typeof obj === "object") { //obj darf nicht leer sein und muss ein Objekt oder ein Array sein, da null auch ein Objekt ist
             für (Schlüssel in Objekt) {
                 wenn (obj.hasOwnProperty(Schlüssel)) {
                     if (obj[key] && typeof obj[key] === "object") { //Der Attributwert in obj ist nicht leer und es ist immer noch ein Objekt, erstelle eine tiefe Kopie objClone[key] = deepClone(obj[key]); //Erstelle rekursiv eine tiefe Kopie } else {
                         objClone[Schlüssel] = obj[Schlüssel]; //direkte Kopie}
                 }
             }
         }
         gib objClone zurück;
     }

Beispiel:

      var arr = {
         Name: 'Romantischer Coder',
         Alter: 20,
         Adresse: ['jiangxi', 'changsha'],
         Freunde:
             Freund1: 'Zhang San',
             Freund2: „Li Si“
         },
         Spaß: Funktion(){
             console.log("Ich bin das Objekt von " + this.name + "")
         }
     }
     var brr = deepClone(arr)
     brr.name = "Gesetzloser Zhang San"
     brr.adress[0] = "Changsha"
     console.log("arr ist", arr)
     arr.spaß()
     console.log("brr ist", brr)
     brr.spaß()
 ​
     //Verwende Rekursion, um die Deep-Copy-Funktion zu implementieren deepClone(obj) {
         //Bestimmen Sie, ob das kopierte Objekt ein Objekt oder ein Array ist var objClone = Array.isArray(obj) ? [] : {};
         if (obj && typeof obj === "object") { //obj darf nicht leer sein und muss ein Objekt oder ein Array sein, da null auch ein Objekt ist
             für (Schlüssel in Objekt) {
                 wenn (obj.hasOwnProperty(Schlüssel)) {
                     if (obj[key] && typeof obj[key] === "object") { //Der Attributwert in obj ist nicht leer und es ist immer noch ein Objekt, erstelle eine tiefe Kopie objClone[key] = deepClone(obj[key]); //Erstelle rekursiv eine tiefe Kopie } else {
                         objClone[Schlüssel] = obj[Schlüssel]; //direkte Kopie}
                 }
             }
         }
         gib objClone zurück;
     }

Bildbeschreibung hier einfügen

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalten auf 123WORDPRESS.COM mehr Aufmerksamkeit schenken können!

Das könnte Sie auch interessieren:
  • Detaillierte Erläuterung der flachen und tiefen Kopie von JS-Objekten
  • Zwei Methoden zum Deep Copy und Shallow Copy eines JavaScript-Arrays
  • Tiefes Kopieren von Objekten in JavaScript
  • Analyse der JS-Methode zur Implementierung tiefer Kopien von Arrays
  • Detaillierte Erklärung zu JavaScript Deep Copy (deepClone)
  • js Deep Copy-Funktion
  • JavaScript-Grundlagen: Flaches und tiefes Kopieren (Shallow and Deep Copying)
  • Detaillierte Erklärung des Codes zur Implementierung von Shallow Copy und Deep Copy in JS
  • Javascript-Tiefkopie
  • Mehrere Beispiele für die Implementierung von JavaScript Deep Copy

<<:  Wer ist ein User Experience Designer?

>>:  Was bedeutet Eingabetyp und wie kann die Eingabe begrenzt werden?

Artikel empfehlen

MySQL-Sortierprinzipien und Fallanalyse

Vorwort Das Sortieren ist eine grundlegende Funkt...

Docker unter Linux installieren (sehr einfache Installationsmethode)

Ich hatte in letzter Zeit ziemlich viel Zeit. Ich...

Analysieren Sie die Prinzipien und Methoden der MySQL-Replikation und -Optimierung

1. Einleitung MySQL verfügt über eine Replikation...

Implementierung der Nginx-Konfiguration HTTPS-Sicherheitsauthentifizierung

1. Der Unterschied zwischen HTTP und HTTPS HTTP: ...

Detaillierte Einführung in das CSS-Prioritätswissen

Bevor wir über die CSS-Priorität sprechen, müssen...

So ändern Sie MySQL, um Remoteverbindungen zuzulassen

In Bezug auf die MySQL-Remoteverbindung stoßen wi...

So überprüfen Sie, wo die Metadatensperre in MySQL blockiert ist

So überprüfen Sie, wo die Metadatensperre in MySQ...

WeChat-Applet implementiert Anmeldeschnittstelle

Die Anmeldeoberfläche des WeChat-Applets ist zu I...

So erhalten Sie Root-Berechtigungen in einem Docker-Container

Zunächst muss Ihr Container laufen Sie können die...

So verwenden Sie die Wurmreplikation in einer MySQL-Datentabelle

Einfach ausgedrückt besteht die MySQL-Wurmreplika...