Was ist der effizienteste Weg, um ein JavaScript-Objekt zu klonen? Ich habe gesehen, obj = eval(uneval(o));dass es verwendet wird, aber das ist nicht Standard und wird nur von Firefox unterstützt .

Ich habe Dinge getan, obj = JSON.parse(JSON.stringify(o));aber die Effizienz in Frage gestellt.

Ich habe auch rekursive Kopierfunktionen mit verschiedenen Fehlern gesehen.
Ich bin überrascht, dass es keine kanonische Lösung gibt.

Native Deep Cloning

Es heißt "strukturiertes Klonen", funktioniert experimentell in Knoten 11 und höher und wird hoffentlich in Browsern landen. Siehe diese Antwort für weitere Details.

Schnelles Klonen mit Datenverlust - JSON.parse / stringify

Wenn Sie nicht verwenden Dates, Funktionen undefined, Infinity, regexps, Karten, Sets, Blobs, Dateilisten, ImageDatas, Sparse - Matrizen, typisiert Arrays oder andere komplexe Typen in Ihrem Objekt, ein sehr einfacher Einzeiler zu tiefer Klon eines Objekt ist:

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'
  re: /.*/,  // lost
}
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()

Benchmarks finden Sie in Corbans Antwort .

Zuverlässiges Klonen mithilfe einer Bibliothek

Da das Klonen von Objekten nicht trivial ist (komplexe Typen, Zirkelverweise, Funktionen usw.), bieten die meisten Hauptbibliotheken Funktionen zum Klonen von Objekten. Erfinden Sie das Rad nicht neu. Wenn Sie bereits eine Bibliothek verwenden, überprüfen Sie, ob diese über eine Funktion zum Klonen von Objekten verfügt. Zum Beispiel,

• lodash - cloneDeep; kann separat über das lodash.clonedeep- Modul importiert werden und ist wahrscheinlich die beste Wahl, wenn Sie noch keine Bibliothek verwenden, die eine Deep Cloning-Funktion bietet
• AngularJS - angular.copy
• jQuery - jQuery.extend(true, { }, oldObject); .clone()Klont nur DOM-Elemente

ES6

Beachten Sie der Vollständigkeit halber, dass ES6 zwei flache Kopiermechanismen bietet: Object.assign()und die Spread-Syntax . Hiermit werden Werte aller aufzählbaren eigenen Eigenschaften von einem Objekt in ein anderes kopiert. Zum Beispiel:

var A1 = {a: "2"};
var A2 = Object.assign({}, A1);
var A3 = {...A1};  // Spread Syntax

Überprüfen Sie diesen Benchmark: http://jsben.ch/#/bWfk9

In meinen vorherigen Tests, bei denen Geschwindigkeit ein Hauptanliegen war, fand ich

JSON.parse(JSON.stringify(obj))

Dies ist der langsamste Weg, um ein Objekt tief zu klonen (es ist langsamer als jQuery.extend, wobei das deepFlag um 10-20% auf true gesetzt ist).

jQuery.extend ist ziemlich schnell, wenn das deepFlag auf false(flacher Klon) gesetzt ist. Dies ist eine gute Option, da sie eine zusätzliche Logik für die Typüberprüfung enthält und nicht über undefinierte Eigenschaften usw. kopiert. Dies verlangsamt Sie jedoch auch ein wenig.

Wenn Sie die Struktur der Objekte kennen, die Sie klonen for (var i in obj)möchten, oder tief verschachtelte Arrays vermeiden können, können Sie eine einfache Schleife schreiben , um Ihr Objekt zu klonen, während Sie hasOwnProperty überprüfen. Diese ist viel schneller als jQuery.

Wenn Sie versuchen, eine bekannte Objektstruktur in einer Hot-Loop zu klonen, können Sie VIEL MEHR LEISTUNG erzielen, indem Sie einfach die Klonprozedur einbinden und das Objekt manuell erstellen.

JavaScript-Trace-Engines sind nicht in der for..inLage, Schleifen zu optimieren , und die Überprüfung von hasOwnProperty verlangsamt Sie ebenfalls. Manuelles Klonen, wenn Geschwindigkeit ein absolutes Muss ist.

var clonedObject = {
  knownProp: obj.knownProp,
  ..
}

Vorsicht bei der Verwendung der JSON.parse(JSON.stringify(obj))Methode für DateObjekte - JSON.stringify(new Date())Gibt eine Zeichenfolgendarstellung des Datums im ISO-Format zurück, die JSON.parse() nicht zurück in ein DateObjekt konvertiert wird. Siehe diese Antwort für weitere Details .

Beachten Sie außerdem, dass zumindest in Chrome 65 das native Klonen nicht der richtige Weg ist. Laut JSPerf ist das native Klonen durch Erstellen einer neuen Funktion fast 800-mal langsamer als die Verwendung von JSON.stringify, das auf der ganzen Linie unglaublich schnell ist.

Update für ES6

