Was sind die Implementierungsmethoden für flaches Kopieren und tiefes Kopieren in js? (Zusammenfassen)

Was dieser Artikel Ihnen zeigt, sind die Implementierungsmethoden für flaches Kopieren und tiefes Kopieren in js. (Zusammenfassung), es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen.

JS verfügt über fünf grundlegende Datentypen: Zeichenfolge, Zahl, Boolescher Wert, Null und Undefind. Bei diesen fünf Arten von Zuweisungen handelt es sich um Wertübertragungen. Die Zuweisung eines Objekts besteht darin, der Objektadresse eine Referenz zuzuweisen. Zu diesem Zeitpunkt führt das Ändern der Eigenschaften oder Werte im Objekt dazu, dass sich die Werte aller Verweise auf das Objekt ändern. Wenn Sie tatsächlich ein neues Objekt kopieren möchten, anstatt einen Verweis auf das Objekt zu kopieren, müssen Sie eine tiefe Kopie des Objekts verwenden.

Methode zur Implementierung flacher Kopien

1.

Da gibt es nicht viel zu sagen, die einfachste Zuweisungsmethode besteht einfach darin, einem Objekt eine Referenz zuzuweisen.

2.Object.assign()

Object.assign ist eine neue Funktion in ES6. Die Methode Object.assign() kann eine beliebige Anzahl der aufzählbaren Eigenschaften des Quellobjekts in das Zielobjekt kopieren und dann das Zielobjekt zurückgeben. Object.assign() führt jedoch eine flache Kopie durch und kopiert Verweise auf die Eigenschaften des Objekts, nicht das Objekt selbst.

Object.assign(target, ...sources)

Parameter:
Ziel: Zielobjekt.
Quellen: beliebig viele Quellobjekte.
Rückgabewert: Das Zielobjekt wird zurückgegeben.

var obj = { a: {a: "hello", b: 21} };
var initalObj = Object.assign({}, obj);

initalObj.a.a = "changed";
console.log(obj.a.a); // "changed"

Es ist zu beachten, dass:
Object.assign() eine tiefe Kopie einer Ebene wie folgt verarbeiten kann:

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 }

Deep copy

1. Manuelles Kopieren

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

2. JSON-String-Konvertierung

Verwenden Sie JSON.stringify, um das Objekt in einen String zu konvertieren, und verwenden Sie dann JSON.parse, um den String in ein neues Objekt zu konvertieren.

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);
// false
console.log(obj1.body === obj2.body);
// false

Das ist echtes Deep Copy, diese Methode ist einfach und leicht anzuwenden.

Aber diese Methode hat auch viele Nachteile, zum Beispiel wird der Konstruktor des Objekts verworfen. Das heißt, nach dem Tiefenkopieren wird das Objekt unabhängig vom ursprünglichen Konstruktor des Objekts nach dem Tiefenkopieren zum Objekt.

Die einzigen Objekte, die diese Methode korrekt verarbeiten kann, sind Number-, String-, Boolean-, Array- und flache Objekte, also jene Datenstrukturen, die direkt durch JSON dargestellt werden können. RegExp-Objekte können auf diese Weise nicht tief kopiert werden.

Mit anderen Worten: Auf diese Weise können nur Objekte verwendet werden, die in das JSON-Format konvertiert werden können. Funktionen können nicht in JSON konvertiert werden.

var obj1 = { fun: function(){ console.log(123) } };
var obj2 = JSON.parse(JSON.stringify(obj1));
console.log(typeof obj1.fun);
// 'function'
console.log(typeof obj2.fun);
// 'undefined' <-- 没复制

3. Rekursives Kopieren

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);

4. Verwenden Sie die Object.create()-Methode

Verwenden Sie var newObj = Object.create(oldObj) direkt, um einen tiefen Kopiereffekt zu 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) ? [] : Object.create(prop);
    } else {
      obj[i] = prop;
    }
  }    
  return obj;
}

5.jquery

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

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

6. Funktionen von Drittanbietern

Es gibt auch einige andere Funktionsbibliotheken von Drittanbietern mit Deep-Copy-Funktionen, wie zum Beispiel lodash.

Das obige ist der detaillierte Inhalt vonWas sind die Implementierungsmethoden für flaches Kopieren und tiefes Kopieren in js? (Zusammenfassen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!