Wenn Sie Datein Ihrem Objekt keine s, Funktionen, undefined, regExp oder Infinity verwenden, ist ein sehr einfacher Einzeiler JSON.parse(JSON.stringify(object)):

const a = {
  string: 'string',
  number: 123,
  bool: false,
  nul: null,
  date: new Date(),  // stringified
  undef: undefined,  // lost
  inf: Infinity,  // forced to 'null'
}
console.log(a);
console.log(typeof a.date);  // Date object
const clone = JSON.parse(JSON.stringify(a));
console.log(clone);
console.log(typeof clone.date);  // result of .toISOString()

Dies funktioniert für alle Arten von Objekten, die Objekte, Arrays, Zeichenfolgen, Boolesche Werte und Zahlen enthalten.

Siehe auch diesen Artikel über den strukturierten Klonalgorithmus von Browsern, der beim Posten von Nachrichten an und von einem Worker verwendet wird. Es enthält auch eine Funktion zum tiefen Klonen.

Mit jQuery können Sie flache Kopien mit verlängern :

var copiedObject = jQuery.extend({}, originalObject)

Nachträgliche Änderungen am copiedObjectwerden sich nicht auf das auswirken originalObjectund umgekehrt.

Oder um eine tiefe Kopie zu machen :

var copiedObject = jQuery.extend(true, {}, originalObject)

In ECMAScript 6 gibt es die Object.assign- Methode, mit der Werte aller aufzählbaren eigenen Eigenschaften von einem Objekt in ein anderes kopiert werden. Zum Beispiel:

var x = {myProp: "value"};
var y = Object.assign({}, x); 

Beachten Sie jedoch, dass verschachtelte Objekte weiterhin als Referenz kopiert werden.

Pro MDN :

• Wenn Sie eine flache Kopie wünschen, verwenden Sie Object.assign({}, a)
• Verwenden Sie für "tiefe" Kopie JSON.parse(JSON.stringify(a))

Es sind keine externen Bibliotheken erforderlich, Sie müssen jedoch zuerst die Browserkompatibilität überprüfen .

Es gibt viele Antworten, aber keine, die Object.create erwähnt aus ECMAScript 5 erwähnt, das Ihnen zwar keine exakte Kopie gibt, aber die Quelle als Prototyp des neuen Objekts festlegt.

Dies ist also keine genaue Antwort auf die Frage, aber es ist eine einzeilige Lösung und somit elegant. Und es funktioniert am besten für 2 Fälle:

1. Wo eine solche Vererbung nützlich ist (duh!)
2. Wenn das Quellobjekt nicht geändert wird, ist die Beziehung zwischen den beiden Objekten kein Problem.

Beispiel:

var foo = { a : 1 };
var bar = Object.create(foo);
foo.a; // 1
bar.a; // 1
foo.a = 2;
bar.a; // 2 - prototype changed
bar.a = 3;
foo.a; // Still 2, since setting bar.a makes it an "own" property

Warum halte ich diese Lösung für überlegen? Es ist nativ, also keine Schleife, keine Rekursion. Ältere Browser benötigen jedoch eine Polyfüllung.

Eine elegante Möglichkeit, ein Javascript-Objekt in einer Codezeile zu klonen

Eine Object.assignMethode ist Teil des ECMAScript 2015 (ES6) -Standards und macht genau das, was Sie brauchen.

var clone = Object.assign({}, obj);

Die Object.assign () -Methode wird verwendet, um die Werte aller aufzählbaren eigenen Eigenschaften von einem oder mehreren Quellobjekten in ein Zielobjekt zu kopieren.

Weiterlesen...

Die Polyfüllung zur Unterstützung älterer Browser:

if (!Object.assign) {
  Object.defineProperty(Object, 'assign', {
    enumerable: false,
    configurable: true,
    writable: true,
    value: function(target) {
      'use strict';
      if (target === undefined || target === null) {
        throw new TypeError('Cannot convert first argument to object');
      }

      var to = Object(target);
      for (var i = 1; i < arguments.length; i++) {
        var nextSource = arguments[i];
        if (nextSource === undefined || nextSource === null) {
          continue;
        }
        nextSource = Object(nextSource);

        var keysArray = Object.keys(nextSource);
        for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
          var nextKey = keysArray[nextIndex];
          var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
          if (desc !== undefined && desc.enumerable) {
            to[nextKey] = nextSource[nextKey];
          }
        }
      }
      return to;
    }
  });
}

