2

подскажите как правильно сделать копию объекта которую я смогу изменять и в то же время эти изменения не будут касаться оригинала? Вот для примера, я использую объект:

var original = {someNumber : 1,
         someZero : 0,
         oPets : {tishka : 1,
                  sharik : 1}
         }
var copy = original; // делаю копию (и как я подозреваю делаю связку их друг с другом)
copy.oPets.sharik = "doggy";
// copy.oPets.sharik === "doggy" // true
// original.oPets.sharik === "doggy" // true
5
  • ошибка в том, что при присваивании копия объекта не делается
    – Grundy
    30 июн 2016 в 10:49
  • @Grundy но ведь присваиваю я же не оригиналу, а копии которая была уже до этого создана
    – YoroDiallo
    30 июн 2016 в 10:50
  • неа, вы не правы
    – Grundy
    30 июн 2016 в 10:58
  • @Grundy я уже понял)
    – YoroDiallo
    30 июн 2016 в 10:59
  • @Grundy я уже вижу что вариантов море просто, и джиквери и джейсон.парс и др.. не думал что на чистом джс нету решения в 1 клик) работаю сейчас с ангуляром поэтому angular.copy() сейчас отлично помог в решении
    – YoroDiallo
    30 июн 2016 в 11:05

3 ответа 3

13

Для начала стоит отметить, что все объекты в JS присваиваются и предаются по ссылке. Это значит, что делая:

var copy = original;

вы на самом деле помещаете ссылку на original в переменную copy.

В зависимости от дополнительных условий, существует несколько вариантов решения клонирования объектов в JavaScript.

  1. Если вам нужна поверхностная копия (один уровень вложенности) объекта, можно использовать ES6 Object.assign:

    var copy = Object.assign({}, original);
    
  2. Если вы не планируете использовать конструкции, вроде for in и Object.prototype.hasOwnProperty на копии, можно задать оригинал как прототип копии. Делается это вот так:

    var copy = Object.create(original);
    

    К сожалению, этот метод тоже создает только поверхностную копию объекта, но позволяет сэкономить немного памяти на свойствах, которые не будут переопределены.

  3. Если ваш исходный объект может быть безболезненно сериализован в JSON (не содержит функций, сложных объектов, вроде Date и циклических ссылок), то можно использовать хак с сериализацией-десериализацией:

    var copy = JSON.parse(JSON.stringify(original));
    
  4. Если использование сторонних библиотек допустимо, то можно использовать существующие реализации глубокого копирования. В lodash, например, есть метод _.cloneDeep:

    var copy = _.cloneDeep(original);
    

    Похожие методы есть во многих библиотеках. Например в jQuery есть метод jQuery.extend:

    // Первый аргумент указывает на глубину копирования
    var copy = jQuery.extend(true, {}, original);
    

    Вам стоит проверить документацию к используемым библиотекам, возможно там есть свой метод для глубокого копирования.

  5. Если ни один из методов выше не подошел, вам придется реализовать свой собственный вариант функции глубокого копирования. Как сделать это эффективно лучше посмотреть в исходниках одной из существующих библиотек глубокого копирования.

6
  • как 6 вариант хотел бы еще добавить angular.copy(), для тех кто работает с ангуляром
    – YoroDiallo
    30 июн 2016 в 11:06
  • @YoroDiallo, это входит в 4 пункт - использование сторонних библиотек
    – Grundy
    30 июн 2016 в 11:06
  • @YoroDiallo, это, по-сути, вариант 4. Перечислять все известные методы клонирования из всех известных библиотек - это совсем жесть =) 30 июн 2016 в 11:07
  • согласен) туплю
    – YoroDiallo
    30 июн 2016 в 11:07
  • К сожалению, этот метод тоже создает только поверхностную копию объекта, но позволяет сэкономить немного памяти на свойствах, которые не будут переопределены - это к JSON.parse/JSON.stringify относится? он же как раз полную копию делает, а не только первого уровня
    – Grundy
    30 июн 2016 в 11:08
1

Если используется jQuery

var original = {a:1, b:{c:3}}
var cloned = {};
jQuery.extend(true, cloned, original);
cloned.b.c = 10;
console.log(original);

Если нет - смотрим на популярные статьи на буржуйском SO https://stackoverflow.com/questions/728360/how-do-i-correctly-clone-a-javascript-object

2
  • 1
    спасибо за ссылку!! а по jq вроде ж ".clone() method in jQuery only clones DOM elements"
    – YoroDiallo
    30 июн 2016 в 10:56
  • точно, спасибо за указания ошибки. Сейчас поправлю пост 30 июн 2016 в 11:08
0
var original = {
    someNumber : 1,
    someZero : 0,
    oPets: {tishka: 1, sharik: 1}
}

var copy = JSON.parse(JSON.stringify(original));

copy.oPets.sharik = "doggy";

console.log(original.oPets.sharik); // 1
console.log(copy.oPets.sharik); // doggy
15
  • Переводим объект в json строку и парсим
    – Doofy
    30 июн 2016 в 11:04
  • Этот комментарий лучше в ответ добавить
    – Grundy
    30 июн 2016 в 11:05
  • 1
    Не будет работать, если объект содержит поле-функцию или объект Date или циклическую ссылку 30 июн 2016 в 11:06
  • @DmitriySimushev, f: function() { ... } ?
    – Doofy
    30 июн 2016 в 11:09
  • @Doofy, JSON.stringify({t:function(){}}) -> "{}"
    – Grundy
    30 июн 2016 в 11:10

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.