it-swarm.com.ru

Javascript - Как клонировать объект?

Я сбит с толку. Я создаю копию из myObjOne, чем удаляю запись из myObjOne, а JS также удаляет запись из моей копии (myObjTwo)? Но почему?

  myObjOne = {};
  myObjOne['name'] = 'xxx';
  myObjOne['id'] = 'yyy';
  myObjOne['plz'] = 'zzz';  

  // clone
  myObjTwo = myObjOne;

  // remove something
  delete myObjOne['name'];

  console.dir(myObjTwo);

examplehttp://jsbin.com/itixes/edit#javascript,html

19
user970727

Обновление: удаление Object.create как метода клонирования, как указано в комментариях.

  myObjTwo = myObjOne;

не клонирует Это просто копирует ссылку. 

Если вы хотите клонировать, вы можете использовать JSON.parse и JSON.stringify

var x = {a:{b:{c:{'d':'e'}}}};
var y = JSON.parse(JSON.stringify(x));  //y is a clone of x
console.log(y.a.b.c.d); //prints e
console.log(y === x); //prints false

Warning: Как отметил Рейнос в комментариях, этот клон на основе JSON не сохраняет методы входного объекта в выходном объекте. Это решение достаточно хорошо, если ваш объект не содержит никаких методов. Методы - это свойства объекта, которые являются функциями. Если var obj = {add : function(a,b){return a+b;}}, то add является методом obj.

Если вам нужно решение, которое поддерживает копирование методов, просмотрите эти SO ответы (как указали Musefan, Matt и Ranhiru Cooray)

Я хотел бы предложить Как правильно клонировать объект JavaScript?

22
Narendra Yadala

Вы можете использовать jQuery так:

var myObjTwo = jQuery.extend(true, {}, myObjOne);

Первый аргумент указывает, что мы хотим сделать глубокую копию myObjOne.

16
Nicu Surdu

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

3
musefan

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

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

Некоторые могут распознать шаблон. Пример:

var base = {foo:'foo', bar:'bar'};
var baseClone = cloneOf(base);
alert(baseClone.foo);  // foo
2
RobG

Вы можете использовать Object.assign(), но помните о поддержке браузера.

Более подробная информация здесь: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign .

Пример:

myObjTwo = Object.assign({}, myObjOne);
1
Pablo

С ES6 используйте оператор распространения.

myObjTwo = {...myObjOne}

Оператор распространения в es6 - это просто многоточие. Он создает копию оригинала, даже если оригинал уничтожен.

0
Allan Mwesigwa

Просто.

var clone=function(o){
      var n= {}.toString.apply(o)=="[object Array]" ? []:{};
      for(i in o)
         n[i]= typeof o[i]=='object' ? clone(o[i]):o[i];
      return n;
 };

Использование:

var x={a:{d:34},b:33};
var y=clone(x);  // clones 'x'
0
Dinesh

Ваша строка myObjTwo = myObjOne не клонирует myObjOne, она просто создает дублирующую ссылку на тот же объект!

Фактический ответ - использовать функцию клонирования, возможно, из библиотеки, например underscore.js . Но на самом деле, похоже, у вас есть некоторое чтение и изучение концепции объектов и указателей в Javascript.

0
funkybro