Jeśli nie używasz Dates, funkcji, niezdefiniowanej, regExp lub Infinity w swoim obiekcie, bardzo prosta jedna linijka to 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()

Działa to dla wszelkiego rodzaju obiektów zawierających obiekty, tablice, ciągi znaków, wartości logiczne i liczby.

Zobacz także ten artykuł na temat uporządkowanego algorytmu klonowania przeglądarek, który jest używany podczas wysyłania wiadomości do i od pracownika. Zawiera także funkcję głębokiego klonowania.

Dzięki jQuery możesz płytko kopiować z rozszerzeniem :

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

kolejne zmiany copiedObjectnie będą miały wpływu na originalObjecti odwrotnie.

Lub zrobić głęboką kopię :

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

W ECMAScript 6 istnieje metoda Object.assign , która kopiuje wartości wszystkich wyliczalnych własnych właściwości z jednego obiektu do drugiego. Na przykład:

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

Należy jednak pamiętać, że zagnieżdżone obiekty są nadal kopiowane jako odniesienie.

Według MDN :

• Jeśli chcesz płytkiej kopii, użyj Object.assign({}, a)
• Do kopiowania „głębokiego” użyj JSON.parse(JSON.stringify(a))

Biblioteki zewnętrzne nie są potrzebne, ale najpierw należy sprawdzić zgodność przeglądarki .

Istnieje wiele odpowiedzi, ale żadna nie wspomina o Object.create z ECMAScript 5, który wprawdzie nie daje dokładnej kopii, ale ustawia źródło jako prototyp nowego obiektu.

Dlatego nie jest to dokładna odpowiedź na pytanie, ale jest to rozwiązanie jednorzędowe, a zatem eleganckie. I działa najlepiej w 2 przypadkach:

1. Gdzie takie dziedzictwo jest przydatne (duh!)
2. Tam, gdzie obiekt źródłowy nie zostanie zmodyfikowany, dzięki czemu relacja między dwoma obiektami nie będzie problemem.

Przykład:

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

Dlaczego uważam to rozwiązanie za lepsze? Jest natywny, więc nie ma pętli, nie ma rekurencji. Jednak starsze przeglądarki będą wymagały wypełniania.

Elegancki sposób klonowania obiektu JavaScript 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;
    }
  });
}

Istnieje wiele problemów z większością rozwiązań w Internecie. Postanowiłem więc podjąć dalsze działania, w tym wyjaśnić, dlaczego zaakceptowana odpowiedź nie powinna zostać zaakceptowana.

sytuacja początkowa

Chcę głęboko skopiować Javascript Objectze wszystkimi jego dziećmi i ich dziećmi i tak dalej. Ale ponieważ nie jestem normalnym programistą, mój Objectma normalny properties , circular structuresa nawetnested objects .

Stwórzmy więc circular structurea a nested objectfirst.

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

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

Połączmy wszystko w jednym Objectnazwanym a.

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

Następnie chcemy skopiować ado zmiennej o nazwie bi zmutować ją.

var b = a;

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

Wiesz, co się tutaj wydarzyło, bo jeśli nie, nie trafiłbyś nawet na to wspaniałe pytanie.

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

Teraz znajdźmy rozwiązanie.

JSON

Pierwszą próbą, której próbowałem, było użycie JSON.

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

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

Nie marnuj na to zbyt wiele czasu, dostaniesz TypeError: Converting circular structure to JSON .

Kopiowanie rekurencyjne (zaakceptowana „odpowiedź”)

Rzućmy okiem na przyjętą odpowiedź.

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

Wygląda dobrze, heh? Jest to rekurencyjna kopia obiektu i obsługuje również inne typy Date, ale nie było to wymagane.

var b = cloneSO(a);

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

Rekurencja i circular structuresnie działa dobrze razem ...RangeError: Maximum call stack size exceeded

natywne rozwiązanie

Po kłótni z moim współpracownikiem mój szef zapytał nas, co się stało, a po pewnym czasie google znalazł proste rozwiązanie . To się nazywa Object.create.

var b = Object.create(a);

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

To rozwiązanie zostało dodane do Javascript jakiś czas temu, a nawet obsługuje 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"
    }
}

... i widzisz, to nie działało z zagnieżdżoną strukturą wewnątrz.

polyfill do natywnego rozwiązania

W Object.createstarszej przeglądarce, podobnie jak IE 8., znajduje się polifill . Jest to coś takiego, jak zalecane przez Mozillę i oczywiście nie jest idealne i powoduje ten sam problem co rozwiązanie natywne .

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

var b = clonePF(a);

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

Wyłączyłem Fzakres, abyśmy mogli zobaczyć, co instanceofnam mówi.

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

Ten sam problem co rozwiązanie natywne , ale nieco gorszy wynik.

lepsze (ale nie idealne) rozwiązanie

Podczas kopania znalazłem podobne pytanie (w JavaScript, kiedy wykonuję głęboką kopię, jak mogę uniknąć cyklu, ponieważ właściwość jest „tym”? ) Do tego, ale ze znacznie lepszym rozwiązaniem.

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

I spójrzmy na wynik ...

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

Wymagania są dopasowane, ale nadal istnieją pewne kwestie, w tym mniejsze zmieniając instanceod nestedi circdo Object.

