关于javascript：获取数组的副本而不影响Angular 2中的原始数组


take copy of an array without affecting original array in Angular 2

以下是我的代码：

1
2
3
4
5
6
7
8
9
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，但没有按预期工作。

这应该按预期工作：

1
2
3
4
5
6
7
8
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操作符：

1
2
3
4
5
6
7
8
this.service.content(data).subscribe(
  data => {
    this.array1 = data.Result;

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

分配数组不会生成数组的副本。通过这种方式，您创建了指向同一数组的两个指针。更改单指针将更改原始数组。我的观点是：

1
2
3
4
5
6
7
8
data: any[];
array1: any[];
array2: any[];
data = ["1","2"];
this.array1 = this.data;
this.array2 = this.data;

this.array1[0] ="3";

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

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

你可以在这里找到很好的范例

假设您使用ES6，则可以使用LODASH进行深度复制。

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

。

或者使用EDOCX1[1]

1
2
3
4
5
6
7
this.array1= data.Result.map(function(obj) {
    Object.assign({}, obj)
})

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