Angular更新JSON对象数组键值时所有值被最后一项覆盖问题

TypeScript/JavaScript 中对象属于引用类型，原有代码在内层循环中直接修改的是arr数组里的原始对象本身，每次push进结果数组的都是指向同一个原始对象的内存引用，不是独立的新对象。等双层循环执行完成后，所有引用指向的原始对象的age属性已经被最后一次循环的赋值覆盖为50，因此结果数组里所有项的age值都相同。

每次内层循环处理时，先创建当前遍历对象的浅拷贝，基于新拷贝的对象修改age值后再推入结果数组，就不会出现引用互相影响的问题。修改后的myfunc代码如下：

myfunc(): void {
  // 可选：如果需要每次调用函数重置结果数组，可以先清空
  this.array = [];
  this.arr.forEach((e) => {
    this.ar.forEach((el) => {
      // 用展开运算符创建原对象的浅拷贝，同时赋值新的age
      const tempItem = { ...e, age: el };
      this.array.push(tempItem);
    });
  });
  console.log(this.array);
}

执行修改后的代码，控制台输出和预期完全一致：

[
  { name: 'Rakesh', age: 45 },
  { name: 'Rakesh', age: 50 },
  { name: 'Ram', age: 45 },
  { name: 'Ram', age: 50 }
]

注：如果业务场景中对象存在多层嵌套的复杂属性，浅拷贝无法完全隔离引用，需要替换为深拷贝逻辑实现；当前示例中的对象只有基础类型属性，展开运算符实现的浅拷贝完全满足需求。

内容的提问来源于stack exchange，提问作者Ravez