Bei den meisten Lösungen im Internet gibt es mehrere Probleme. Deshalb habe ich mich für ein Follow-up entschieden, das beinhaltet, warum die akzeptierte Antwort nicht akzeptiert werden sollte.

Ausgangssituation

Ich möchte ein Javascript mit all seinen Kindern und ihren Kindern und so weiter tief kopierenObject . Da ich aber nicht Art eines normalen Entwickler bin, meine Objecthat normale properties , circular structuresund sogarnested objects .

Also lasst uns ein circular structureund ein nested objecterstes erstellen .

function Circ() {
    this.me = this;
}

function Nested(y) {
    this.y = y;
}

Lassen Sie uns alles in einem ObjectNamen zusammenbringen a.

var a = {
    x: 'a',
    circ: new Circ(),
    nested: new Nested('a')
};

Als nächstes wollen wir ain eine Variable mit dem Namen kopieren bund sie mutieren.

var b = a;

b.x = 'b';
b.nested.y = 'b';

Sie wissen, was hier passiert ist, denn wenn nicht, würden Sie nicht einmal auf diese großartige Frage stoßen.

console.log(a, b);

a --> Object {
    x: "b",
    circ: Circ {
        me: Circ { ... }
    },
    nested: Nested {
        y: "b"
    }
}

b --> Object {
    x: "b",
    circ: Circ {
        me: Circ { ... }
    },
    nested: Nested {
        y: "b"
    }
}

Lassen Sie uns nun eine Lösung finden.

JSON

Der erste Versuch, den ich versuchte, war mit JSON.

var b = JSON.parse( JSON.stringify( a ) );

b.x = 'b';
b.nested.y = 'b';

Verschwenden Sie nicht zu viel Zeit damit TypeError: Converting circular structure to JSON .

Rekursive Kopie (die akzeptierte "Antwort")

Werfen wir einen Blick auf die akzeptierte Antwort.

function cloneSO(obj) {
    // Handle the 3 simple types, and null or undefined
    if (null == obj || "object" != typeof obj) return obj;

    // Handle Date
    if (obj instanceof Date) {
        var copy = new Date();
        copy.setTime(obj.getTime());
        return copy;
    }

    // Handle Array
    if (obj instanceof Array) {
        var copy = [];
        for (var i = 0, len = obj.length; i < len; i++) {
            copy[i] = cloneSO(obj[i]);
        }
        return copy;
    }

    // Handle Object
    if (obj instanceof Object) {
        var copy = {};
        for (var attr in obj) {
            if (obj.hasOwnProperty(attr)) copy[attr] = cloneSO(obj[attr]);
        }
        return copy;
    }

    throw new Error("Unable to copy obj! Its type isn't supported.");
}

Sieht gut aus, oder? Es ist eine rekursive Kopie des Objekts und behandelt auch andere Typen Date, aber das war keine Voraussetzung.

var b = cloneSO(a);

b.x = 'b';
b.nested.y = 'b';

Rekursion und circular structuresfunktioniert nicht gut zusammen ...RangeError: Maximum call stack size exceeded

native Lösung

Nachdem ich mit meinem Kollegen gestritten hatte, fragte mich mein Chef, was passiert sei, und er fand nach einigem googeln eine einfache Lösung . Es heißt Object.create.

var b = Object.create(a);

b.x = 'b';
b.nested.y = 'b';

Diese Lösung wurde vor einiger Zeit zu Javascript hinzugefügt und funktioniert sogar circular structure.

console.log(a, b);

a --> Object {
    x: "a",
    circ: Circ {
        me: Circ { ... }
    },
    nested: Nested {
        y: "b"
    }
}

b --> Object {
    x: "b",
    circ: Circ {
        me: Circ { ... }
    },
    nested: Nested {
        y: "b"
    }
}

... und Sie sehen, es hat mit der verschachtelten Struktur im Inneren nicht funktioniert.

Polyfill für die native Lösung

Es gibt eine Polyfüllung für Object.createden älteren Browser, genau wie für den IE 8. Sie wird von Mozilla empfohlen, ist natürlich nicht perfekt und führt zum gleichen Problem wie die native Lösung .

function F() {};
function clonePF(o) {
    F.prototype = o;
    return new F();
}

var b = clonePF(a);

b.x = 'b';
b.nested.y = 'b';

Ich habe den Bereich Faußerhalb des Bereichs platziert, damit wir einen Blick darauf werfen können, was instanceofuns sagt.

console.log(a, b);

a --> Object {
    x: "a",
    circ: Circ {
        me: Circ { ... }
    },
    nested: Nested {
        y: "b"
    }
}

