在Angular 2 + TypeScript中深层复制数组

Question

我有一个输入的对象数组.让我们来称呼它content.

尝试深度复制时,它仍然具有对前一个数组的引用.

我需要复制该输入数组,并更改重复部分的一个属性.

很久以来我尝试了不成功的不同方法.

ES6方式:

public duplicateArray() {
  arr = [...this.content]
  arr.map((x) => {x.status = DEFAULT});
  return this.content.concat(arr);
}

该slice方式:

public duplicateArray() {
  arr = this.content.slice(0);
  arr.map((x) => {x.status = DEFAULT});
  return this.content.concat(arr);
}

在这两个数组中,所有对象都有status: 'Default'.

在Angular 2中深度复制数组的最佳方法是什么？

Answer 1

检查一下:

  let cloned = source.map(x => Object.assign({}, x));

Answer 2

简单:

let objCopy  = JSON.parse(JSON.stringify(obj));

Answer 3

我发现的唯一解决方案(几乎在发布问题后立即)是循环遍历数组并使用 Object.assign()

像这样:

public duplicateArray() {
  let arr = [];
  this.content.forEach((x) => {
    arr.push(Object.assign({}, x));
  })
  arr.map((x) => {x.status = DEFAULT});
  return this.content.concat(arr);
}

我知道这不是最佳的.我想知道是否有更好的解决方案.

Answer 4

这对我有用:

this.listCopy = Object.assign([], this.list);

Answer 5

我在 Angular devkit 中发现了深度复制方法，这很正常，所以......也许你可以自己实现或使用它。

我更喜欢使用loadash，有很多对象和数组操作方法可以使用。

import { deepCopy } from '@angular-devkit/core/src/utils/object';

export class AppComponent {
  source = {
    ....
  }
  constructor() {
     const newObject = deepCopy(this.source);
  }
}

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.8
@angular-devkit/build-angular     0.1000.8
@angular-devkit/build-optimizer   0.1000.8
@angular-devkit/build-webpack     0.1000.8
@angular-devkit/core              10.0.8
@angular-devkit/schematics        10.0.8
@angular/cli                      10.0.8
@ngtools/webpack                  10.0.8
@schematics/angular               10.0.8
@schematics/update                0.1000.8
rxjs                              6.5.5
typescript                        3.9.7
webpack                           4.43.0

Answer 6

深入复制具有嵌套对象的对象的一种干净方法是使用lodash的cloneDeep方法.

对于Angular,你可以这样做:

用yarn add lodash或安装lodash npm install lodash.

在您的组件中,导入cloneDeep并使用它:

import * as cloneDeep from 'lodash/cloneDeep';
...
clonedObject = cloneDeep(originalObject);

它只为您的构建添加了18kb,非常值得获益.

如果你需要更多地了解为什么使用lodash的cloneDeep,我也在这里写了一篇文章.

Answer 7

这是Daria的建议（请参阅问题的注释），该建议从TypeScript 2.1开始工作，并且基本上从数组中克隆每个元素：

this.clonedArray = theArray.map(e => ({ ... e }));