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

我有一个对象数组作为输入。让我们称之为吧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中深度复制数组的最佳方法是什么？

检查一下：

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

简单：

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

这也适用（仅适用于阵列）

let objCopy2 = obj.slice()

这为我工作：

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

我找到的唯一解决方案（在发布问题后几乎立即获得解决方案）是遍历数组并使用 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);
}

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

深度复制内部具有嵌套对象的对象的一种干净方法是使用lodash的cloneDeep方法。

对于Angular，您可以这样操作：

使用yarn add lodash或安装lodash npm install lodash。

在您的组件中，导入cloneDeep并使用它：

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

它仅增加了18kb，值得物有所值。

如果您需要更多关于为何使用lodash的cloneDeep的见解，我也在这里写了一篇文章。

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

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

这是我自己的。在复杂的情况下不起作用，但是对于简单的对象数组，这已经足够了。

  deepClone(oldArray: Object[]) {
    let newArray: any = [];
    oldArray.forEach((item) => {
      newArray.push(Object.assign({}, item));
    });
    return newArray;
  }

另外，您可以使用GitHub项目ts-deepcopy（也可在npm上获得）来克隆您的对象，或仅在下面添加代码段。

/**
 * Deep copy function for TypeScript.
 * @param T Generic type of target/copied value.
 * @param target Target value to be copied.
 * @see Source project, ts-deepcopy https://github.com/ykdr2017/ts-deepcopy
 * @see Code pen https://codepen.io/erikvullings/pen/ejyBYg
 */
export const deepCopy = <T>(target: T): T => {
  if (target === null) {
    return target;
  }
  if (target instanceof Date) {
    return new Date(target.getTime()) as any;
  }
  if (target instanceof Array) {
    const cp = [] as any[];
    (target as any[]).forEach((v) => { cp.push(v); });
    return cp.map((n: any) => deepCopy<any>(n)) as any;
  }
  if (typeof target === 'object' && target !== {}) {
    const cp = { ...(target as { [key: string]: any }) } as { [key: string]: any };
    Object.keys(cp).forEach(k => {
      cp[k] = deepCopy<any>(cp[k]);
    });
    return cp as T;
  }
  return target;
};

我在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

您可以使用use JQuery进行深度复制：

var arr =[['abc'],['xyz']];
var newArr = $.extend(true, [], arr);
newArr.shift().shift();

console.log(arr); //arr still has [['abc'],['xyz']]