Angular中添加数组新元素时所有元素数据被修改的问题

你遇到的问题本质是JavaScript对象的引用特性：当执行this.accData.push(this.accData[this.accData.length - 1])时，并没有创建新对象，而是把数组最后一个元素的内存引用推入了数组。这意味着数组里的两个元素指向同一个对象，修改新元素的percentage时，原对象的属性也会同步改变。

核心是创建原对象的独立副本，而不是直接推送引用。以下是几种实用的实现方式：

方式1：扩展运算符（推荐，简洁直观） #

修改new()函数：

new(){
    // 基于最后一个元素创建浅拷贝
    const newItem = {...this.accData[this.accData.length - 1]};
    // 修改新元素的percentage
    newItem.percentage = '0';
    // 将新对象推入数组
    this.accData.push(newItem);

    console.log(this.accData);
}

方式2：Object.assign #

new(){
    const newItem = Object.assign({}, this.accData[this.accData.length - 1]);
    newItem.percentage = '0';
    this.accData.push(newItem);

    console.log(this.accData);
}

方式3：深拷贝（针对嵌套对象场景） #

如果你的数组元素是嵌套结构的对象，浅拷贝无法完全隔离，可使用JSON序列化实现深拷贝：

new(){
    const lastItem = this.accData[this.accData.length - 1];
    const newItem = JSON.parse(JSON.stringify(lastItem));
    newItem.percentage = '0';
    this.accData.push(newItem);

    console.log(this.accData);
}

修改后点击按钮，数组会符合你的预期：

[ 
   {name: 'user1', percentage: '1'}, 
   {name: 'user1', percentage: '0'} 
]

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