Was sind js Deep Copy und Shallow Copy und wie werden sie implementiert?

Heute werde ich Ihnen etwas über JS Deep Copy und Shallow Copy von JS erzählen. Was ist der Unterschied zwischen ihnen und was sind ihre Funktionen? Lassen Sie mich Ihnen unten ein Beispiel geben.

var m = { a: 10, b: 20 }var n = m;n.a = 15;//Was ist der Wert von m.a zu diesem Zeitpunkt? Ausgabe 15: Da es sich um eine flache Kopie handelt, zeigen n und m auf denselben Heap und die
Objektkopie

ist nur eine

Referenz des kopierten Objekts. Deep Copy

Deep Copy unterscheidet sich von der flachen Kopie oben, bei der ein Objekt vollständig kopiert wird, anstatt die Referenz des Objekts zu kopieren. Im vorherigen Beispiel schreiben wir :

var m = { a: 10, b: 20 }var n = {a:m.a,b:m.b};n.a = 15;

Dieses Mal geben wir aus m.a erneut und stellen Sie fest, dass m.a der Wert immer noch 10 ist und sich nicht geändert hat. Obwohl alle Werte des m-Objekts und des n-Objekts gleich sind, sind sie im Heap nicht gleich .

Deep Copy und Shallow Copy

Das Diagramm von Deep Copy und Shallow Copy sieht ungefähr wie folgt aus:

Shallow Copy kopiert nur die Wenn das Objekt auf den Zeiger zeigt, ohne das Objekt selbst zu kopieren, teilen sich das alte und das neue Objekt weiterhin denselben Speicher. Durch eine tiefe Kopie wird jedoch ein identisches Objekt erstellt. Das neue Objekt teilt sich den Speicher nicht mit dem Originalobjekt, und Änderungen am neuen Objekt führen nicht zu einer Änderung des Originalobjekts.

So implementieren Sie eine flache Kopie

1. Dies kann durch einfache Zuweisung implementiert werden.

Ähnlich wie im obigen Beispiel können wir natürlich auch eine einfache Funktion kapseln folgt:

2.

Object

function simpleClone(initalObj) {    
      var obj = {};    
      for ( var i in initalObj) {
        obj[i] = initalObj[i];
      }    
      return obj;
    }
    var obj = {
      a: "hello",
      b:{
          a: "world",
          b: 21
        },
      c:["Bob", "Tom", "Jenny"],
      d:function() {
          alert("hello world");
        }
    }
    var cloneObj = simpleClone(obj); 
    console.log(cloneObj.b); 
    console.log(cloneObj.c);
    console.log(cloneObj.d);
    cloneObj.b.a = "changed";
    cloneObj.c = [1, 2, 3];
    cloneObj.d = function() { alert("changed"); };
    console.log(obj.b);
    console.log(obj.c);
    console.log(obj.d);

.assign() implementiert die Methode

Object.assign(), um die aufzählbaren Eigenschaften einer beliebigen Anzahl von Quellobjekten selbst zu kopieren zum Zielobjekt und gibt dann das Zielobjekt zurück. Object.assign() führt jedoch eine flache Kopie durch und kopiert Verweise auf die Eigenschaften des Objekts, nicht das Objekt selbst.

var obj = { a: {a: "hello", b: 21} };var initalObj = Object.assign({}, obj); initalObj.a.a = "changed";console.log( obj.a.a); // „geändert“

Hinweis: Wenn das Objekt nur eine Ebene hat, handelt es sich um eine tiefe Kopie, zum Beispiel wie folgt:

So implementieren Sie Deep Copy

var obj1 = { a: 10, b: 20, c: 30 };var obj2 = Object.assign({}, obj1);obj2.b = 100;console.log(obj1);// { a: 10, b: 20, c: 30 } <-- 沒被改到console.log(obj2);// { a: 10, b: 100, c: 30 }

1. Methode 1 ist manuelles Kopieren

Wie im obigen Beispiel kann durch manuelles Kopieren Deep Copy erreicht werden.

2. Wenn das Objekt nur eine Ebene hat, können Sie die obige Funktion Object.assign() verwenden

3. In JSON konvertieren und wieder zurück

Verwenden Sie JSON. stringify konvertiert das Objekt in einen

String

var obj1 = { body: { a: 10 } };var obj2 = JSON.parse(JSON.stringify(obj1));obj2.body.a = 20;console.log(obj1);// { body: { a: 10 } } <-- 沒被改到console.log(obj2);// { body: { a: 20 } }console.log(obj1 === obj2);// falseconsole.log(obj1.body === obj2.body);// false

und verwendet dann JSON.parse, um den String in ein neues Objekt zu konvertieren.

kann die folgenden Funktionen kapseln

4. Rekursive Kopie

var cloneObj = function(obj){
    var str, newobj = obj.constructor === Array ? [] : {};
    if(typeof obj !== 'object'){
        return;
    } else if(window.JSON){
        str = JSON.stringify(obj), //系列化对象
        newobj = JSON.parse(str); //还原
    } else {
        for(var i in obj){
            newobj[i] = typeof obj[i] === 'object' ? 
            cloneObj(obj[i]) : obj[i]; 
        }
    }
    return newobj;};

5. Verwenden Sie die Methode Object.create() direkt newObj = Object.create(oldObj) kann den Effekt einer tiefen Kopie erzielen.

function deepClone(initalObj, finalObj) {    
  var obj = finalObj || {};    
  for (var i in initalObj) {        
    var prop = initalObj[i];        // 避免相互引用对象导致死循环，如initalObj.a = initalObj的情况
    if(prop === obj) {            
      continue;
    }        
    if (typeof prop === 'object') {
      obj[i] = (prop.constructor === Array) ? [] : {};            
      arguments.callee(prop, obj[i]);
    } else {
      obj[i] = prop;
    }
  }    
  return obj;}var str = {};var obj = { a: {a: "hello", b: 21} };deepClone(obj, str);console.log(str.a);

6. jquery

jquery stellt eine $.extend bereit, die für Deep Copy verwendet werden kann.

function deepClone(initalObj, finalObj) {    
  var obj = finalObj || {};    
  for (var i in initalObj) {        
    var prop = initalObj[i];        // 避免相互引用对象导致死循环，如initalObj.a = initalObj的情况
    if(prop === obj) {            
      continue;
    }        
    if (typeof prop === 'object') {
      obj[i] = (prop.constructor === Array) ? [] : Object.create(prop);
    } else {
      obj[i] = prop;
    }
  }    
  return obj;}

7. lodash

Eine weitere sehr beliebte Funktionsbibliothek, lodash, bietet auch _.cloneDeep für Deep Copy.

var $ = require('jquery');var obj1 = {
    a: 1,
    b: { f: { g: 1 } },
    c: [1, 2, 3]};var obj2 = $.extend(true, {}, obj1);console.log(obj1.b.f === obj2.b.f);// false

Dies funktioniert gut und ist sehr einfach zu bedienen.

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

var _ = require('lodash');var obj1 = {
    a: 1,
    b: { f: { g: 1 } },
    c: [1, 2, 3]};var obj2 = _.cloneDeep(obj1);console.log(obj1.b.f === obj2.b.f);// false

Verwandte Lektüre:

Wie man mit der unvollständigen Anzeige der letzten Textzeile in HTML umgeht

So verwenden Sie CSS3 zum Erstellen von Symboleffekten

So konvertieren Sie die CSS-Codierung

Das obige ist der detaillierte Inhalt vonWas sind js Deep Copy und Shallow Copy und wie werden sie implementiert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!