JS tiefe und flache Kopierdetails

1. Was bedeutet „Shallow Copy“?

Bei einer oberflächlichen Kopie handelt es sich um eine Kopie nur der Verweise auf die im Stapel gespeicherten Daten, ohne dass die Verweise auf die Inhalte im Heap kopiert werden. Beim oberflächlichen Kopieren mehrerer Daten werden mehrere Referenzen kopiert, die auf denselben Inhalt im Heap verweisen. Wenn eine oberflächliche Kopie der Daten geändert wird, das heißt, wenn der Inhalt geändert wird, auf den die Referenz im Heap zeigt, dann ändern sich auch andere Daten, auf die hier per Referenz verwiesen wird.

lass obj = {
    eine:1,
    b:2,
    C:{
        c1:10,
        c2:20
    }
}

sei objA = obj;
objA.a = "a";

konsole.log(Objekt.a); // 'ein'
konsole.log(objA.a); // 'ein'

2. Was bedeutet Deep Copy?

Eine tiefe Kopie ist eine Kopie des Heap-Inhalts, um ein neues Objekt zu erstellen. Mehrere tiefe Kopien sind mehrere unterschiedliche Objekte, das heißt, sie haben unterschiedliche Referenzen und zeigen auf unterschiedliche Heap-Inhalte.

3. Gründe für die Verwendung von Deep Copy

Bei der normalen Entwicklung werden Daten manchmal gesendet und empfangen. Nach dem Empfang der gesendeten Daten ist es unvermeidlich, die Daten zu verarbeiten und zu transformieren. Um die ursprüngliche Datenstruktur nicht zu zerstören, können die Daten mithilfe von Deep Copy kopiert und anschließend die generierten neuen Daten verarbeitet werden. Durch tiefes Kopieren kann auch das Problem der Referenzverwirrung nach der Änderung mehrerer Referenzen vermieden werden, wodurch die Wahrscheinlichkeit von BUG verringert wird.

4. Mehrere Methoden zum tiefen Kopieren

Implementierungsmethode 1: JSON-Serialisierung und -Deserialisierung

lass obj = {
    eine:1,
    b:2,
    C:{
        c1:10,
        c2:20
    }
}

let objA = JSON.parse(JSON.stringify(obj)); //JSON-Serialisierung und -Deserialisierung objA.a = 'a';

konsole.log(obj.a); // 1
konsole.log(objA.a); // "ein"

Obwohl durch JSON Serialisierung und -Deserialisierung ein tiefes Kopieren erreicht werden kann, sind mehrere Nachteile zu beachten:

• date wird in eine Datumszeichenfolge umgewandelt
• Kein Zugriff auf den Prototyp
• undefined Eigenschaften können nicht kopiert werden
• NAN und Unendlichkeit werden in NULL umgewandelt

let d1 = neues Datum();
lass obj = {
    d1,
    d2: undefiniert,
    d3:Keine Angabe
}
: Lassen Sie objD = JSON.parse(JSON.stringify(obj));
console.log(Objekt) 
console.log(objD)

Implementierungsmethode 2: Object.assign()

lass obj = {
    eine:1,
    b:2,
    C:{
        c1:10,
        c2:20
    }
}

sei objA = Objekt.assign(obj);
objA.a = "a";

konsole.log(obj.a); // 1
konsole.log(objA.a); // "ein"

Obwohl Object.assign() tiefes Kopieren erreichen kann, erstellt es nur oberflächliche Kopien tieferer Objektreferenzen.

lass obj = {
    eine:1,
    b:2,
    C:{
        c1:10,
        c2:20
    }
}

sei objA = Objekt.assign(obj);
objA.c.c1 = 'c1'; //Object.assign() ist nur eine tiefe Kopie.

konsole.log(obj.c.c1); // "c1"
console.log(objA.c.c1); // "c1"

Implementierungsmethode drei: Erweiterungsoperator

lass obj = {
    eine:1,
    b:2,
    C:{
        c1:10,
        c2:20
    }
}

sei objA = {...obj};;
objA.a = "a";

konsole.log(obj.a); // 1
konsole.log(objA.a); // 'ein'

Obwohl der Spread-Operator „ … “ tiefes Kopieren erreichen kann, erstellt er nur oberflächliche Kopien tieferer Objektreferenzen.

lass obj = {
    eine:1,
    b:2,
    C:{
        c1:10,
        c2:20
    }
}

sei objA = {...obj};
objA.c.c1 = 'c1'; //Der Erweiterungsoperator "..." ist derselbe wie Object.assign(), das nur eine Ebene von Deep Copy hat und nicht mehrere Ebenen von Deep Copy haben kann.

konsole.log(obj.c.c1); // "c1"
console.log(objA.c.c1); // "c1"

Implementierungsmethode 4: Verwenden von Rekursion

Wenn Sie Deep Copying und Multi-Layer Deep Copying erreichen möchten, können Sie rekursives Loop-Kopieren verwenden.

lass obj = {
    eine:1,
    b:2,
    C:{
        c1:10,
        c2:20
    }
}

const ReCopy = Funktion (Parameter) {
        lass Ziel = null;
        let isObject = Parameter.Konstruktor === Objekt;
        let isArray = Parameter.Konstruktor === Array;
        wenn (istObjekt || istArray) {
            Ziel = Array.isArray(Parameter) ? [] : {};
            für (lass i im Parameter) {
                Ziel[i] = Neu kopieren(Parameter[i]);
            }
        } anders {
            Ziel = Parameter;
        }
        Rücklaufziel;
    }

let objA = ReCopy(obj);
objA.c.c1 = "c1";

konsole.log(obj.c.c1); // 10
console.log(objA.c.c1); // "c1"

5. Ladash-Tiefenkopie

lodash Deep Copy ist eine professionellere Deep-Copy-Methode.

Installieren Sie lodash

Initialisieren Sie zuerst, generieren Sie die Datei package.json und installieren Sie sie dann mit dem folgenden Befehl.

npm ich -S lodash

Lodash importieren

var _ = erfordern('lodash');

Verwenden von lodash

lass obj = {
    eine:1,
    b:2,
    C:{
        c1:10,
        c2:20
    }
}

: Lassen Sie objA = _.cloneDeep(obj);
objA.c.c1 = "c1"; 

konsole.log(obj.c.c1); // 10
console.log(objA.c.c1); // "c1"

Dies ist das Ende dieses ausführlichen Artikels über die tiefe und oberflächliche Kopie von JS. Weitere relevante Inhalte zur tiefen und oberflächlichen Kopie von JS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!