Wenn Sie Javascript ES6 verwenden, versuchen Sie diese native Methode zum Klonen oder für flache Kopien.

Object.assign({}, obj);

Angenommen, Sie haben nur Variablen und keine Funktionen in Ihrem Objekt, können Sie einfach Folgendes verwenden:

var newObject = JSON.parse(JSON.stringify(oldObject));

Strukturiertes Klonen

Der HTML-Standard enthält einen internen strukturierten Klon- / Serialisierungsalgorithmus , mit dem tiefe Klone von Objekten erstellt werden können. Es ist immer noch auf bestimmte integrierte Typen beschränkt, unterstützt aber zusätzlich zu den wenigen von JSON unterstützten Typen auch Dates, RegExps, Maps, Sets, Blobs, Dateilisten, ImageDatas, spärliche Arrays, typisierte Arrays und wahrscheinlich auch in Zukunft . Außerdem werden Verweise in den geklonten Daten beibehalten, sodass zyklische und rekursive Strukturen unterstützt werden können, die Fehler für JSON verursachen würden.

Unterstützung in Node.js: Experimentell 🙂

Das v8Modul in Node.js stellt derzeit (ab Knoten 11) die strukturierte Serialisierungs-API direkt zur Verfügung . Diese Funktionalität ist jedoch weiterhin als "experimentell" gekennzeichnet und kann in zukünftigen Versionen geändert oder entfernt werden. Wenn Sie eine kompatible Version verwenden, ist das Klonen eines Objekts so einfach wie:

const v8 = require('v8');

const structuredClone = obj => {
  return v8.deserialize(v8.serialize(obj));
};

Direkter Support in Browsern: Vielleicht irgendwann? 😐

Browser bieten derzeit keine direkte Schnittstelle für den strukturierten Klonalgorithmus , aber eine globale structuredClone()Funktion wurde in whatwg / html # 793 auf GitHub erläutert . Wie derzeit vorgeschlagen, wäre die Verwendung für die meisten Zwecke so einfach wie:

const clone = structuredClone(original);

Sofern dies nicht ausgeliefert wird, werden die strukturierten Klonimplementierungen von Browsern nur indirekt verfügbar gemacht.

Asynchrone Problemumgehung: Verwendbar. 😕

Der kostengünstigere Weg, einen strukturierten Klon mit vorhandenen APIs zu erstellen, besteht darin, die Daten über einen Port eines MessageChannels zu senden . Der andere Port gibt ein messageEreignis mit einem strukturierten Klon des angehängten aus .data. Leider ist das Abhören dieser Ereignisse notwendigerweise asynchron, und die synchronen Alternativen sind weniger praktisch.

class StructuredCloner {
  constructor() {
    this.pendingClones_ = new Map();
    this.nextKey_ = 0;

    const channel = new MessageChannel();
    this.inPort_ = channel.port1;
    this.outPort_ = channel.port2;

    this.outPort_.onmessage = ({data: {key, value}}) => {
      const resolve = this.pendingClones_.get(key);
      resolve(value);
      this.pendingClones_.delete(key);
    };
    this.outPort_.start();
  }

  cloneAsync(value) {
    return new Promise(resolve => {
      const key = this.nextKey_++;
      this.pendingClones_.set(key, resolve);
      this.inPort_.postMessage({key, value});
    });
  }
}

const structuredCloneAsync = window.structuredCloneAsync =
    StructuredCloner.prototype.cloneAsync.bind(new StructuredCloner);

Beispiel Verwendung:

const main = async () => {
  const original = { date: new Date(), number: Math.random() };
  original.self = original;

  const clone = await structuredCloneAsync(original);

  // They're different objects:
  console.assert(original !== clone);
  console.assert(original.date !== clone.date);

  // They're cyclical:
  console.assert(original.self === original);
  console.assert(clone.self === clone);

  // They contain equivalent values:
  console.assert(original.number === clone.number);
  console.assert(Number(original.date) === Number(clone.date));

  console.log("Assertions complete.");
};

main();

Synchrone Problemumgehungen: Schrecklich! 🤢

Es gibt keine guten Optionen zum synchronen Erstellen strukturierter Klone. Hier sind stattdessen ein paar unpraktische Hacks.

history.pushState()und history.replaceState()beide erstellen einen strukturierten Klon ihres ersten Arguments und weisen diesen Wert zu history.state. Sie können dies verwenden, um einen strukturierten Klon eines Objekts wie dieses zu erstellen:

const structuredClone = obj => {
  const oldState = history.state;
  history.replaceState(obj, null);
  const clonedObj = history.state;
  history.replaceState(oldState, null);
  return clonedObj;
};

Beispiel Verwendung:

'use strict';

const main = () => {
  const original = { date: new Date(), number: Math.random() };
  original.self = original;

  const clone = structuredClone(original);
  
  // They're different objects:
  console.assert(original !== clone);
  console.assert(original.date !== clone.date);

  // They're cyclical:
  console.assert(original.self === original);
  console.assert(clone.self === clone);

  // They contain equivalent values:
  console.assert(original.number === clone.number);
  console.assert(Number(original.date) === Number(clone.date));
  
  console.log("Assertions complete.");
};

