js tiefe KopieBevor wir zur Sache kommen, müssen wir verstehen, wie Daten gespeichert werden. Methode der DatenspeicherungBevor 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 : Ein einfaches Datensegment wird im Stapelspeicher abgelegt, die Datengröße wird bestimmt und die Speicherplatzgröße kann zugeordnet werden. Referenzdatentypen : 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: Was ist eine flache/tiefe KopieNachdem 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) 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: Gängige Deep Copy-ImplementierungenWenn 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.parseArrays 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) 2. Spread-OperatorDabei 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) 3. Handgeschriebene rekursive Deep-Copy-FunktionPerfekte 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; } ZusammenfassenDieser 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:
|
<<: Wer ist ein User Experience Designer?
>>: Was bedeutet Eingabetyp und wie kann die Eingabe begrenzt werden?
Inhaltsverzeichnis 1. Verwenden Sie JavaScript, u...
Ich glaube, jeder hat schon einmal Rubbellose ges...
1. Einleitung Nach dem Start von MySQL wird Buffe...
Umgebung: CentOS 7 Offizielle Dokumentation: http...
In diesem Artikel erfahren Sie mehr über einen pr...
Schnelles Lesen Warum müssen wir SQL-Anweisungen ...
Inhaltsverzeichnis Problembeschreibung 1. Basislö...
1. Einleitung Der Hauptvorteil, den SELinux für L...
In diesem Artikelbeispiel wird der spezifische Co...
VC6.0 ist tatsächlich zu alt VC6.0 ist ein Entwic...
Eine einfache Nummernschild-Eingabekomponente (vu...
Inhaltsverzeichnis JS liest Datei FileReader doku...
Inhaltsverzeichnis Frage Reproduktion Implizite K...
Wenn wir eine Hintergrundfarbe mit Farbverlauf er...
Inhaltsverzeichnis 1. Installationsvoraussetzunge...