无副作用地更改和分配对象答案

【问题标题】：Alter and Assign Object Without Side Effects无副作用地更改和分配对象
【发布时间】：2012-03-03 05:38:19
【问题描述】：

我目前有以下代码：

var myArray = [];
var myElement = {
  id: 0,
  value: 0
}

myElement.id = 0;
myElement.value = 1;
myArray[0] = myElement;

myElement.id = 2;
myElement.value = 3;
myArray[1] = myElement;

问题是，当我为第二个元素更改id 和value 的值时，第一个元素中的值也会发生变化。有没有一种方法可以在不改变数组中先前插入值的值的情况下继续添加新元素？

【问题讨论】：

标签： javascript

【解决方案1】：

试试这个：

var myArray = [];

myArray.push({ id: 0, value: 1 });
myArray.push({ id: 2, value: 3 });

或者这对你的情况不起作用？

【讨论】：

【解决方案2】：

这是constructor function 的教科书案例：

var myArray = [];

function myElement(id, value){
    this.id = id
    this.value = value
}

myArray[0] = new myElement(0,1)
myArray[1] = new myElement(2,3)
// or myArray.push(new myElement(1, 1))

【讨论】：

我已经实现了另一个答案，但我同意这也是一个很好的解决方案。谢谢

【解决方案3】：

您要么需要继续创建新对象，要么克隆现有对象。克隆方法见What is the most efficient way to deep clone an object in JavaScript?。

【讨论】：

【解决方案4】：

这是因为对象值是通过引用传递的。您可以像这样克隆对象：

var myArray = [];
var myElement = {
  id: 0,
  value: 0
}

myElement.id =0;
myElement.value=1;
myArray[0] = myElement;

var obj = {};
obj = clone(myElement);
obj.id = 2;
obj.value = 3; 

myArray[1] = obj;

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

console.log(myArray[0]);
console.log(myArray[1]);

结果：

 - id: 0
 - value: 1
 - id: 2
 - value: 3

【讨论】：

【解决方案5】：

如果你使用 jQuery，你可以使用extend

myElement.id =0;
myElement.value=1;
myArray[0] = $.extend({}, myElement);

myElement.id = 2;
myElement.value = 3;
myArray[1] = $.extend({}, myElement);

【讨论】：

【解决方案6】：

对象是通过引用传递的。要创建一个 new 对象，我遵循这种方法..

//Template code for object creation.
function myElement(id, value) {
    this.id = id;
    this.value = value;
}
var myArray = [];

//instantiate myEle
var myEle = new myElement(0, 0);
//store myEle
myArray[0] = myEle;

//Now create a new object & store it
myEle = new myElement(0, 1);
myArray[1] = myEle;

【讨论】：

【解决方案7】：

您的数组中将有两次相同的对象，因为对象值是通过引用传递的。你必须像这样创建一个新对象

myElement.id = 244;
myElement.value = 3556;
myArray[0] = $.extend({}, myElement); //for shallow copy or
myArray[0] = $.extend(true, {}, myElement); // for deep copy

或

myArray.push({ id: 24, value: 246 });

【讨论】：