const structuredClone = obj => {
  const oldState = history.state;
  history.replaceState(obj, null);
  const clonedObj = history.state;
  history.replaceState(oldState, null);
  return clonedObj;
};

main();

Obwohl synchron, kann dies extrem langsam sein. Es entsteht der gesamte Aufwand für die Bearbeitung des Browserverlaufs. Das wiederholte Aufrufen dieser Methode kann dazu führen, dass Chrome vorübergehend nicht mehr reagiert.

Der NotificationKonstruktor erstellt einen strukturierten Klon der zugehörigen Daten. Es wird auch versucht, dem Benutzer eine Browserbenachrichtigung anzuzeigen. Dies schlägt jedoch unbemerkt fehl, es sei denn, Sie haben eine Benachrichtigungsberechtigung angefordert. Falls Sie die Erlaubnis für andere Zwecke haben, schließen wir die von uns erstellte Benachrichtigung sofort.

const structuredClone = obj => {
  const n = new Notification('', {data: obj, silent: true});
  n.onshow = n.close.bind(n);
  return n.data;
};

Beispiel Verwendung:

'use strict';

const main = () => {
  const original = { date: new Date(), number: Math.random() };
  original.self = original;

  const clone = structuredClone(original);
  
  // They're different objects:
  console.assert(original !== clone);
  console.assert(original.date !== clone.date);

  // They're cyclical:
  console.assert(original.self === original);
  console.assert(clone.self === clone);

  // They contain equivalent values:
  console.assert(original.number === clone.number);
  console.assert(Number(original.date) === Number(clone.date));
  
  console.log("Assertions complete.");
};

const structuredClone = obj => {
  const n = new Notification('', {data: obj, silent: true});
  n.close();
  return n.data;
};

main();

Wenn es keine eingebaute gäbe, könnten Sie versuchen:

function clone(obj) {
    if (obj === null || typeof (obj) !== 'object' || 'isActiveClone' in obj)
        return obj;

    if (obj instanceof Date)
        var temp = new obj.constructor(); //or new Date(obj);
    else
        var temp = obj.constructor();

    for (var key in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, key)) {
            obj['isActiveClone'] = null;
            temp[key] = clone(obj[key]);
            delete obj['isActiveClone'];
        }
    }
    return temp;
}

Der effiziente Weg, ein Objekt in einer Codezeile zu klonen (nicht tief 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;
    }
  });
}

Code:

// extends 'from' object with members from 'to'. If 'to' is null, a deep clone of 'from' is returned
function extend(from, to)
{
    if (from == null || typeof from != "object") return from;
    if (from.constructor != Object && from.constructor != Array) return from;
    if (from.constructor == Date || from.constructor == RegExp || from.constructor == Function ||
        from.constructor == String || from.constructor == Number || from.constructor == Boolean)
        return new from.constructor(from);

    to = to || new from.constructor();

    for (var name in from)
    {
        to[name] = typeof to[name] == "undefined" ? extend(from[name], null) : to[name];
    }

    return to;
}

Prüfung:

var obj =
{
    date: new Date(),
    func: function(q) { return 1 + q; },
    num: 123,
    text: "asdasd",
    array: [1, "asd"],
    regex: new RegExp(/aaa/i),
    subobj:
    {
        num: 234,
        text: "asdsaD"
    }
}

var clone = extend(obj);

Das benutze ich:

function cloneObject(obj) {
    var clone = {};
    for(var i in obj) {
        if(typeof(obj[i])=="object" && obj[i] != null)
            clone[i] = cloneObject(obj[i]);
        else
            clone[i] = obj[i];
    }
    return clone;
}

Tiefe Kopie nach Leistung: Vom Besten zum Schlechtesten

• Neuzuweisung "=" (String-Arrays, Zahlen-Arrays - nur)
• Slice (String-Arrays, nur Zahlen-Arrays)
• Verkettung (String-Arrays, nur Zahlen-Arrays)
• Benutzerdefinierte Funktion: For-Loop oder rekursive Kopie
• jQuery's $ .extend
• JSON.parse (String-Arrays, Zahlen-Arrays, Objekt-Arrays - nur)
• _.Clone von Underscore.js (nur String-Arrays, Zahlen-Arrays)
• _.CloneDeep von Lo-Dash

Kopieren Sie ein Array von Zeichenfolgen oder Zahlen tief (eine Ebene - keine Referenzzeiger):

Wenn ein Array Zahlen und Zeichenfolgen enthält - Funktionen wie .slice (), .concat (), .splice (), der Zuweisungsoperator "=" und die Klonfunktion von Underscore.js; erstellt eine tiefe Kopie der Elemente des Arrays.

Wo Neuzuweisung die schnellste Leistung hat:

