Heim  >  Artikel  >  Web-Frontend  >  Eine kurze Analyse von Deep Copy und Shallow Copy in js

Eine kurze Analyse von Deep Copy und Shallow Copy in js

不言
不言nach vorne
2018-10-20 14:33:062740Durchsuche

Dieser Artikel bietet Ihnen eine kurze Analyse von Deep Copy und Shallow Copy. Freunde in Not können sich darauf beziehen.

Deep Copy und Shallow Copy sind eigentlich zwei relativ grundlegende Konzepte, aber ich möchte sie trotzdem klären, weil sie viele kleine Details enthalten, die sehr interessant sind.

Der Unterschied zwischen Deep Copy und Shallow Copy

Deep Copy und Shallow Copy sind zwei Begriffe, die jeder oft hört. Was ist der Unterschied zwischen ihnen?

Schauen wir uns zunächst an, was flache Kopie ist.

var obj1 = { a: 1, b: 2 };
var obj2 = obj1;
obj2.a = 3;

console.log(obj1); // { a: 3, b: 2 }
console.log(obj2); // { a: 3, b: 2 }

Dies ist das einfachste Beispiel für eine flache Kopie. Ich habe obj1 zu obj2 zugewiesen, einen Attributwert in obj2 geändert und den entsprechenden Attributwert in obj1 ebenfalls geändert.

Da eine flache Kopie eigentlich nur eine Kopie einer Referenz ist, verweisen beide immer noch auf dieselbe Adresse im Speicher . Kurz gesagt, obj1 und obj2 verweisen tatsächlich auf dasselbe Objekt. Es ist zum Beispiel wie ein Raum, dessen Hausnummer 1 durch Hausnummer 2 ersetzt wurde, aber dieser Raum ist immer noch derselbe Raum.

Dann bedeutet Deep Copy, dass die beiden auf unterschiedliche Speicheradressen verweisen, was eine Kopie im eigentlichen Sinne ist . Nehmen Sie als Beispiel das Zimmer oben, das heißt, Sie haben tatsächlich ein neues Zimmer eröffnet und nicht nur die Hausnummer geändert.

Sprechen Sie über Object.assign()

Object.assign() ist eine Methode, die wir häufig verwenden. Tatsächlich handelt es sich bei dieser Methode um eine flache Kopie. Aber es hat etwas Besonderes: Es kann tiefe Kopien der ersten Ebene verarbeiten.

var obj1 = { a: 1, b: { c: 2 } };
var obj2 = Object.assign({}, obj1);
obj2.a = 3;
obj2.b.c = 3;
console.log(obj1); // { a: 1, b: { c: 3 } }
console.log(obj2); // { a: 3, b: { c: 3 } }

Wenn man sich das obige Beispiel ansieht, hat sich der Wert von Attribut a nicht geändert, aber der Wert von c in Attribut b hat sich geändert.

Häufig verwendete Methoden zur Implementierung von Deep Copy

JSON

Dies ist die am häufigsten verwendete Methode zur Implementierung von Deep Copy, schauen Sie sich einfach das Beispiel an:

var obj1 = { a: { b: 1 } };
var obj2 = JSON.parse(JSON.stringify(obj1));

Dies Die Methode ist einfach und leicht zu verwenden, weist jedoch einen kleinen Fehler auf, da sie den Konstruktor des Objekts verwirft. Das heißt, nach dem Tiefenkopieren wird das Objekt unabhängig vom ursprünglichen Konstruktor des Objekts nach dem Tiefenkopieren zum Objekt.

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

lodash

Dies ist die Methode, die ich derzeit verwende. Es ist nur eine Zeile var obj2 = _.cloneDeep(obj1) erforderlich, um dies zu erreichen. Darüber hinaus ist lodash eine sehr leistungsstarke Bibliothek und die bereitgestellten Methoden sind zuverlässig und einfach. Sie ist wirklich ein Muss für faule Leute.

Das obige ist der detaillierte Inhalt vonEine kurze Analyse von Deep Copy und Shallow Copy in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:segmentfault.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen