Jaki jest najskuteczniejszy sposób klonowania obiektu JavaScript? Widziałem, że jestem obj = eval(uneval(o));używany, ale to niestandardowe i obsługiwane tylko przez Firefox .

Robiłem takie rzeczy, obj = JSON.parse(JSON.stringify(o));ale kwestionowałem efektywność.

Widziałem także funkcje kopiowania rekurencyjnego z różnymi wadami.
Dziwi mnie, że nie ma kanonicznego rozwiązania.

Natywne głębokie klonowanie

Nazywa się to „klonowaniem strukturalnym”, działa eksperymentalnie w węźle 11 i późniejszych i mam nadzieję, że wyląduje w przeglądarkach. Zobacz tę odpowiedź, aby uzyskać więcej informacji.

Szybkie klonowanie z utratą danych - JSON.parse / stringify

Jeśli nie używać Dates, funkcji, undefined, Infinity, wyrażenia regularne, mapy, zestawy, Blobs, FileLists, ImageDatas, rzadki tablic, wpisane tablic lub innych typów złożonych w swoim obiekcie, bardzo prosta wkładka do głębokiego klonu przedmiotem jest:

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()

Zobacz odpowiedź Corban jest dla odniesienia.

Niezawodne klonowanie przy użyciu biblioteki

Ponieważ klonowanie obiektów nie jest trywialne (typy złożone, odwołania kołowe, funkcja itp.), Większość głównych bibliotek zapewnia funkcję klonowania obiektów. Nie wymyślaj na nowo koła - jeśli już korzystasz z biblioteki, sprawdź, czy ma ona funkcję klonowania obiektów. Na przykład,

• lodash - cloneDeep; można zaimportować osobno za pomocą modułu lodash.clonedeep i jest to prawdopodobnie najlepszy wybór, jeśli jeszcze nie korzystasz z biblioteki zapewniającej funkcję głębokiego klonowania
• AngularJS - angular.copy
• jQuery - jQuery.extend(true, { }, oldObject); .clone()klonuje tylko elementy DOM

ES6

Dla kompletności zwróć uwagę, że ES6 oferuje dwa mechanizmy płytkiej kopii: Object.assign()i składnię stron widzących . który kopiuje wartości wszystkich wyliczalnych własnych właściwości z jednego obiektu do drugiego. Na przykład:

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

Sprawdź ten test: http://jsben.ch/#/bWfk9

W moich poprzednich testach, gdzie szybkość była głównym problemem, stwierdziłem

JSON.parse(JSON.stringify(obj))

być najwolniejszym sposobem głębokiego klonowania obiektu (jest wolniejszy niż jQuery.extend z deepflagą ustawioną na 10-20%).

jQuery.extend działa dość szybko, gdy deepflaga jest ustawiona na false(płytki klon). Jest to dobra opcja, ponieważ zawiera dodatkową logikę do sprawdzania poprawności typu i nie kopiuje niezdefiniowanych właściwości itp., Ale to również trochę spowolni.

Jeśli znasz strukturę obiektów, które próbujesz sklonować lub możesz uniknąć głęboko zagnieżdżonych tablic, możesz napisać prostą for (var i in obj)pętlę, aby sklonować obiekt podczas sprawdzania hasOwnProperty i będzie on znacznie szybszy niż jQuery.

Wreszcie, jeśli próbujesz sklonować znaną strukturę obiektu w gorącej pętli, możesz uzyskać DUŻO WIĘKSZĄ WYDAJNOŚĆ, po prostu wstawiając procedurę klonowania i ręcznie konstruując obiekt.

Mechanizmy śledzenia JavaScript są do bani w optymalizacji for..inpętli, a sprawdzenie hasOwnProperty również spowolni. Klonowanie ręczne, gdy prędkość jest absolutną koniecznością.

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

Uważaj przy użyciu JSON.parse(JSON.stringify(obj))metody na Dateobiektach - JSON.stringify(new Date())zwraca ciąg znaków reprezentujący datę w formacie ISO, który JSON.parse() nie jest konwertowany z powrotem na Dateobiekt. Zobacz tę odpowiedź, aby uzyskać więcej informacji .

Dodatkowo pamiętaj, że przynajmniej w Chrome 65 natywne klonowanie nie jest dobrym rozwiązaniem. Według JSPerf, natywne klonowanie poprzez utworzenie nowej funkcji jest prawie 800 razy wolniejsze niż użycie JSON.stringify, który jest niesamowicie szybki na całej planszy.

Aktualizacja dla ES6

Jeśli używasz Javascript ES6, wypróbuj tę natywną metodę klonowania lub płytkiej kopii.

Object.assign({}, obj);

Zakładając, że masz tylko zmienne, a nie jakieś funkcje w swoim obiekcie, możesz po prostu użyć:

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

Klonowanie strukturalne

Standard HTML zawiera wewnętrzny strukturalny algorytm klonowania / serializacji, który może tworzyć głębokie klony obiektów. Nadal jest ograniczony do niektórych wbudowanych typów, ale oprócz kilku typów obsługiwanych przez JSON obsługuje także Daty, RegExps, Mapy, Zestawy, Obiekty Blob, Listy plików, ImageDatas, Rzadkie Tablice, Tablice Typowane i prawdopodobnie więcej w przyszłości . Zachowuje również odwołania w sklonowanych danych, umożliwiając obsługę struktur cyklicznych i rekurencyjnych, które powodowałyby błędy dla JSON.

Wsparcie w Node.js: Experimental 🙂

v8Moduł w node.js obecnie (od węzła 11) naraża strukturze serializacji API bezpośrednio , ale ta funkcjonalność jest nadal oznaczone jako „eksperymentalne”, i mogą ulec zmianie lub usunięciu w przyszłych wersjach. Jeśli używasz kompatybilnej wersji, klonowanie obiektu jest tak proste, jak:

const v8 = require('v8');

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

Bezpośrednie wsparcie w przeglądarkach: może ostatecznie? 😐

Przeglądarki nie zapewniają obecnie bezpośredniego interfejsu dla strukturalnego algorytmu klonowania, ale structuredClone()funkcja globalna została omówiona w whatwg / html # 793 na GitHub . Zgodnie z obecnie proponowanym użyciem do większości celów byłoby tak proste, jak:

const clone = structuredClone(original);

Jeśli nie zostanie to dostarczone, strukturyzowane implementacje klonów przeglądarki są ujawniane tylko pośrednio.

Obejście asynchroniczne: możliwe do użycia. 😕

Niższym sposobem na utworzenie strukturalnego klonu z istniejącymi interfejsami API jest opublikowanie danych przez jeden port MessageChannels . Drugi port wyemituje messagezdarzenie ze strukturalnym klonem dołączonego .data. Niestety nasłuchiwanie tych zdarzeń jest z konieczności asynchroniczne, a synchroniczne alternatywy są mniej praktyczne.

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);

Przykład użycia:

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();

Obejścia synchroniczne: Okropne! 🤢

Nie ma dobrych opcji synchronicznego tworzenia uporządkowanych klonów. Oto kilka niepraktycznych hacków.

history.pushState()i history.replaceState()oba tworzą ustrukturyzowany klon pierwszego argumentu i przypisują tę wartość do history.state. Możesz użyć tego do utworzenia strukturalnego klonu dowolnego obiektu takiego jak ten:

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

Przykład użycia:

'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();

Chociaż synchroniczny, może być bardzo wolny. Powoduje to narzut związany z manipulowaniem historią przeglądarki. Wielokrotne wywoływanie tej metody może spowodować, że Chrome przestanie odpowiadać.

NotificationKonstruktor tworzy strukturze klon związanych z nią danych. Próbuje również wyświetlić użytkownikowi powiadomienie z przeglądarki, ale po cichu zakończy się niepowodzeniem, chyba że użytkownik poprosi o pozwolenie na powiadomienie. Jeśli masz pozwolenie na inne cele, natychmiast zamkniemy utworzone przez nas powiadomienie.

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