var arr1 = ['a', 'b', 'c'];
var arr2 = arr1;
arr1 = ['a', 'b', 'c'];

Und .slice () hat eine bessere Leistung als .concat (), http://jsperf.com/duplicate-array-slice-vs-concat/3

var arr1 = ['a', 'b', 'c'];  // Becomes arr1 = ['a', 'b', 'c']
var arr2a = arr1.slice(0);   // Becomes arr2a = ['a', 'b', 'c'] - deep copy
var arr2b = arr1.concat();   // Becomes arr2b = ['a', 'b', 'c'] - deep copy

Kopieren Sie ein Array von Objekten tief (zwei oder mehr Ebenen - Referenzzeiger):

var arr1 = [{object:'a'}, {object:'b'}];

Schreiben Sie eine benutzerdefinierte Funktion (hat eine schnellere Leistung als $ .extend () oder JSON.parse):

function copy(o) {
   var out, v, key;
   out = Array.isArray(o) ? [] : {};
   for (key in o) {
       v = o[key];
       out[key] = (typeof v === "object" && v !== null) ? copy(v) : v;
   }
   return out;
}

copy(arr1);

Verwenden Sie Dienstprogrammfunktionen von Drittanbietern:

$.extend(true, [], arr1); // Jquery Extend
JSON.parse(arr1);
_.cloneDeep(arr1); // Lo-dash

Wo jQuerys $ .extend eine bessere Leistung hat:

• http://jsperf.com/js-deep-copy/2
• http://jsperf.com/jquery-extend-vs-json-parse/2

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

Object.defineProperty( Object.prototype, "clone", {value: clone, enumerable: false});

Tiefes Kopieren von Objekten in JavaScript (ich denke das Beste und das Einfachste)

1. Verwenden von JSON.parse (JSON.stringify (Objekt));

var obj = { 
  a: 1,
  b: { 
    c: 2
  }
}
var newObj = JSON.parse(JSON.stringify(obj));
obj.b.c = 20;
console.log(obj); // { a: 1, b: { c: 20 } }
console.log(newObj); // { a: 1, b: { c: 2 } } 

2. Mit der erstellten Methode

function cloneObject(obj) {
    var clone = {};
    for(var i in obj) {
        if(obj[i] != null &&  typeof(obj[i])=="object")
            clone[i] = cloneObject(obj[i]);
        else
            clone[i] = obj[i];
    }
    return clone;
}

var obj = { 
  a: 1,
  b: { 
    c: 2
  }
}
var newObj = cloneObject(obj);
obj.b.c = 20;

console.log(obj); // { a: 1, b: { c: 20 } }
console.log(newObj); // { a: 1, b: { c: 2 } } 

3. Verwenden des _.cloneDeep- Link- Lodash von Lo-Dash

var obj = { 
  a: 1,
  b: { 
    c: 2
  }
}

var newObj = _.cloneDeep(obj);
obj.b.c = 20;
console.log(obj); // { a: 1, b: { c: 20 } }
console.log(newObj); // { a: 1, b: { c: 2 } } 

4. Verwenden der Object.assign () -Methode

var obj = { 
  a: 1,
  b: 2
}

var newObj = _.clone(obj);
obj.b = 20;
console.log(obj); // { a: 1, b: 20 }
console.log(newObj); // { a: 1, b: 2 }  

ABER FALSCH WANN

var obj = { 
  a: 1,
  b: { 
    c: 2
  }
}

var newObj = Object.assign({}, obj);
obj.b.c = 20;
console.log(obj); // { a: 1, b: { c: 20 } }
console.log(newObj); // { a: 1, b: { c: 20 } } --> WRONG
// Note: Properties on the prototype chain and non-enumerable properties cannot be copied.

5.Verwenden von Underscore.js _.clone link Underscore.js

var obj = { 
  a: 1,
  b: 2
}

var newObj = _.clone(obj);
obj.b = 20;
console.log(obj); // { a: 1, b: 20 }
console.log(newObj); // { a: 1, b: 2 }  

ABER FALSCH WANN

var obj = { 
  a: 1,
  b: { 
    c: 2
  }
}

var newObj = _.cloneDeep(obj);
obj.b.c = 20;
console.log(obj); // { a: 1, b: { c: 20 } }
console.log(newObj); // { a: 1, b: { c: 20 } } --> WRONG
// (Create a shallow-copied clone of the provided plain object. Any nested objects or arrays will be copied by reference, not duplicated.)

JSBEN.CH Performance Benchmarking Playground 1 ~ 3 http://jsben.ch/KVQLd

Es gibt eine Bibliothek ("Klon" genannt) , die das ganz gut macht. Es bietet das vollständigste rekursive Klonen / Kopieren von beliebigen Objekten, die mir bekannt sind. Es werden auch Zirkelverweise unterstützt, die in den anderen Antworten noch nicht behandelt werden.

Sie finden es auch auf npm . Es kann sowohl für den Browser als auch für Node.js verwendet werden.

