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

In ES-6 können Sie einfach Object.assign(...) verwenden. Beispiel:

let obj = {person: 'Thor Odinson'};
let clone = Object.assign({}, obj);

Eine gute Referenz ist hier zu finden: https://googlechrome.github.io/samples/object-assign-es6/

Answer 2

Interessiert am Klonen einfacher Objekte:

JSON.parse(JSON.stringify(json_original));

Quelle: Wie kopiert man ein JavaScript-Objekt in eine neue Variable NICHT per Referenz?

Answer 3

Strukturiertes Klonen

2022 Aktualisierung: Die structuredClone() Funktion ist bereits in Node 17, Deno 1.14 und den meisten gängigen Browsern verfügbar (siehe Kann ich die ).

Sie kann verwenden denselben strukturierten Klon-Mechanismus, den der HTML-Standard für die Übermittlung von Daten zwischen Realms vorsieht.

const clone = structuredClone(original);

Ver die andere Antwort für weitere Einzelheiten.

Answer 4

let clone = Object.assign( Object.create( Object.getPrototypeOf(obj)), obj)

ES6-Lösung, wenn Sie ein (oberflächliches) Klonen einer Klasseninstanz und nicht nur ein Eigenschaftsobjekt.

Answer 5

Sie können ein Objekt klonen und alle Verweise auf das vorherige Objekt mit einer einzigen Codezeile entfernen. Tun Sie es einfach:

var obj1 = { text: 'moo1' };
var obj2 = Object.create(obj1); // Creates a new clone without references

obj2.text = 'moo2'; // Only updates obj2's text property

console.log(obj1, obj2); // Outputs: obj1: {text:'moo1'}, obj2: {text:'moo2'}

Bei Browsern/Engines, die Object.create derzeit nicht unterstützen, können Sie dieses Polyfill verwenden:

// Polyfill Object.create if it does not exist
if (!Object.create) {
    Object.create = function (o) {
        var F = function () {};
        F.prototype = o;
        return new F();
    };
}