Przykład użycia:

'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();

Jeśli nie było żadnego wbudowanego, możesz spróbować:

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

Wydajny sposób klonowania (nie głębokiego klonowania) obiektu w jednym wierszu kodu

Object.assignMetoda jest częścią standardu (2015) ES6 ECMAScript i robi dokładnie to, czego potrzebujesz.

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

Metoda Object.assign () służy do kopiowania wartości wszystkich możliwych do wyliczenia własnych właściwości z jednego lub więcej obiektów źródłowych do obiektu docelowego.

Czytaj więcej...

Polyfill do obsługi starszych przeglądarek:

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;
    }
  });
}

Kod:

// 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;
}

Test:

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);

Tego używam:

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

Głębokie kopiowanie według wydajności: od najlepszej do najgorszej

• Ponowne przypisanie "=" (tablice ciągów, tablice liczb - tylko)
• Plaster (tablice ciągów, tablice liczb - tylko)
• Łączenie (tablice ciągów, tablice liczb - tylko)
• Funkcja niestandardowa: kopiowanie w pętli lub rekurencyjne
• jQuery's $ .extend
• JSON.parse (tablice łańcuchowe, tablice liczb, tablice obiektowe - tylko)
• Underscore.js 's ..clone (tablice ciągów, tablice liczb - tylko)
• Lo-Dash's _.cloneDeep

Głęboko skopiuj tablicę ciągów lub liczb (jeden poziom - bez wskaźników odniesienia):

Gdy tablica zawiera liczby i łańcuchy - funkcje takie jak .slice (), .concat (), .splice (), operator przypisania „=” i funkcja klonowania Underscore.js; utworzy głęboką kopię elementów tablicy.

Jeśli zmiana przypisania ma najszybszą wydajność:

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

A .slice () ma lepszą wydajność niż .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

Głęboko skopiuj tablicę obiektów (dwa lub więcej poziomów - wskaźniki odniesienia):

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

Napisz niestandardową funkcję (ma wyższą wydajność niż $ .extend () lub 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);

Użyj funkcji narzędziowych innych firm:

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

Tam, gdzie $ .extend jQuery ma lepszą wydajność:

• 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});

Głębokie kopiowanie obiektów w JavaScript (myślę, że najlepsze i najprostsze)

1. Korzystanie z JSON.parse (JSON.stringify (obiekt));

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.Zastosowanie utworzonej metody

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. Korzystanie z linku _.cloneDeep 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. Korzystanie z metody Object.assign ()

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 }  

ALE ŹLE KIEDY

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.Korzystanie z 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 }  

ALE ŹLE KIEDY

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

Istnieje biblioteka (zwana „klon”) , która robi to całkiem dobrze. Zapewnia najbardziej kompletne rekurencyjne klonowanie / kopiowanie dowolnych obiektów, jakie znam. Obsługuje również odwołania cykliczne, które nie są jeszcze objęte innymi odpowiedziami.

Możesz znaleźć na npm . Może być używany zarówno w przeglądarce, jak i Node.js.

Oto przykład, jak go używać:

Zainstaluj za pomocą

npm install clone

lub zapakuj go w Endera .

ender build clone [...]

Możesz także pobrać kod źródłowy ręcznie.

Następnie możesz użyć go w kodzie źródłowym.

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

(Uwaga: Jestem autorem biblioteki).

Cloning obiekt zawsze był przedmiotem zainteresowania w JS, ale o to chodziło przed ES6, poniżej wymieniam różne sposoby kopiowania obiektu w JavaScript, wyobraź sobie, że masz obiekt poniżej i chciałbyś mieć jego głęboką kopię:

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

Istnieje kilka sposobów skopiowania tego obiektu bez zmiany źródła:

1) ES5 +, korzystając z prostej funkcji, aby wykonać kopię za Ciebie:

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 +, używając JSON.parse i 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) UnderscoreJs & Loadash:

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

Mam nadzieję, że te pomoc ...

Wiem, że to stary post, ale pomyślałem, że może to pomóc następnej osobie, która się potyka.

Tak długo, jak nie przypisujesz obiektu do czegokolwiek, nie zachowuje on żadnych odniesień w pamięci. Aby stworzyć obiekt, który chcesz udostępnić innym obiektom, musisz utworzyć fabrykę w następujący sposób:

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

Jeśli go używasz, biblioteka Underscore.js ma metodę klonowania .

var newObject = _.clone(oldObject);

Oto wersja powyższej odpowiedzi ConroyP, która działa, nawet jeśli konstruktor ma wymagane parametry:

//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;
}

Ta funkcja jest również dostępna w moim bibliotece simpleoo .

Edytować:

Oto bardziej niezawodna wersja (dzięki Justinowi McCandlessowi obsługuje teraz także cykliczne odwołania):

/**
 * 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();
    };
}

Poniższe tworzy dwa wystąpienia tego samego obiektu. Znalazłem i używam go obecnie. Jest prosty i łatwy w użyciu.

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

Crockford sugeruje (i wolę) użycie tej funkcji:

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

var newObject = object(oldObject);

Jest zwięzły, działa zgodnie z oczekiwaniami i nie potrzebujesz biblioteki.

EDYTOWAĆ:

Jest to polifill dla Object.create, więc możesz również z niego korzystać.

var newObject = Object.create(oldObject);

UWAGA: W przypadku korzystania z niektórych z tych funkcji mogą wystąpić problemy z korzystaniem z iteracji hasOwnProperty. Ponieważ createutwórz nowy pusty obiekt, który będzie dziedziczyłoldObject . Ale nadal jest przydatny i praktyczny do klonowania obiektów.

Na przykład jeśli oldObject.a = 5;

newObject.a; // is 5

ale:

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

Lodash ma niezłą metodę _.cloneDeep (wartość) :

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

Płytka kopia w jednym wierszu ( ECMAScript 5. edycja ):

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

I płytka kopia jednowarstwowa ( ECMAScript 6 edycja , 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

Tylko dlatego, że nie widziałem o AngularJS i pomyślałem, że ludzie mogą chcieć wiedzieć ...

angular.copy zapewnia również metodę głębokiego kopiowania obiektów i tablic.

Wydaje się, że nie ma jeszcze idealnego operatora głębokiego klonowania dla obiektów podobnych do tablicy. Jak ilustruje poniższy kod, kloner jQuery Johna Resiga przekształca tablice o właściwościach nienumerycznych w obiekty, które nie są tablicami, a kloner JSON firmy RegDwight upuszcza właściwości nienumeryczne. Poniższe testy ilustrują te punkty w wielu przeglądarkach:

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)

Mam dwie dobre odpowiedzi w zależności od tego, czy Twoim celem jest sklonowanie „zwykłego, starego obiektu JavaScript”, czy nie.

Załóżmy również, że Twoim celem jest utworzenie pełnego klonu bez odwołań do prototypu z powrotem do obiektu źródłowego. Jeśli nie jesteś zainteresowany pełnym klonowaniem, możesz użyć wielu procedur Object.clone () podanych w niektórych innych odpowiedziach (wzór Crockforda).

W przypadku zwykłych starych obiektów JavaScript wypróbowany i naprawdę dobry sposób klonowania obiektu we współczesnych środowiskach wykonawczych jest po prostu:

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

Zauważ, że obiekt źródłowy musi być czystym obiektem JSON. Oznacza to, że wszystkie jego zagnieżdżone właściwości muszą być skalarami (takimi jak logiczna, łańcuch, tablica, obiekt itp.). Żadne funkcje ani obiekty specjalne, takie jak RegExp lub Date, nie będą klonowane.

Czy to jest wydajne? Pewnie, ze tak. Wypróbowaliśmy wszystkie metody klonowania i to działa najlepiej. Jestem pewien, że jakiś ninja wyczaruje szybszą metodę. Ale podejrzewam, że mówimy o marginalnych zyskach.

To podejście jest po prostu proste i łatwe do wdrożenia. Zapakuj go w wygodną funkcję, a jeśli naprawdę chcesz wycisnąć trochę korzyści, idź później.

Teraz w przypadku nieprzezroczystych obiektów JavaScript nie ma naprawdę prostej odpowiedzi. W rzeczywistości nie może być tak z powodu dynamicznej natury funkcji JavaScript i wewnętrznego stanu obiektu. Głębokie klonowanie struktury JSON z funkcjami wewnątrz wymaga odtworzenia tych funkcji i ich wewnętrznego kontekstu. A JavaScript po prostu nie ma znormalizowanego sposobu na zrobienie tego.

Prawidłowy sposób, aby to zrobić, jeszcze raz, polega na wygodnej metodzie, którą deklarujesz i używasz ponownie w swoim kodzie. Metodę wygody można wyposażyć w pewne zrozumienie własnych obiektów, aby zapewnić prawidłowe odtworzenie wykresu w nowym obiekcie.

Napisaliśmy własne, ale najlepsze ogólne podejście, jakie widziałem, jest tutaj:

http://davidwalsh.name/javascript-clone

To jest właściwy pomysł. Autor (David Walsh) skomentował klonowanie funkcji uogólnionych. Jest to coś, co możesz zrobić, w zależności od przypadku użycia.

Główną ideą jest to, że musisz specjalnie obsługiwać tworzenie instancji swoich funkcji (lub klas prototypowych, że tak powiem) dla poszczególnych typów. Tutaj podał kilka przykładów RegExp i Date.

Ten kod jest nie tylko krótki, ale także bardzo czytelny. Jest dość łatwy do rozszerzenia.

Czy to jest wydajne? Pewnie, ze tak. Biorąc pod uwagę, że celem jest stworzenie prawdziwego klonowania w głębokiej kopii, będziesz musiał przejść elementy wykresu obiektu źródłowego. Dzięki takiemu podejściu możesz dokładnie dostosować, które elementy podrzędne mają być traktowane i jak ręcznie obsługiwać typy niestandardowe.

Więc proszę bardzo. Dwa podejścia. Oba są moim zdaniem wydajne.

Nie jest to na ogół najbardziej wydajne rozwiązanie, ale robi to, czego potrzebuję. Proste przypadki testowe poniżej ...

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

Cykliczny test tablicowy ...

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

Test działania ...

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

AngularJS

Cóż, jeśli używasz kąta, możesz to zrobić

var newObject = angular.copy(oldObject);

Nie zgadzam się z odpowiedzią z największą liczbą głosów tutaj . Recursive Głębokie Clone jest znacznie szybsze niż JSON.parse (JSON.stringify (obj)) podejścia wymienione.

• Jsperf zajmuje tutaj pierwsze miejsce: https://jsperf.com/deep-copy-vs-json-stringify-json-parse/5
• Zaktualizowano odpowiedź Jsben z powyższej odpowiedzi, aby pokazać, że rekurencyjny głęboki klon pokonuje wszystkie pozostałe wymienione: http://jsben.ch/13YKQ

Oto funkcja szybkiego odniesienia:

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

Tylko wtedy, gdy możesz użyć ECMAScript 6 lub transpilatorów .

Funkcje:

• Nie uruchomi gettera / settera podczas kopiowania.
• Zachowuje gettera / setera.
• Zachowuje prototypowe informacje.
• Współpracuje z obu obiektowo dosłownych i funkcjonalnych OO stylów pisania.

Kod:

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

Oto kompleksowa metoda clone (), która może klonować dowolny obiekt JavaScript. Obsługuje prawie wszystkie przypadki:

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