b --> F {
    x: "b",
    circ: Circ {
        me: Circ { ... }
    },
    nested: Nested {
        y: "b"
    }
}

console.log(typeof a, typeof b);

a --> object
b --> object

console.log(a instanceof Object, b instanceof Object);

a --> true
b --> true

console.log(a instanceof F, b instanceof F);

a --> false
b --> true

Gleiches Problem wie bei der nativen Lösung , jedoch etwas schlechtere Ausgabe.

die bessere (aber nicht perfekte) Lösung

Beim Stöbern fand ich eine ähnliche Frage ( in Javascript, wenn ich eine tiefe Kopie durchführe, wie vermeide ich einen Zyklus, weil eine Eigenschaft "dies" ist? ) Zu dieser Frage , aber mit einer viel besseren Lösung.

function cloneDR(o) {
    const gdcc = "__getDeepCircularCopy__";
    if (o !== Object(o)) {
        return o; // primitive value
    }

    var set = gdcc in o,
        cache = o[gdcc],
        result;
    if (set && typeof cache == "function") {
        return cache();
    }
    // else
    o[gdcc] = function() { return result; }; // overwrite
    if (o instanceof Array) {
        result = [];
        for (var i=0; i<o.length; i++) {
            result[i] = cloneDR(o[i]);
        }
    } else {
        result = {};
        for (var prop in o)
            if (prop != gdcc)
                result[prop] = cloneDR(o[prop]);
            else if (set)
                result[prop] = cloneDR(cache);
    }
    if (set) {
        o[gdcc] = cache; // reset
    } else {
        delete o[gdcc]; // unset again
    }
    return result;
}

var b = cloneDR(a);

b.x = 'b';
b.nested.y = 'b';

Und schauen wir uns die Ausgabe an ...

console.log(a, b);

a --> Object {
    x: "a",
    circ: Object {
        me: Object { ... }
    },
    nested: Object {
        y: "a"
    }
}

b --> Object {
    x: "b",
    circ: Object {
        me: Object { ... }
    },
    nested: Object {
        y: "b"
    }
}

console.log(typeof a, typeof b);

a --> object
b --> object

console.log(a instanceof Object, b instanceof Object);

a --> true
b --> true

console.log(a instanceof F, b instanceof F);

a --> false
b --> false

Die Anforderungen stimmen überein, aber es gibt noch einige kleinere Probleme, einschließlich des Änderns instancevon nestedund circzu Object.

Die Struktur von Bäumen, die sich ein Blatt teilen, wird nicht kopiert, sondern zu zwei unabhängigen Blättern:

        [Object]                     [Object]
         /    \                       /    \
        /      \                     /      \
      |/_      _\|                 |/_      _\|  
  [Object]    [Object]   ===>  [Object]    [Object]
       \        /                 |           |
        \      /                  |           |
        _\|  |/_                 \|/         \|/
        [Object]               [Object]    [Object]

Fazit

Die letzte Lösung mit Rekursion und Cache ist möglicherweise nicht die beste, aber es handelt sich um eine echte Kopie des Objekts. Es behandelt einfach properties, circular structuresund nested object, aber es wird vermasseln die Instanz von ihnen während klonen.

jsfiddle

Wenn Sie mit einer flachen Kopie einverstanden sind, verfügt die Bibliothek underscore.js über eine Klonmethode .

y = _.clone(x);

oder Sie können es wie erweitern

copiedObject = _.extend({},originalObject);

OK, stellen Sie sich vor, Sie haben dieses Objekt unten und möchten es klonen:

let obj = {a:1, b:2, c:3}; //ES6

oder

var obj = {a:1, b:2, c:3}; //ES5

Die Antwort hängt hauptsächlich davon ab, welches ECMA-Skript Sie verwenden. In ES6+können Sie einfach Object.assignden Klon erstellen :

let cloned = Object.assign({}, obj); //new {a:1, b:2, c:3};

oder mit einem Spread-Operator wie folgt:

let cloned = {...obj}; //new {a:1, b:2, c:3};

Wenn Sie jedoch verwenden ES5, können Sie nur wenige Methoden verwenden. JSON.stringifyStellen Sie jedoch sicher, dass Sie nicht einen großen Datenblock zum Kopieren verwenden. In vielen Fällen kann dies jedoch eine praktische Zeile sein:

let cloned = JSON.parse(JSON.stringify(obj)); 
//new {a:1, b:2, c:3};, can be handy, but avoid using on big chunk of data over and over

