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

Drei Möglichkeiten zum Parsen von QR-Codes mit Javascript

Inhaltsverzeichnis 1. Verwenden Sie JavaScript, u...

Detaillierte Erklärung des FreeList-Mechanismus von MySQL

1. Einleitung Nach dem Start von MySQL wird Buffe...

JS realisiert Spezialeffekte der Webseiten-Navigationsleiste

In diesem Artikel erfahren Sie mehr über einen pr...

Detaillierte Erklärung zur Überwachung von MySQL-Anweisungen

Schnelles Lesen Warum müssen wir SQL-Anweisungen ...

Mehrere Möglichkeiten zum Festlegen der Ablaufzeit von localStorage

Inhaltsverzeichnis Problembeschreibung 1. Basislö...

Detaillierte Erklärung des SELINUX-Arbeitsprinzips

1. Einleitung Der Hauptvorteil, den SELinux für L...

Vue implementiert eine einfache bidirektionale Datenbindung

In diesem Artikelbeispiel wird der spezifische Co...

Detaillierte Erklärung zur Verwendung der Vue-Nummernschild-Eingabekomponente

Eine einfache Nummernschild-Eingabekomponente (vu...

Verwenden Sie JS, um Dateien zu bearbeiten (FileReader liest --node's fs)

Inhaltsverzeichnis JS liest Datei FileReader doku...

Kompatibilitätsprobleme mit CSS3-Farbverlaufshintergründen

Wenn wir eine Hintergrundfarbe mit Farbverlauf er...

VMware ESXi 5.5 Bereitstellungs- und Konfigurationsdiagrammprozess

Inhaltsverzeichnis 1. Installationsvoraussetzunge...