Изменение и назначение объекта без побочных эффектов

В настоящее время у меня есть следующий код:

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 для моего второго элемента, значения также изменяются в первом элементе. Есть ли способ, которым я могу продолжать добавлять новые элементы без изменения значения ранее вставленных значений в массиве?

Ответ 1

Попробуйте это вместо этого:

var myArray = [];

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

или это не сработает для вашей ситуации?

Ответ 2

Это случай учебника для функции-конструктора:

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

Вам нужно либо создавать новые объекты, либо клонировать существующие. См. Что такое наиболее эффективный способ глубокого клонирования объекта в 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, вы можете использовать расширение

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

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

Ответ 6

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

//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, значение: 246});