Angular 4中数组复制后修改一个另一个同步变化的原因咨询

这个问题其实是JavaScript里引用类型的常见坑！我来给你拆解清楚：

为什么修改一个数组另一个会跟着变？ #

在JavaScript中，数组、对象这类属于引用类型，和字符串、数字这种值类型不一样。当你把this.contactOptions赋值给this.updatedContactOptions的时候，你并没有真正复制一份数组的内容，只是把指向这个数组在内存中地址的引用复制了过去。也就是说，this.contactOptions和this.updatedContactOptions其实指向的是同一个数组对象——就像两把钥匙开同一扇门，你用其中一把钥匙修改了门里的东西，另一把钥匙打开门看到的自然也是修改后的样子。

怎么解决这个问题？ #

根据你数组里元素的类型，有不同的拷贝方式：

情况1：数组元素都是值类型（字符串、数字、布尔等） #

如果你的contactOptions里都是简单值类型，用下面几种方法就能实现独立的拷贝：

• 扩展运算符（最常用）：

  this.updatedContactOptions = [...this.contactOptions];
  

• Array.from()方法：

  this.updatedContactOptions = Array.from(this.contactOptions);
  

• slice()方法（不传参数默认拷贝整个数组）：

  this.updatedContactOptions = this.contactOptions.slice();
  

情况2：数组元素是对象/嵌套数组（比如你代码里的contactDetails） #

上面的方法只能做浅拷贝——数组本身是新的，但里面的对象还是共享原来的引用。如果要彻底让两个数组完全独立，需要做深拷贝：

• JSON序列化法（简单但有局限性：不能处理函数、undefined、循环引用）：

  this.updatedContactOptions = JSON.parse(JSON.stringify(this.contactOptions));
  

• 手动递归拷贝（适合复杂结构，可控性强）：

  function deepClone(arr) {
    return arr.map(item => {
      if (typeof item === 'object' && item !== null) {
        return {...item}; // 如果是多层嵌套对象，这里需要递归调用deepClone
      }
      return item;
    });
  }
  this.updatedContactOptions = deepClone(this.contactOptions);
  

• 如果你项目里用了Lodash库，直接用_.cloneDeep()最省心：

  this.updatedContactOptions = _.cloneDeep(this.contactOptions);
  

额外提醒 #

看你代码里还有jobFormData.contactDetails，如果这个也是数组，赋值的时候也要注意同样的引用问题，别踩同一个坑哦！

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