Angular 5中类属性自动变更问题：备份变量同步更新异常

嘿，这个坑我帮好多开发者踩过——你遇到的是JavaScript引用类型的特性导致的问题！

问题根源 #

JavaScript里的数组、对象都是引用类型，当你直接把questions赋值给backupQuestions时，并没有创建一个独立的副本，只是把指向同一个内存地址的引用复制给了备份变量。说白了，questions和backupQuestions其实是同一个东西的两个名字，不管改哪个，另一个自然会跟着变。

具体解决方案 #

根据你的返回数据结构，选对应的拷贝方式：

1. 如果返回的res是简单数组（无嵌套对象）

用扩展运算符或者Array.from做浅拷贝就够了：

getQuestionsForSection() {
  this.questionService.getQuestions(formId, sectionId, false).subscribe((res) => {
    // 保存独立备份
    this.backupQuestions = [...res]; 
    // 原变量正常赋值
    this.questions = res;
    // 后续修改this.questions就不会影响backupQuestions了
  });
}

2. 如果返回的res是嵌套对象/复杂数组（数组里包含对象）

这时候需要深拷贝，把所有层级的属性都复制成独立的：

• 方案一：用现代浏览器支持的structuredClone（推荐，支持大部分类型）

this.backupQuestions = structuredClone(res);

• 方案二：用JSON.parse(JSON.stringify(res))（注意局限性：不能处理函数、Symbol、循环引用，日期会变成字符串）

this.backupQuestions = JSON.parse(JSON.stringify(res));

• 方案三：如果项目里已经用了Lodash，直接用_.cloneDeep(res)

额外提醒 #

别再直接用this.backupQuestions = this.questions这种赋值方式啦，只要是引用类型，都会出现这种“牵一发而动全身”的问题。

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