Was ist der Unterschied zwischen Deep Copy und Shallow Copy in Javascript?

In JavaScript kopiert das flache Kopieren nur die Speicheradresse der Originaldaten, was zwei Datenzeigern entspricht, die auf dieselbe Adresse zeigen. Wenn sich ein Datenelement ändert, wirkt sich dies auf die beiden Datenpunkte aus Deep Copy zeigt auf dieselbe Adresse. Wenn sich ein Element ändert, hat dies keine Auswirkungen auf das andere.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, JavaScript-Version 1.8.5, Dell G3-Computer.

Was ist der Unterschied zwischen Deep Copy und Shallow Copy in JavaScript?

Bevor wir uns mit Shallow Copy und Deep Copy befassen, wollen wir zunächst die Konzepte von Heap und Stack verstehen.

Heap und Stack sind beide Bereiche, die zur Speicherung im Speicher unterteilt sind. Dem Stapel wird automatisch Speicherplatz zugewiesen, der vom System automatisch freigegeben wird. Dem Heap wird dynamisch Speicher zugewiesen, und seine Größe ist variabel und wird nicht automatisch freigegeben.

Dann schauen wir uns grundlegende Datentypen und Referenzdatentypen an (auch als komplexe Datentypen bekannt)

1. Grundlegende Typen: String, Number, Boolean, Null, undefiniert, Symbol (neu in ES6, stellt eindeutige Basiswerte dar); Typen Der Wert belegt eine feste Größe im Speicher und wird im Stapelspeicher gespeichert.

2. Referenztypen: Objekt, Array, Datum, Funktion usw.; der Wert des Referenztyps ist ein Objekt und wird im Heapspeicher gespeichert.

Das Konzept der dunklen und flachen Kopie

Hinweis: Der Unterschied zwischen dunkler und flacher Kopie gilt nur für komplexe Objekte wie Array und Objekt.

1. Flache Kopie: Es wird nur die Speicheradresse der Originaldaten kopiert, was zwei Datenzeigern entspricht, die auf dieselbe Adresse zeigen. Änderungen an einem der Datenelemente wirken sich auf das andere aus.

2. Deep Copy: Die beiden Daten verweisen auf unterschiedliche Adressen und die Datenelemente wirken sich nicht gegenseitig aus, wenn sie sich ändern. 1. Flache Kopie Dabei müssen Sie die Anforderungen für das tiefe Kopieren klären. Handelt es sich nur um eine tiefe Kopie der Objektattribute oder Array-Elemente der ersten Ebene oder um eine rekursive Kopie aller Objektattribute und Array-Elemente?

Deep Copy Array

①Direktes Durchlaufen

var arr = [0, 1, 2];
var arrB;
 
//把arr赋值给arrB
arrB = arr;
console.log("arr:", arr);
console.log("arrB:", arrB);
console.log("-----------改变arrB中数组元素的值后-----------");
arrB[0] = 5;
console.log("arr:", arr);
console.log("arrB:", arrB);

Ausführungsergebnis: Die Änderung des arrB-Array-Elements hat keinen Einfluss auf den Wert des arr-Array-Elements

②: wird zum Verbinden von zwei oder mehr Arrays verwendet. Diese Methode verändert das vorhandene Array nicht, sondern gibt lediglich eine Kopie des verketteten Arrays zurück.

var arr = [1, 2, 3, 4];
function copy(arr){
    var newArr = [];
    for(var i=0;i<arr.length;i++){
        newArr.push(arr[i]);
    }
    return newArr;
}
 
var arrB = copy(arr);
console.log("arrB:", arrB);
console.log("-----------改变arrB中数组元素的值后-----------");
arrB[0] = 5;
console.log("arr:", arr);
console.log("arrB:", arrB);

Laufendes Ergebnis: Die Elemente des arr-Arrays haben sich mit den Änderungen der Elemente des arrB-Arrays nicht geändert

③: Diese Methode gibt einen Teil der Elementfragmente zurück, die aus dem vorhandenen Array abgefangen wurden, um ein zu bilden neues Array (das ursprüngliche Array wird nicht verändert) .

var arr = [0, 1, 2];
var arrB;
 
//把arr赋值给arrB
arrB = arr.concat();
console.log("arr:", arr);
console.log("arrB:", arrB);
console.log("-----------改变arrB中数组元素的值后-----------");
arrB[0] = 5;
console.log("arr:", arr);
console.log("arrB:", arrB);

Ausführungsergebnisse: Änderungen an den Elementen im Array wirken sich nicht gegenseitig aus

Die oben genannten drei Methoden eignen sich nur für einfache Arrays, bei denen die Array-Elemente grundlegende Datentypen sind, und für Arrays, bei denen es sich um Array-Elemente der ersten Ebene handelt Referenztypvariablen wie Objekte oder Arrays Im Allgemeinen sind alle oben genannten Methoden wirkungslos.

Verwandte Empfehlungen:

Javascript-Lern-Tutorial

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen Deep Copy und Shallow Copy in Javascript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!