Hier ist ein Beispiel für die Verwendung:

Installieren Sie es mit

npm install clone

oder verpacken Sie es mit Ender .

ender build clone [...]

Sie können den Quellcode auch manuell herunterladen.

Dann können Sie es in Ihrem Quellcode verwenden.

var clone = require('clone');

var a = { foo: { bar: 'baz' } };  // inital value of a
var b = clone(a);                 // clone a -> b
a.foo.bar = 'foo';                // change a

console.log(a);                   // { foo: { bar: 'foo' } }
console.log(b);                   // { foo: { bar: 'baz' } }

(Haftungsausschluss: Ich bin der Autor der Bibliothek.)

Cloning Ein Objekt war in JS immer ein Problem, aber es ging um ES6. Ich liste unten verschiedene Möglichkeiten zum Kopieren eines Objekts in JavaScript auf. Stellen Sie sich vor, Sie haben das Objekt unten und möchten eine ausführliche Kopie davon haben:

var obj = {a:1, b:2, c:3, d:4};

Es gibt nur wenige Möglichkeiten, dieses Objekt zu kopieren, ohne den Ursprung zu ändern:

1) ES5 +, Verwenden einer einfachen Funktion, um die Kopie für Sie zu erstellen:

function deepCopyObj(obj) {
    if (null == obj || "object" != typeof obj) return obj;
    if (obj instanceof Date) {
        var copy = new Date();
        copy.setTime(obj.getTime());
        return copy;
    }
    if (obj instanceof Array) {
        var copy = [];
        for (var i = 0, len = obj.length; i < len; i++) {
            copy[i] = cloneSO(obj[i]);
        }
        return copy;
    }
    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 this object.");
}

2) ES5 + mit JSON.parse und JSON.stringify.

var  deepCopyObj = JSON.parse(JSON.stringify(obj));

3) AngularJs:

var  deepCopyObj = angular.copy(obj);

4) jQuery:

var deepCopyObj = jQuery.extend(true, {}, obj);

5) Unterstriche & Loadash:

var deepCopyObj = _.cloneDeep(obj); //latest version UndescoreJs makes shallow copy

Hoffe diese Hilfe ...

Ich weiß, dass dies ein alter Beitrag ist, aber ich dachte, dass dies für die nächste Person, die mit stolpert, hilfreich sein könnte.

Solange Sie nichts einem Objekt zuweisen, behält es keine Referenz im Speicher. Um ein Objekt zu erstellen, das Sie mit anderen Objekten teilen möchten, müssen Sie eine Fabrik wie folgt erstellen:

var a = function(){
    return {
        father:'zacharias'
    };
},
b = a(),
c = a();
c.father = 'johndoe';
alert(b.father);

Wenn Sie es verwenden, verfügt die Bibliothek Underscore.js über eine Klonmethode .

var newObject = _.clone(oldObject);

Hier ist eine Version der obigen Antwort von ConroyP, die auch dann funktioniert, wenn der Konstruktor Parameter benötigt:

//If Object.create isn't already defined, we just do the simple shim,
//without the second argument, since that's all we need here
var object_create = Object.create;
if (typeof object_create !== 'function') {
    object_create = function(o) {
        function F() {}
        F.prototype = o;
        return new F();
    };
}

function deepCopy(obj) {
    if(obj == null || typeof(obj) !== 'object'){
        return obj;
    }
    //make sure the returned object has the same prototype as the original
    var ret = object_create(obj.constructor.prototype);
    for(var key in obj){
        ret[key] = deepCopy(obj[key]);
    }
    return ret;
}

Diese Funktion ist auch in meiner simpleoo- Bibliothek verfügbar .

Bearbeiten:

Hier ist eine robustere Version (dank Justin McCandless unterstützt dies jetzt auch zyklische Referenzen):

/**
 * Deep copy an object (make copies of all its object properties, sub-properties, etc.)
 * An improved version of http://keithdevens.com/weblog/archive/2007/Jun/07/javascript.clone
 * that doesn't break if the constructor has required parameters
 * 
 * It also borrows some code from http://stackoverflow.com/a/11621004/560114
 */ 
