Javascript 深度复制角度为2的数组+；打字稿

我有一个作为输入的对象数组。我们把它叫做

content

当尝试深度复制它时，它仍然有对上一个数组的引用

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

这么长时间以来，我尝试了不同的方法，但都没有成功

ES6方式：

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

切片

方式：

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

在这两种情况下，数组中的所有对象都具有

状态：“Default”

---

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

我找到的唯一解决方案（几乎是在发布问题后立即找到的）是循环遍历数组并使用

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);
}

---

我知道这不是最好的。我想知道是否有更好的解决办法。

这是我自己的。不适用于复杂的情况，但对于简单的对象数组，它就足够了

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

选中此项：

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

---

这对我有用：

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

---

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

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

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

简单：

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

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

---

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

对于Angular，您可以这样做：

使用

纱线添加lodash安装lodash

或

npm安装lodash

在组件中，导入

cloneDeep

并使用它：

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

您的构建只增加了18kb，这是值得的

---

如果您需要更多了解为什么要使用lodash的cloneDeep，我还写了一篇文章。

或者，您可以使用GitHub项目来克隆您的对象，该项目也可以在npm上提供，或者只包含下面的代码片段

/**
*TypeScript的深度复制功能。
*@param T目标/复制值的通用类型。
*要复制的@param目标值。
*@请参阅源项目，ts deepcopyhttps://github.com/ykdr2017/ts-deepcopy
*@见代码笔https://codepen.io/erikvullings/pen/ejyBYg
*/
导出常量deepCopy=（目标：T）：T=>{
如果（目标===null）{
回报目标；
}
if（目标实例的截止日期）{
将新日期（target.getTime（））作为任意日期返回；
}
if（阵列的目标实例）{
常量cp=[]与任何[]相同；
（目标为任何[]）.forEach（（v）=>{cp.push（v）；}）；
将cp.map（（n:any）=>deepCopy（n））返回为any；
}
if（typeof target==='object'&&target！=={}）{
const cp={…（目标为{[key:string]：any}}}为{[key:string]：any}；
Object.keys（cp.forEach）（k=>{
cp[k]=deepCopy（cp[k]）；
});
将cp返回为T；
}
回报目标；
};
这是Daria的建议（见对问题的评论），它从以下几点开始起作用：

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

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

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

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

如果我没有遗漏一些东西，这对字符串不起作用——当我尝试
var source=[“一”、“二”、“三”]；var cloned=source.map（x=>Object.assign（{}，x））我最后被克隆为：
[{'0'：'o'，'1'：'n'，'2'：'e'}，{'0'：'t'，'1'：'w'，'2'：'o'}，{'0'：'t'，'1'：'h'，'2'：'r'，'3'：'e'，'4'：'e'}
至于我
source map（x=>（{…x}）最适合。与internet explorer不兼容如果要克隆阵列对象，此选项更可取。搜索2小时后。这成功了！非常感谢！可能不是最有效的，但绝对是最简单的。。。并且适用于任何对象/阵列这可能是个好主意。但是有一个问题：我不认为这会复制方法，假设对象有方法。我们在生产中使用此方法，其中主模型中有两个嵌套模型，获取模型的调用可以完美地工作，getError（）方法也可以比Object.assign（[]，this.list）节省时间；（行）如果对象具有函数属性或循环引用，这将不起作用。@makkasi这不是真的。设置this.listCopy后更改this.list肯定不会影响this.listCopy！！好吧，也许我错了。我用这段代码进行了测试，它改变了其他列表。可能是因为别的地方。我目前无法使用计算机。我稍后会试试这个。我删除了我以前的评论。@kabus，如果
此列表包含对象，它将被删除。如果您修改
this.list
中包含的任何对象，更改将反映到
this.listCopy
，因为它只保留引用。@el.atomo您能否提供一个示例，因为我无法复制它的sure@kabus，
let list=[{a:1}]；让listCopy=Object.assign（[]，list）；列表[0]。a=2；console.log（列表[0].a，列表副本[0].a）。很抱歉，格式很难看：）与internet explorer不兼容这对我很有用！谢谢你，阿列克谢！！非常简单和优雅：）看起来也很快，不需要包含额外的lodash库。请注意，如果您的原始对象是一个对象数组，对象将不会被深度复制，它们的引用将被复制。A一些解决方案，大拇指
this.clonedArray = theArray.map(e => ({ ... e }));

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