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

So konfigurieren Sie mehrere Projekte mit demselben Domänennamen in Nginx

Es gibt zwei Möglichkeiten, mit Nginx mehrere Pro...

JavaScript implementiert Produktdetails der E-Commerce-Plattform

In diesem Artikel wird ein allgemeines Beispiel f...

Welche Vorteile bietet die Verwendung des B+-Baumindex in MySQL?

Bevor wir dieses Problem verstehen, schauen wir u...

Eine kurze Diskussion über Tags in HTML

0. Was ist ein Tag? XML/HTML-CodeInhalt in die Zw...

Eine kurze Analyse zum besten Umgang mit vergessenen MySQL 8-Passwörtern

Vorwort Leser, die mit MySQL vertraut sind, werde...

Detailliertes Installationstutorial für Zabbix 4.04 (basierend auf CentOS 7.6)

1. Vorbereitung vor der Installation: 1.1 JDK ins...

Vue führt weltweit SCSS (Mixin) ein

Inhaltsverzeichnis 1. mixin.scss 2. Einzeldateinu...

Erläuterung der Faktoren, die die Datenbankleistung in MySQL beeinflussen

Eine Geschichte über die Datenbankleistung Währen...

MySql legt die angegebenen Benutzerdatenbankansichtsabfrageberechtigungen fest

1. Neuen Benutzer anlegen: 1. Führen Sie eine SQL...