Struktura drzew dzielących liść nie zostanie skopiowana, staną się dwoma niezależnymi liśćmi:

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

wniosek

Ostatnie rozwiązanie wykorzystujące rekurencję i pamięć podręczną może nie być najlepsze, ale jest to prawdziwa głęboka kopia obiektu. Zajmuje proste properties, circular structuresa nested object, ale to będzie bałagan instancji z nich podczas klonowania.

jsfiddle

Jeśli nie masz problemu z płytką kopią, biblioteka underscore.js ma metodę klonowania .

y = _.clone(x);

lub możesz to przedłużyć

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

OK, wyobraź sobie, że masz ten obiekt poniżej i chcesz go sklonować:

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

lub

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

odpowiedź zależy głównie od używanego skryptu ECMA , w ES6+którym można po prostu użyć Object.assigndo wykonania klonowania:

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

lub za pomocą operatora spreadu w następujący sposób:

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

Ale jeśli używasz ES5, możesz użyć kilku metod, ale JSON.stringifyupewnij się, że nie używasz dużej części danych do skopiowania, ale w wielu przypadkach może to być jeden wiersz przydatny, coś takiego:

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

Jednym szczególnie nieelegacyjnym rozwiązaniem jest użycie kodowania JSON do tworzenia głębokich kopii obiektów, które nie mają metod składowych. Metodologia polega na kodowaniu JSON obiektu docelowego, a następnie poprzez dekodowanie otrzymujesz kopię, której szukasz. Możesz dekodować tyle razy, ile chcesz, aby wykonać tyle kopii, ile potrzebujesz.

Oczywiście funkcje nie należą do JSON, więc działa to tylko dla obiektów bez metod składowych.

Ta metodologia była idealna dla mojego przypadku użycia, ponieważ przechowuję obiekty BLS JSON w magazynie kluczy i wartości, a gdy są one ujawniane jako obiekty w JavaScript API, każdy obiekt faktycznie zawiera kopię oryginalnego stanu obiektu, więc może obliczyć deltę po tym, jak osoba wywołująca zmutuje odsłonięty obiekt.

var object1 = {key:"value"};
var object2 = object1;

object2 = JSON.stringify(object1);
object2 = JSON.parse(object2);

object2.key = "a change";
console.log(object1);// returns value

Możesz po prostu użyć właściwości spread do skopiowania obiektu bez odwołań. Ale bądź ostrożny (patrz komentarze), „kopia” jest tylko na najniższym poziomie obiektu / tablicy. Zagnieżdżone właściwości są nadal referencjami!

Kompletny klon:

let x = {a: 'value1'}
let x2 = {...x}

// => mutate without references:

x2.a = 'value2'
console.log(x.a)    // => 'value1'

Klonuj z referencjami na drugim poziomie:

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 faktycznie nie obsługuje natywnie głębokich klonów. Użyj funkcji narzędzia. Na przykład Ramda:

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

Dla osób korzystających z AngularJS istnieje również bezpośrednia metoda klonowania lub rozszerzania obiektów w tej bibliotece.

var destination = angular.copy(source);

lub

angular.copy(source, destination);

Więcej w dokumentacji angular.copy ...

Oto funkcja, której możesz użyć.

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

Odpowiedź A.Levy jest prawie kompletna, oto mój mały wkład: istnieje sposób, w jaki sposób obsługiwać rekurencyjne referencje , zobacz ten wiersz

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

Jeśli obiektem jest element XML DOM, musimy zamiast tego użyć cloneNode

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

Zainspirowany wyczerpującymi badaniami A.Levy'ego i podejściem do prototypowania Calvina, oferuję to rozwiązanie:

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

Zobacz także notatkę Andy'ego Burke'a w odpowiedziach.

Z tego artykułu: Jak skopiować tablice i obiekty w JavaScript autorstwa Briana Huismana:

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

W ES-6 możesz po prostu użyć Object.assign (...). Dawny:

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

Dobry odnośnik znajduje się tutaj: https://googlechrome.github.io/samples/object-assign-es6/

W ECMAScript 2018

let objClone = { ...obj };

Pamiętaj, że zagnieżdżone obiekty są nadal kopiowane jako odniesienie.

Korzystanie z Lodash:

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

Zainteresowany klonowaniem prostych obiektów:

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

Źródło: Jak skopiować obiekt JavaScript do nowej zmiennej NOT przez odniesienie?

Możesz sklonować obiekt i usunąć dowolne odniesienie z poprzedniego, używając jednego wiersza kodu. Po prostu wykonaj:

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

W przeglądarkach / silnikach, które obecnie nie obsługują Object.create, możesz użyć tego wypełniania:

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

Nowa odpowiedź na stare pytanie! Jeśli masz przyjemność korzystać z ECMAScript 2016 (ES6) z Spread Syntax , jest to łatwe.

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

Zapewnia to czystą metodę płytkiej kopii obiektu. Wykonywanie głębokiej kopii, co oznacza tworzenie nowej kopii każdej wartości w każdym rekurencyjnie zagnieżdżonym obiekcie, wymaga jednego z cięższych rozwiązań powyżej.

JavaScript ewoluuje.