function deepCopy(src, /* INTERNAL */ _visited, _copiesVisited) {
    if(src === null || typeof(src) !== 'object'){
        return src;
    }

    //Honor native/custom clone methods
    if(typeof src.clone == 'function'){
        return src.clone(true);
    }

    //Special cases:
    //Date
    if(src instanceof Date){
        return new Date(src.getTime());
    }
    //RegExp
    if(src instanceof RegExp){
        return new RegExp(src);
    }
    //DOM Element
    if(src.nodeType && typeof src.cloneNode == 'function'){
        return src.cloneNode(true);
    }

    // Initialize the visited objects arrays if needed.
    // This is used to detect cyclic references.
    if (_visited === undefined){
        _visited = [];
        _copiesVisited = [];
    }

    // Check if this object has already been visited
    var i, len = _visited.length;
    for (i = 0; i < len; i++) {
        // If so, get the copy we already made
        if (src === _visited[i]) {
            return _copiesVisited[i];
        }
    }

    //Array
    if (Object.prototype.toString.call(src) == '[object Array]') {
        //[].slice() by itself would soft clone
        var ret = src.slice();

        //add it to the visited array
        _visited.push(src);
        _copiesVisited.push(ret);

        var i = ret.length;
        while (i--) {
            ret[i] = deepCopy(ret[i], _visited, _copiesVisited);
        }
        return ret;
    }

    //If we've reached here, we have a regular object

    //make sure the returned object has the same prototype as the original
    var proto = (Object.getPrototypeOf ? Object.getPrototypeOf(src): src.__proto__);
    if (!proto) {
        proto = src.constructor.prototype; //this line would probably only be reached by very old browsers 
    }
    var dest = object_create(proto);

    //add this object to the visited array
    _visited.push(src);
    _copiesVisited.push(dest);

    for (var key in src) {
        //Note: this does NOT preserve ES5 property attributes like 'writable', 'enumerable', etc.
        //For an example of how this could be modified to do so, see the singleMixin() function
        dest[key] = deepCopy(src[key], _visited, _copiesVisited);
    }
    return dest;
}

//If Object.create isn't already defined, we just do the simple shim,
//without the second argument, since that's all we need here
var object_create = Object.create;
if (typeof object_create !== 'function') {
    object_create = function(o) {
        function F() {}
        F.prototype = o;
        return new F();
    };
}

Im Folgenden werden zwei Instanzen desselben Objekts erstellt. Ich habe es gefunden und benutze es derzeit. Es ist einfach und leicht zu bedienen.

var objToCreate = JSON.parse(JSON.stringify(cloneThis));

Crockford schlägt vor (und ich bevorzuge), diese Funktion zu verwenden:

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

var newObject = object(oldObject);

Es ist knapp, funktioniert wie erwartet und Sie brauchen keine Bibliothek.

BEARBEITEN:

Dies ist eine Polyfüllung für Object.create, sodass Sie diese auch verwenden können.

var newObject = Object.create(oldObject);

HINWEIS: Wenn Sie einige davon verwenden, haben Sie möglicherweise Probleme mit einigen Iterationen, die Sie verwenden hasOwnProperty. Denn createneues leeres Objekt erstellen , die erben oldObject. Es ist jedoch immer noch nützlich und praktisch zum Klonen von Objekten.

Zum Beispiel wenn oldObject.a = 5;

newObject.a; // is 5

aber:

oldObject.hasOwnProperty(a); // is true
newObject.hasOwnProperty(a); // is false

Lodash hat eine schöne _.cloneDeep (value) -Methode:

var objects = [{ 'a': 1 }, { 'b': 2 }];

var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]);
// => false

function clone(obj)
 { var clone = {};
   clone.prototype = obj.prototype;
   for (property in obj) clone[property] = obj[property];
   return clone;
 }

Einzeiler mit flacher Kopie ( ECMAScript 5. Ausgabe ):

var origin = { foo : {} };
var copy = Object.keys(origin).reduce(function(c,k){c[k]=origin[k];return c;},{});

console.log(origin, copy);
console.log(origin == copy); // false
console.log(origin.foo == copy.foo); // true

Und flacher Einzeiler ( ECMAScript 6. Ausgabe , 2015):

var origin = { foo : {} };
var copy = Object.assign({}, origin);

console.log(origin, copy);
console.log(origin == copy); // false
console.log(origin.foo == copy.foo); // true

Nur weil ich AngularJS nicht erwähnt habe und dachte, dass die Leute es wissen wollen ...

angular.copy bietet auch eine Methode zum tiefen Kopieren von Objekten und Arrays.

Es scheint noch keinen idealen Deep-Clone-Operator für Array-ähnliche Objekte zu geben. Wie der folgende Code zeigt, wandelt der jQuery-Cloner von John Resig Arrays mit nicht numerischen Eigenschaften in Objekte um, die keine Arrays sind, und der JSON-Cloner von RegDwight löscht die nicht numerischen Eigenschaften. Die folgenden Tests veranschaulichen diese Punkte in mehreren Browsern:

function jQueryClone(obj) {
   return jQuery.extend(true, {}, obj)
}

function JSONClone(obj) {
   return JSON.parse(JSON.stringify(obj))
}

var arrayLikeObj = [[1, "a", "b"], [2, "b", "a"]];
arrayLikeObj.names = ["m", "n", "o"];
var JSONCopy = JSONClone(arrayLikeObj);
var jQueryCopy = jQueryClone(arrayLikeObj);

alert("Is arrayLikeObj an array instance?" + (arrayLikeObj instanceof Array) +
      "\nIs the jQueryClone an array instance? " + (jQueryCopy instanceof Array) +
      "\nWhat are the arrayLikeObj names? " + arrayLikeObj.names +
      "\nAnd what are the JSONClone names? " + JSONCopy.names)

