复制数组而不影响Angular 2中的原始数组答案

【问题标题】：take copy of an array without affecting original array in Angular 2复制数组而不影响Angular 2中的原始数组
【发布时间】：2017-07-31 12:03:40
【问题描述】：

这是我在下面给出的代码：

this.service.content(data).subscribe(
  data => {
        this.array1= data.Result;
        this.array2= data.Result;
        /* Adding Additional Properties */
        this.array2.forEach(function(el:any){
          el.isActive = false;
        });
  }

正如您在代码中看到的那样，何时将项目添加到 array2。不幸的是，该项目也被添加到 array1 中。请提供在不影响array1值的情况下向array2添加属性的解决方案。

我还尝试对 data.Result 进行切片属性，但没有按预期工作。

【问题讨论】：

标签： javascript arrays angular arraylist

【解决方案1】：

这应该可以按预期工作：

this.service.content(data).subscribe(
  data => {
    this.array1 = data.Result;

    this.array2 = this
      .array1
      .map(el => Object.assign({}, el, { isActive: false }));
  }

编辑：
如果你使用Typescript 2.1 or +，你也可以像这样在对象上使用spread operator：

this.service.content(data).subscribe(
  data => {
    this.array1 = data.Result;

    this.array2 = this
      .array1
      .map(el => ({...el, isActive: false }));
  }

【讨论】：

【解决方案2】：

分配数组并不是复制数组。按照您的操作方式，您创建了两个指向同一个数组的指针。更改一个指针会更改原始数组。我的观点是：

data: any[];
array1: any[];
array2: any[];
data = ["1", "2"];
this.array1 = this.data;
this.array2 = this.data;

this.array1[0] = "3";

这将更改原始数组数据，并将值 3 放在位置 0。

你应该复制数组而不是分配它。

你可以找到here很好的例子

【讨论】：

【解决方案3】：

假设你使用的是 ES6，你可以使用 load lodash 进行深拷贝

this.array1= _.cloneDeep(data.Result);
this.array2= _.cloneDeep(data.Result);

或使用object.assign

this.array1= data.Result.map(function(obj) {
    Object.assign({}, obj)
})

this.array2= data.Result.map(function(obj) {
    Object.assign({}, obj)
})

【讨论】：