Как копировать объект в JavaScript?

Question

[keslo]

Добрый вечер, господа.
Всем известно, что в JS объект передается по ссылке, а не по значению. Подскажите, какие есть варианты для копирование объекта?

Answer 1

[sanex3339]

var cloneOfA = JSON.parse(JSON.stringify(a));
или

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

Почему я должен гуглить за вас?

Тут еще
stackoverflow.com/questions/728360/most-elegant-wa...

Comments

[keslo]

Видел такой вариант а Google. Но по мне он "костыльный". Поделитесь опытом, может есть другие варианты?

[sanex3339]

Просто небольшую обертку сделайте и спите спокойно.

function clone (object) {
return JSON.parse(JSON.stringify(object));
}

var newObject = clone(object);

[keslo]

sanex3339: да, тоже встречал такой подход. Мне кажется я видел какое-то "красивое" решение. Но возможно путаю с копированием массива...

[Максим]

Самое адекватное решение и универсальное это JSON.

Answer 2

[Виталий Инчин ☢]

Object.clone = function clone(o, copyProto, copyNested){
   function Create(i){
        for(i in o){
          if(o.hasOwnProperty(i)) this[i] = ( copyNested && typeof o[i] == "object" ) 
             ? clone(o[i], true, true) : o[i];
        }
   }
   if(copyProto && "__proto__" in o) Create.prototype = o.__proto__; //IE затупит
   return new Create();
}

//o - Целевой объект
//copyProto - будет ли скопирован прототип объекта
//copyNested - будут ли клонированы объекты, вложенные в текущий или сохранятся в виде ссылок

var target = {
  "A" : {
       "Z" : 1,
       "X" : 2,
       "Y" : {
          "F" : 3,
          "G" : 4
       }
  }
};

target.__proto__.f = function(){};

var clone1 = Object.clone(target, false, true);
clone1.f //undefined
clone1.A == target.A //false

var clone2 = Object.clone(target, true);
clone2.f //function
clone2.A == target.A //true

Comments

[keslo]

Спасибо. Можете прокомментировать работу кода?

[keslo]

Возможно так должно быть? Или я не прав?

function Create(o) {
    for (var i in o) {
        ...
    }
}

[Виталий Инчин ☢]

keslo: скажите, что именно не понятно - я отвечу.

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

[Виталий Инчин ☢]

keslo: логически верно так и должно быть, но я немного сократил код по кол-ву символов. Переменная o и так находится в области видимости конструктора, нет смысла ее передавать.

[keslo]

Виталий Инчин ☢: но почему в функцию конструктор Create вы передаете "i" в качестве параметра? Выходит в конструктор можно ничего не передавать в данном случае?

function Create() {
    for (var i in o) {
        ...
    }
}

И расскажите что делает код:
"__proto__" in o

[Виталий Инчин ☢]

keslo: фишка именно в том, что я не Передаю ее, а только объявляю. Но делаю я это не с помощью ключевого слова var, а с помощью аргуметов.

> И расскажите что делает код:

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

[keslo]

Виталий Инчин ☢: объявление переменной действительно фишка! )

> код

Строка copyProto && "__proto__" in o:
- copyProto при вызове clone необходимо передать, например, в значение true, чтобы скопировать прототип
- "__proto__" in o вернет при IE true
- и тогда мы скопируем ссылку на прототип на клонированный объект.

Так я понял?

[Виталий Инчин ☢]

keslo: верно

[keslo]

Виталий Инчин ☢: ... но если условие в if не выполнится, то мы не получим прототип? Или ссылка на него скопируется неявно автоматически?

[Виталий Инчин ☢]

keslo: не получим, будет стандартный экземпляр Object

[keslo]

Виталий Инчин ☢: Все. Спасибо! Понял)

[keslo]

Виталий Инчин ☢: еще раз спасибо

[Виталий Инчин ☢]

keslo: было бы здорово отметить что-нибудь решением!

[keslo]

Виталий Инчин ☢: именно!

Answer 3

[mikhailrojo]

Через Object.assign()

const old = {mi: 1, ti: 2} // копируемый объект
const new = Object.asign({}, old);// присваиваем пустому объекту свойства old
new ! == old;// true

Comments

[Ilya-Karev]

Вот лучший ответ!

[anxieter]

только 2 буквы 'S' в примере :- ))

[DmitryBB]

Подниму тему. Ответ хороший, НО учитывайте, что объект может содержать другие объекты или массивы. Простые поля копируются без проблем, а вот скажем массивы как им и положено копируются по ссылке. Так что если объект сложный. лучше пользоваться рекурсивным обходом полей объекта, как vit134.

Answer 4

[vit134]

а как Вам такой вариант? не уверен что он покрывает все возможные варианты, но объект копирует без сохранения ссылки

const deepClone = (obj) => {
    let clone = {};
    for (let prop in obj) {
        if (typeof obj[prop] === 'object') {
            clone[prop] = deepClone(obj[prop]);
        } else {
            clone[prop] = obj[prop];
        }
    }

    return clone;
}

Comments

[marsdenden]

Просто и легко. При небольшой адаптации очень помогло при копировани объектов с сохранением реактивности в Vue.JS.