javascript - 范围问题 - 更改回调中的数据正在更改更高的范围

Question

我正在构建一个小型 d&d 应用程序来练习以 Angular 传递数据组件，但我遇到了一个奇怪的问题。

我从 API 调用中返回一个“怪物”对象，然后将其填充到 View 中一定次数。我试图通过添加索引来更改其中一个值“名称” - 简单 - 获取“名称”添加和索引。我正在获取“名称”的值，对其进行更改，然后将其推送到组件中保存的数组 - 一切正常。我认为原始值对于循环的下一次迭代应该保持不变，但事实并非如此。我在这里的范围内不理解一些东西。

尝试只发布一些代码，因为我知道问题出在哪里，并且我知道它是一个范围问题，我只是想知道为什么会发生这种情况作为一个概念，因为它是我不熟悉的东西。使用

export class CombatComponent implements OnInit {
  selected:number;
  monsters:any[] = []
  addedMonsters:any[] =[]

  monsterNumber:number = 0;    <----this is being passed from a form - its working

  constructor( private ms:MonsterService) { }

 <-dont want to post the entire function because this is where the issue lies ->

this.$monsterData.subscribe(data =>{
 this.currentMonster=data;

 for (let i = 0 ; i<this.monsterNumber; i++){

   let originalName = this.currentMonster.name;
   console.log(this.currentMonster.name)

   this.monsters.push(this.currentMonster)
   let newName = this.monsters[i]['name'] = this.currentMonster.name +" " + `${i+1}`
   this.monsters[i].name = newName

   console.log(this.monsters)

 }

我的问题是，在第一次迭代之后，我认为应该发生的是一个带有名称+索引的数组。真正发生的是，第二次将 currentMonster 的“name”值更改为原始值+索引。我在这里不明白范围是什么？

Answer 1

每次迭代您都将相同的怪物对象插入数组。这会导致 this.monster[1] 和 this.monster[2] 等数组元素彼此保存相同的对象。因此，如果您更改 monster[1]，您也会更改 monster[2] 等等(包括 currentMonster，因为它们都引用相同的内容)对象)

我假设您实际上正在尝试根据 currentMonster 属性创建新的怪物对象，并尝试为它们分配一个新名称。

//these do shallow copy of the properties
//this is regular javascript might have to make
//changes to fit typescript syntax

//using spread operator to create new object
//https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
let newMonster = {...this.currentMonster}
//using Object.assign() to create new object
//https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
let newMonster = Object.assign({},this.currentMonster);

然后只需更改适当的属性并将新对象插入数组即可。

//give new monster a name 
newMonster.name = this.currentMonster.name +" " + `${i+1}`;

//push the new monster on the array
this.monsters.push(newMonster);