javascript - Angular/ typescript : arrays in typescript changing when an independent element got changed

Question

为什么我的数组元素在更新另一个获取数组中某项副本的变量时更新？

StackBlitz:https://stackblitz.com/edit/angular-3tgp7h

(检查 AppComponent)

代码:

export class AppComponent implements OnInit  {
  materials: Material[] = [];
  material: Material;

  ngOnInit(){
    
    this.materials = [
      {
        name: 'One',
        price:10,
      },
      {
        name: 'Two',
        price:10,
      },
      {
        name: 'Three',
        price:10,
      },
    ];

    this.material = this.materials.find(mat => mat.name === 'One');

    console.log('material ones price in the array: '+this.materials.find(mat => mat.name === 'One').price )

    //Update (single) material object

    this.material.price = 20;

   // below is displaying 20. but i didn't update array
   // why is this happening?
    console.log('material ones price in the array after update: '+this.materials.find(mat => mat.name === 'One').price )
  }
}

export interface Material {
  name: string;
  price: number;
}

Answer 1

它会给你那个对象的引用

this.material = this.materials.find(mat => mat.name === 'One');

这就是它更新源数组中的值的原因。

您可以创建深度克隆:

let foundObj = this.materials.find(mat => mat.name === 'One');
if(foundObj) {
    foundObj = JSON.parse(JSON.stringify(foundObj));
}
this.material = foundObj;