在 Javascript/Typescript 中克隆数组

Question

我有两个对象的数组：

 genericItems: Item[] = [];
backupData: Item[] = [];

我正在用 genericItems 数据填充我的 HTML 表。该表是可修改的。有一个重置按钮可以撤消使用 backUpData 完成的所有更改。此数组由服务填充：

 getGenericItems(selected: Item) {
this.itemService.getGenericItems(selected).subscribe(
  result => {
     this.genericItems = result;
  });
     this.backupData = this.genericItems.slice();
  }

我的想法是，用户更改将反映在第一个阵列中，第二个阵列可以用作重置操作的备份。我在这里面临的问题是当用户修改表时（ genericItems[]) 第二个数组 backupData 也被修改了。

这是如何发生的以及如何防止这种情况发生？

原文由 Arun 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

克隆一个对象：

const myClonedObject = Object.assign({}, myObject);

克隆一个数组：

• 如果您有一组原始类型，则 选项 1 ：

const myClonedArray = Object.assign([], myArray);

• 选项 2 - 如果您有一个对象数组：

 const myArray= [{ a: 'a', b: 'b' }, { a: 'c', b: 'd' }];
const myClonedArray = [];
myArray.forEach(val => myClonedArray.push(Object.assign({}, val)));

原文由 abahet 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

数组级克隆解决方案对我不起作用，在打字稿中添加了这个克隆实用程序，它可以进行更深层次的克隆，适用于我的情况

export function cloneArray<T>(arr: T[]): T[] {
  return arr.map((x) => Object.assign({}, x))
}

“没用”是指，如果我将数组传递给函数 [...arr] 或 Object.assign([], arr) 或 arr.splice() 它仍在改变原始数组

原文由 Sonic Soul 发布，翻译遵循 CC BY-SA 4.0 许可协议