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

IT技术 javascript
2021-03-05 19:41:32

我目前有以下代码:

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;

问题是,当我改变的valueid,并value为我的第二个元素,值也在第一元素来改变。有没有一种方法可以在不更改数组中先前插入的值的情况下继续添加新元素?

6个回答

试试这个:

var myArray = [];

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

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

这是构造函数的教科书案例

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))
我已经实施了另一个答案,但我同意这也是一个很好的解决方案。谢谢
2021-04-21 19:41:32

您要么需要继续创建新对象,要么克隆现有对象。请参阅在 JavaScript 中深度克隆对象的最有效方法是什么?关于如何克隆。

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

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

如果您使用 jQuery,则可以使用扩展

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

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