JS: Erstellt Object.assign() eine tiefe Kopie oder eine flache Kopie?

Ich bin gerade auf dieses Konzept gestoßen

var copy = Object.assign({}, originalObject);

wodurch eine Kopie des Originalobjekts in das “copy” Objekt. Meine Frage ist jedoch, erstellt diese Art des Klonens von Objekten eine tiefe Kopie oder eine flache Kopie?

PS: Die Verwirrung ist, wenn es eine tiefe Kopie erstellt, wäre es der einfachste Weg, ein Objekt zu klonen.

Vergessen Sie tiefe Kopien, selbst flache Kopien sind nicht sicher, wenn das Objekt, das Sie kopieren, eine Eigenschaft hat enumerable Attribut auf false gesetzt.

MDN:

Die Methode Object.assign() kopiert nur aufzählbare und eigene Eigenschaften von einem Quellobjekt in ein Zielobjekt

Nehmen Sie dieses Beispiel

var o = {};

Object.defineProperty(o,'x',{enumerable: false,value : 15});

var ob={}; 
Object.assign(ob,o);

console.log(o.x); // 15
console.log(ob.x); // undefined

Durch die Nutzung Object.assign()machst du eigentlich Flache Kopie Ihres Objekts. Immer wenn wir eine Operation wie das Zuweisen eines Objekts zu einem anderen ausführen, führen wir tatsächlich eine flache Kopie durch, dh wenn OBJ1 ein Objekt ist, wird die Änderung durch ein anderes Objekt, das OBJ2 ist, auch Änderungen in OBJ1 widerspiegeln.

Es erstellt eine flache Kopie, entsprechend dieser Absatz von MDN:

Für Deep Cloning müssen wir andere Alternativen verwenden, da Object.assign() Eigenschaftswerte kopiert. Wenn der Quellwert eine Referenz auf ein Objekt ist, wird nur dieser Referenzwert kopiert.

Für Redux-Zwecke Object.assign() ist ausreichend, da der Status einer Redux-App nur unveränderliche Werte (JSON) enthält.

Für klein Data structures Ich sehe das JSON.stringify() und JSON.parse() schön arbeiten.

// store as JSON
var copyOfWindowLocation = JSON.stringify(window.location)
console.log("JSON structure - copy:", copyOfWindowLocation)
// convert back to Javascript Object
copyOfWindowLocation = JSON.parse(copyOfWindowLocation)
console.log("Javascript structure - copy:", copyOfWindowLocation)

Andere Antworten sind kompliziert.
Manche beantworten die Frage gar nicht.

Unten hat bei mir funktioniert

// orignal object with deep keys
var originalObject = {
    k1: "v1",
    k2: "v2",
    deepObj: {
        k3: "v3",
        k4: "v4"
    }
};

// make copies now
var copy1 = JSON.parse(JSON.stringify(originalObject));
var copy2 = JSON.parse(JSON.stringify(originalObject));

Hoffentlich hilft das.

Wie oben erwähnt, Object.assign() führt einen flachen Klon aus, kopiert die benutzerdefinierten Methoden des Quellobjekts nicht und kopiert keine Eigenschaften mit enumerable: false.

Das Beibehalten von Methoden und nicht aufzählbaren Eigenschaften erfordert mehr Code, aber nicht viel mehr.

Dadurch wird ein flacher Klon eines Arrays oder Objekts erstellt, wobei die Methoden und alle Eigenschaften der Quelle kopiert werden:

function shallowClone(src) {
  let dest = (src instanceof Array) ? [] : {};

// duplicate prototypes of the source
  Object.setPrototypeOf(dest, Object.getPrototypeOf(src));

  Object.getOwnPropertyNames(src).forEach(name => {
    const descriptor = Object.getOwnPropertyDescriptor(src, name);
    Object.defineProperty(dest, name, descriptor);
  });
  return dest;
}

Beispiel:

class Custom extends Object {
  myCustom() {}
}

const source = new Custom();
source.foo = "this is foo";
Object.defineProperty(source, "nonEnum", {
  value: "do not enumerate",
  enumerable: false
});
Object.defineProperty(source, "nonWrite", {
  value: "do not write",
  writable: false
});
Object.defineProperty(source, "nonConfig", {
  value: "do not config",
  configurable: false
});

let clone = shallowClone(source);

console.log("source.nonEnum:",source.nonEnum);
// source.nonEnum: "do not enumerate"
console.log("clone.nonEnum:", clone.nonEnum);
// clone.nonEnum: – "do not enumerate"

console.log("typeof source.myCustom:", typeof source.myCustom);
// typeof source.myCustom: – "function"
console.log("typeof clone.myCustom:", typeof clone.myCustom);
// typeof clone.myCustom: – "function"

jsfiddle

var copy = Object.assign({}, originalObject);

Eine flache Kopie, die die Kopie ändert, spiegelt auch Änderungen in Ihrem ursprünglichen Objekt wider. Um also eine tiefe Kopie durchzuführen, würde ich die empfehlen lodash KlonDeep

import cloneDeep from 'lodash/cloneDeep';
var copy = cloneDeep(originalObject);