Angular 2/4中如何避免复制对象时原数组同步修改

嘿，这个问题其实是JavaScript里引用类型的特性搞的鬼——你直接把Items里的元素赋值给Item时，根本没创建新对象，只是把原对象的引用复制了一份，所以修改Item的属性自然会同步到原数组里的对应项。下面给你几种Angular里常用的解决办法：

方法1：用对象展开运算符（推荐，简洁到爆） #

ES6的对象展开运算符一行代码就能搞定浅拷贝，直接生成新对象：

// 假设你选中的是Items数组里的第i项
this.Item = {...this.Items[i]};

要是你的Item里没有嵌套的子对象，这个方法完全够用，简单又高效。

方法2：用Object.assign() #

这是浅拷贝的经典操作，和展开运算符效果差不多：

this.Item = Object.assign({}, this.Items[i]);

它会把源对象的所有属性复制到一个空对象里，相当于给原对象拍了个“快照”，新对象和原对象就彻底没关系了。

方法3：深拷贝（对付嵌套对象的情况） #

如果你的Item里还有嵌套的子对象或者数组，上面的浅拷贝就hold不住了，这时候得用深拷贝。最常用的就是JSON序列化的方式：

this.Item = JSON.parse(JSON.stringify(this.Items[i]));

不过要注意哈，这种方法有小缺点：如果对象里有函数、Symbol、undefined或者循环引用的话，这些内容会丢失。要是你业务里有这类复杂对象，可以用Lodash的_.cloneDeep()，或者自己写个递归函数来做深拷贝。

方法4：实例化自定义类（如果Item是类的话） #

要是你的Item是自定义的TypeScript类，比如你定义了ItemModel：

export class ItemModel {
  ItemName: string;
  // 其他属性...

  constructor(data: Partial<ItemModel>) {
    Object.assign(this, data);
  }
}

那你可以直接new一个新实例，完美切断引用：

this.Item = new ItemModel(this.Items[i]);

这种方式还能保留类的类型信息，对TypeScript的类型检查很友好。

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