Eine besonders unelegante Lösung ist die Verwendung der JSON-Codierung, um tiefe Kopien von Objekten zu erstellen, die keine Mitgliedsmethoden haben. Die Methode besteht darin, Ihr Zielobjekt mit JSON zu codieren. Durch Decodieren erhalten Sie dann die gesuchte Kopie. Sie können so oft dekodieren, wie Sie möchten, und so viele Kopien erstellen, wie Sie benötigen.

Natürlich gehören Funktionen nicht zu JSON, daher funktioniert dies nur für Objekte ohne Member-Methoden.

Diese Methode war perfekt für meinen Anwendungsfall, da ich JSON-Blobs in einem Schlüsselwertspeicher speichere und wenn sie als Objekte in einer JavaScript-API verfügbar gemacht werden, enthält jedes Objekt tatsächlich eine Kopie des ursprünglichen Status des Objekts kann das Delta berechnen, nachdem der Anrufer das exponierte Objekt mutiert 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

Sie können einfach eine Spread-Eigenschaft verwenden, um ein Objekt ohne Referenzen zu kopieren. Aber seien Sie vorsichtig (siehe Kommentare), die 'Kopie' befindet sich nur auf der untersten Objekt- / Array-Ebene. Verschachtelte Eigenschaften sind immer noch Referenzen!

Kompletter 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 Deep Clones nativ nicht. Verwenden Sie eine Utility-Funktion. Zum Beispiel Ramda:

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

Für Benutzer von AngularJS gibt es auch eine direkte Methode zum Klonen oder Erweitern der Objekte in dieser Bibliothek.

var destination = angular.copy(source);

oder

angular.copy(source, destination);

Mehr in der Dokumentation zu angle.copy ...

Hier ist eine Funktion, die Sie verwenden können.

function clone(obj) {
    if(obj == null || typeof(obj) != 'object')
        return obj;    
    var temp = new obj.constructor(); 
    for(var key in obj)
        temp[key] = clone(obj[key]);    
    return temp;
}

A. Levys Antwort ist fast vollständig, hier ist mein kleiner Beitrag: Es gibt eine Möglichkeit, mit rekursiven Referenzen umzugehen , siehe diese Zeile

if(this[attr]==this) copy[attr] = copy;

Wenn das Objekt ein XML-DOM-Element ist, müssen wir stattdessen cloneNode verwenden

if(this.cloneNode) return this.cloneNode(true);

Inspiriert von A. Levys umfassender Studie und Calvins Prototyping-Ansatz biete ich folgende Lösung an:

Object.prototype.clone = function() {
  if(this.cloneNode) return this.cloneNode(true);
  var copy = this instanceof Array ? [] : {};
  for(var attr in this) {
    if(typeof this[attr] == "function" || this[attr]==null || !this[attr].clone)
      copy[attr] = this[attr];
    else if(this[attr]==this) copy[attr] = copy;
    else copy[attr] = this[attr].clone();
  }
  return copy;
}

Date.prototype.clone = function() {
  var copy = new Date();
  copy.setTime(this.getTime());
  return copy;
}

Number.prototype.clone = 
Boolean.prototype.clone =
String.prototype.clone = function() {
  return this;
}

Siehe auch den Hinweis von Andy Burke in den Antworten.

Aus diesem Artikel: So kopieren Sie Arrays und Objekte in Javascript 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;
};

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

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

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

In ECMAScript 2018

let objClone = { ...obj };

Beachten Sie, dass verschachtelte Objekte weiterhin als Referenz kopiert werden .

Verwenden von Lodash:

var y = _.clone(x, true);

Interessiert am Klonen einfacher Objekte:

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

Quelle: Wie kopiere ich ein JavaScript-Objekt in eine neue Variable, NICHT als Referenz?

Sie können ein Objekt klonen und alle Verweise mit einer einzigen Codezeile aus dem vorherigen entfernen. Einfach machen:

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'}

Für Browser / Engines, die Object.create derzeit nicht unterstützen, können Sie diese Polyfüllung 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();
    };
}

Neue Antwort auf eine alte Frage! Wenn Sie das Vergnügen haben, ECMAScript 2016 (ES6) mit Spread Syntax zu verwenden , ist dies ganz einfach.

keepMeTheSame = {first: "Me!", second: "You!"};
cloned = {...keepMeTheSame}

Dies bietet eine saubere Methode für eine flache Kopie eines Objekts. Das Erstellen einer tiefen Kopie, dh das Erstellen einer neuen Kopie jedes Werts in jedem rekursiv verschachtelten Objekt, erfordert eine der oben genannten schwereren Lösungen.

JavaScript entwickelt sich weiter.