Angular / машинопись, некоторые проблемы с переменной

Question

есть моя проблема:

У меня есть функция, которая добавляет элемент в массив (A), добавляемый элемент получается из аргумента. Затем, когда я изменяю этот элемент в массиве (A), он также изменяет элемент, который я использовал в качестве аргумента.

это выглядит так:

addTemplates(nTemplate){
    let k = nTemplate;
    k.id=this.templates.length+1;
    this.templates.push(k);
    this.emitTemplateSubject();
  }
  
  //when I use the function:
  
  let aObject={id:1, sth:"aa", sthE:"bb"}
  addTemplate(aObject);
  
  
  //then  aObject.id is also change.

Это, вероятно, нормально, но как мне избежать применения изменения к 'aObject'?

Answer 1

Вы должны создать копию своего объекта и затем отправить ее в функцию

let newObject = Object.assign({}, aObject);
addTemplate(newObject );

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

Answer 2

С this.templates.push(k); вы добавляете ссылку, а не копию, от k до templates.Следовательно, когда вы изменяете свойства ссылки в массиве, вы изменяете тот же объект, что и при непосредственном изменении k.

Простой пример, показывающий разницу между ссылкой и копией (в данном случаеЯ создаю копию, используя JSON.parse (JSON.stringify (...)), который я бы не рекомендовал для реальных реальных проектов):

const original = {"property":"value"};
const reference = original;
const copy = JSON.parse(JSON.stringify(original));

const array = [reference, copy];

array[0].property = 'new value for reference';
array[1].property = 'new value for copy';

console.log(reference.property === original.property);
console.log(copy.property !== original.property);

Если у вас неглубокий объект, вы можете просто использовать оператор распространения (this.templates.push({...k});) для создания копии.

Если у вас есть объекты со свойствами k, что означает, что на них будут ссылаться в копии, вам потребуется глубокое клонирование k.

Answer 3

Вы можете попробовать что-то вроде ниже и использовать ключевое слово assign для создания новых объектов вместо назначения refrence.

let aObject = {
  id: 1, sth: "aa", sthE: "bb"
}
addTemplates(aObject);


function addTemplates(nTemplate) {
  let k  = Object.assign({}, nTemplate);
  k.id=this.templates.length+1;
  this.templates.push(k);
  this.emitTemplateSubject();
}

Answer 4

Вы можете использовать оператор spread и иметь что-то вроде:

let aObject={id:1, sth:"aa", sthE:"bb"}
addTemplate({... aObject});