Ich habe zwei gute Antworten, je nachdem, ob Ihr Ziel darin besteht, ein "einfaches altes JavaScript-Objekt" zu klonen oder nicht.

Nehmen wir außerdem an, dass Sie beabsichtigen, einen vollständigen Klon ohne Prototypverweise auf das Quellobjekt zu erstellen. Wenn Sie nicht an einem vollständigen Klon interessiert sind, können Sie viele der Object.clone () -Routinen verwenden, die in einigen anderen Antworten (Crockfords Muster) enthalten sind.

Für einfache alte JavaScript-Objekte ist eine bewährte Methode zum Klonen eines Objekts in modernen Laufzeiten ganz einfach:

var clone = JSON.parse(JSON.stringify(obj));

Beachten Sie, dass das Quellobjekt ein reines JSON-Objekt sein muss. Dies bedeutet, dass alle verschachtelten Eigenschaften Skalare sein müssen (wie Boolesche Werte, Zeichenfolgen, Arrays, Objekte usw.). Funktionen oder spezielle Objekte wie RegExp oder Date werden nicht geklont.

Ist es effizient? Oh Ja. Wir haben alle Arten von Klonmethoden ausprobiert und dies funktioniert am besten. Ich bin sicher, ein Ninja könnte eine schnellere Methode zaubern. Aber ich vermute, wir sprechen von geringfügigen Gewinnen.

Dieser Ansatz ist einfach und leicht zu implementieren. Wickeln Sie es in eine Komfortfunktion ein, und wenn Sie wirklich etwas Gewinn herausholen müssen, versuchen Sie es zu einem späteren Zeitpunkt.

Für nicht einfache JavaScript-Objekte gibt es keine wirklich einfache Antwort. In der Tat kann es aufgrund der Dynamik der JavaScript-Funktionen und des inneren Objektzustands keine geben. Um eine JSON-Struktur mit darin enthaltenen Funktionen tief zu klonen, müssen Sie diese Funktionen und ihren inneren Kontext neu erstellen. Und JavaScript hat einfach keine standardisierte Methode, um dies zu tun.

Der richtige Weg, dies erneut zu tun, ist eine bequeme Methode, die Sie in Ihrem Code deklarieren und wiederverwenden. Die Convenience-Methode kann mit einem gewissen Verständnis Ihrer eigenen Objekte ausgestattet werden, sodass Sie sicherstellen können, dass das Diagramm innerhalb des neuen Objekts ordnungsgemäß neu erstellt wird.

Wir haben unsere eigenen geschrieben, aber der beste allgemeine Ansatz, den ich gesehen habe, wird hier behandelt:

http://davidwalsh.name/javascript-clone

Das ist die richtige Idee. Der Autor (David Walsh) hat das Klonen generalisierter Funktionen auskommentiert. Dies können Sie je nach Anwendungsfall tun.

Die Hauptidee ist, dass Sie die Instanziierung Ihrer Funktionen (oder sozusagen prototypischer Klassen) pro Typ speziell behandeln müssen. Hier hat er einige Beispiele für RegExp und Date angegeben.

Dieser Code ist nicht nur kurz, sondern auch sehr gut lesbar. Es ist ziemlich einfach zu erweitern.

Ist das effizient? Oh Ja. Da das Ziel darin besteht, einen echten Deep-Copy-Klon zu erstellen, müssen Sie die Mitglieder des Quellobjektdiagramms durchlaufen. Mit diesem Ansatz können Sie genau festlegen, welche untergeordneten Mitglieder behandelt werden sollen und wie benutzerdefinierte Typen manuell behandelt werden sollen.

Hier bitteschön. Zwei Ansätze. Beide sind meiner Ansicht nach effizient.

Dies ist im Allgemeinen nicht die effizienteste Lösung, aber sie macht das, was ich brauche. Einfache Testfälle unten ...

function clone(obj, clones) {
    // Makes a deep copy of 'obj'. Handles cyclic structures by
    // tracking cloned obj's in the 'clones' parameter. Functions 
    // are included, but not cloned. Functions members are cloned.
    var new_obj,
        already_cloned,
        t = typeof obj,
        i = 0,
        l,
        pair; 

    clones = clones || [];

    if (obj === null) {
        return obj;
    }

    if (t === "object" || t === "function") {

        // check to see if we've already cloned obj
        for (i = 0, l = clones.length; i < l; i++) {
            pair = clones[i];
            if (pair[0] === obj) {
                already_cloned = pair[1];
                break;
            }
        }

        if (already_cloned) {
            return already_cloned; 
        } else {
            if (t === "object") { // create new object
                new_obj = new obj.constructor();
            } else { // Just use functions as is
                new_obj = obj;
            }

            clones.push([obj, new_obj]); // keep track of objects we've cloned

            for (key in obj) { // clone object members
                if (obj.hasOwnProperty(key)) {
                    new_obj[key] = clone(obj[key], clones);
                }
            }
        }
    }
    return new_obj || obj;
}

