Wie kann ich ein JavaScript-Objekt korrekt klonen?

Question

Ich habe ein Objekt x . Ich würde es gerne als Objekt kopieren y , so dass Änderungen an y nicht verändern x . Ich habe festgestellt, dass das Kopieren von Objekten, die von integrierten JavaScript-Objekten abgeleitet sind, zu zusätzlichen, unerwünschten Eigenschaften führt. Das ist kein Problem, da ich eines meiner eigenen, wörtlich konstruierten Objekte kopiere.

Wie kann ich ein JavaScript-Objekt korrekt klonen?

Answer 1

Aktualisierung 06. Juli 2020

Es gibt drei (3) Möglichkeiten, Objekte in JavaScript zu klonen. Da es sich bei Objekten in JavaScript um Referenzwerte handelt, können Sie sie nicht einfach mit = kopieren.

Die Wege sind:

const food = { food: 'apple', drink: 'milk' }

// 1. Using the "Spread"
// ------------------

{ ...food }

// 2. Using "Object.assign"
// ------------------

Object.assign({}, food)

// 3. "JSON"
// ------------------

JSON.parse(JSON.stringify(food))

// RESULT:
// { food: 'apple', drink: 'milk' }

Dies kann als Referenzzusammenfassung verwendet werden.

Answer 2

Eine besonders unelegante Lösung ist die Verwendung der JSON-Kodierung, um Kopien von Objekten zu erstellen, die keine Mitgliedsmethoden haben. Die Methode besteht darin, das Zielobjekt in JSON zu kodieren und dann durch Dekodierung die gewünschte Kopie zu erhalten. Sie können so oft dekodieren, wie Sie wollen, um so viele Kopien wie nötig zu erstellen.

Natürlich gehören Funktionen nicht in JSON, so dass dies nur bei Objekten ohne Membermethoden funktioniert.

Diese Methode war perfekt für meinen Anwendungsfall, da ich JSON-Blobs in einem Key-Value-Speicher speichere, und wenn sie als Objekte in einer JavaScript-API offengelegt werden, enthält jedes Objekt tatsächlich eine Kopie des ursprünglichen Zustands des Objekts, sodass wir das Delta berechnen können, nachdem der Aufrufer das offengelegte Objekt verändert hat.

var object1 = {key:"value"};
var object2 = object1;

object2 = JSON.stringify(object1);
object2 = JSON.parse(object2);

object2.key = "a change";
console.log(object1);// returns value

Answer 3

Sie können einfach eine Streueigenschaft um ein Objekt ohne Referenzen zu kopieren. Aber Vorsicht (siehe Kommentare), die "Kopie" erfolgt nur auf der untersten Objekt-/Array-Ebene. Verschachtelte Eigenschaften sind immer noch Referenzen!

---

Vollständiger Klon:

let x = {a: 'value1'}
let x2 = {...x}

// => mutate without references:

x2.a = 'value2'
console.log(x.a)    // => 'value1'

Klonen mit Referenzen auf der zweiten Ebene:

const y = {a: {b: 'value3'}}
const y2 = {...y}

// => nested object is still a references:

y2.a.b = 'value4'
console.log(y.a.b)    // => 'value4'

---

JavaScript unterstützt von Haus aus keine tiefen Klone. Verwenden Sie eine Hilfsfunktion. Zum Beispiel Ramda:

http://ramdajs.com/docs/#clone

Answer 4

const objClone = { ...obj };

Beachten Sie, dass geschachtelte Objekte werden noch kopiert als Referenz.

Answer 5

Aus diesem Artikel: Wie man Arrays und Objekte in Javascript kopiert von Brian Huisman:

Object.prototype.clone = function() {
  var newObj = (this instanceof Array) ? [] : {};
  for (var i in this) {
    if (i == 'clone') continue;
    if (this[i] && typeof this[i] == "object") {
      newObj[i] = this[i].clone();
    } else newObj[i] = this[i]
  } return newObj;
};