Angular 8 中如何正确复制数组以避免两个变量引用同一对象-js教程-PHP中文网

Angular 8 中如何正确复制数组以避免两个变量引用同一对象

在 Angular 8 中，直接赋值数组会导致两个变量指向同一内存地址，修改一个会意外影响另一个；需通过展开运算符（[...arr]）或 slice() 创建浅拷贝，确保 mailConfig 和 tempMailConfig 独立变更。

在 angular 8 中，直接赋值数组会导致两个变量指向同一内存地址，修改一个会意外影响另一个；需通过展开运算符（[...arr]）或 slice() 创建浅拷贝，确保 mailconfig 和 tempmailconfig 独立变更。

当你在 Angular 8 中执行如下赋值操作：

this.mailConfig = response;
this.tempMailConfig = response; // ❌ 错误：引用同一数组对象

mailConfig 和 tempMailConfig 实际指向同一个数组实例——即浅层引用共享。因此，当模板中通过 [(ngModel)]="config.propertyValue" 修改 mailConfig[i].propertyValue 时，由于 tempMailConfig 与 mailConfig 共享相同对象引用，其对应项的 propertyValue 也会同步变化。

✅ 正确做法是创建一个新数组引用（浅拷贝），使两者互不影响。推荐以下两种方式（均适用于普通对象数组，前提是对象内部属性无需深度克隆）：

方式一：使用扩展运算符（推荐，语义清晰、现代）

this._http.getTrainingConfigByKeys(this.mailConfigKeys).subscribe(response => {
  this.mailConfig = response;
  this.tempMailConfig = [...response]; // ✅ 创建新数组，元素引用不变但数组本身独立
});

方式二：使用 `slice()` 方法（兼容性更广）

this._http.getTrainingConfigByKeys(this.mailConfigKeys).subscribe(response => {
  this.mailConfig = response;
  this.tempMailConfig = response.slice(); // ✅ 同样返回新数组副本
});

⚠️ 注意事项：

上述方法均为浅拷贝：数组结构被复制，但每个对象（如 response[0]）仍为原引用。若需修改对象内部属性（如 config.title）也要求完全隔离，请改用深拷贝（如 JSON.parse(JSON.stringify(response)) 或 lodash.cloneDeep），但通常配置类数组仅需浅拷贝即可满足需求；
不要使用 Object.assign([], response) —— 在 Angular 8 + TypeScript 环境中虽可行，但可读性差且易出错；
若后续需比对变更（如“保存前校验是否修改”），建议基于 tempMailConfig 初始化表单状态，并在提交时对比 mailConfig 与原始 tempMailConfig 的差异。