Zyklischer Array-Test ...

a = []
a.push("b", "c", a)
aa = clone(a)
aa === a //=> false
aa[2] === a //=> false
aa[2] === a[2] //=> false
aa[2] === aa //=> true

Funktionstest...

f = new Function
f.a = a
ff = clone(f)
ff === f //=> true
ff.a === a //=> false

AngularJS

Wenn Sie Angular verwenden, können Sie dies auch tun

var newObject = angular.copy(oldObject);

Ich bin mit der Antwort mit den größten Stimmen hier nicht einverstanden . Ein rekursiver Deep Clone ist viel schneller als der erwähnte Ansatz von JSON.parse (JSON.stringify (obj)) .

• Jsperf ist hier die Nummer eins: https://jsperf.com/deep-copy-vs-json-stringify-json-parse/5
• Jsben aus der obigen Antwort wurde aktualisiert, um zu zeigen, dass ein rekursiver tiefer Klon alle anderen genannten übertrifft : http://jsben.ch/13YKQ

Und hier ist die Funktion zum schnellen Nachschlagen:

function cloneDeep (o) {
  let newO
  let i

  if (typeof o !== 'object') return o

  if (!o) return o

  if (Object.prototype.toString.apply(o) === '[object Array]') {
    newO = []
    for (i = 0; i < o.length; i += 1) {
      newO[i] = cloneDeep(o[i])
    }
    return newO
  }

  newO = {}
  for (i in o) {
    if (o.hasOwnProperty(i)) {
      newO[i] = cloneDeep(o[i])
    }
  }
  return newO
}

// obj target object, vals source object
var setVals = function (obj, vals) {
    if (obj && vals) {
        for (var x in vals) {
            if (vals.hasOwnProperty(x)) {
                if (obj[x] && typeof vals[x] === 'object') {
                    obj[x] = setVals(obj[x], vals[x]);
                } else {
                    obj[x] = vals[x];
                }
            }
        }
    }
    return obj;
};

Nur wenn Sie ECMAScript 6 oder Transpiler verwenden können .

Eigenschaften:

• Löst beim Kopieren keinen Getter / Setter aus.
• Erhält Getter / Setter.
• Bewahrt Prototypinformationen auf.
• Funktioniert sowohl mit objektliteralen als auch mit funktionalen OO- Schreibstilen.

Code:

function clone(target, source){

    for(let key in source){

        // Use getOwnPropertyDescriptor instead of source[key] to prevent from trigering setter/getter.
        let descriptor = Object.getOwnPropertyDescriptor(source, key);
        if(descriptor.value instanceof String){
            target[key] = new String(descriptor.value);
        }
        else if(descriptor.value instanceof Array){
            target[key] = clone([], descriptor.value);
        }
        else if(descriptor.value instanceof Object){
            let prototype = Reflect.getPrototypeOf(descriptor.value);
            let cloneObject = clone({}, descriptor.value);
            Reflect.setPrototypeOf(cloneObject, prototype);
            target[key] = cloneObject;
        }
        else {
            Object.defineProperty(target, key, descriptor);
        }
    }
    let prototype = Reflect.getPrototypeOf(source);
    Reflect.setPrototypeOf(target, prototype);
    return target;
}

Hier ist eine umfassende clone () -Methode, mit der jedes JavaScript-Objekt geklont werden kann. Es behandelt fast alle Fälle:

function clone(src, deep) {

    var toString = Object.prototype.toString;
    if (!src && typeof src != "object") {
        // Any non-object (Boolean, String, Number), null, undefined, NaN
        return src;
    }

    // Honor native/custom clone methods
    if (src.clone && toString.call(src.clone) == "[object Function]") {
        return src.clone(deep);
    }

    // DOM elements
    if (src.nodeType && toString.call(src.cloneNode) == "[object Function]") {
        return src.cloneNode(deep);
    }

    // Date
    if (toString.call(src) == "[object Date]") {
        return new Date(src.getTime());
    }

    // RegExp
    if (toString.call(src) == "[object RegExp]") {
        return new RegExp(src);
    }

    // Function
    if (toString.call(src) == "[object Function]") {

        //Wrap in another method to make sure == is not true;
        //Note: Huge performance issue due to closures, comment this :)
        return (function(){
            src.apply(this, arguments);
        });
    }

    var ret, index;
    //Array
    if (toString.call(src) == "[object Array]") {
        //[].slice(0) would soft clone
        ret = src.slice();
        if (deep) {
            index = ret.length;
            while (index--) {
                ret[index] = clone(ret[index], true);
            }
        }
    }
    //Object
    else {
        ret = src.constructor ? new src.constructor() : {};
        for (var prop in src) {
            ret[prop] = deep
                ? clone(src[prop], true)
                : src[prop];
        }
    }
    return ret;
};