我有一个包含两个对象的数组：
genericItems: Item[] = [];
backupData: Item[] = [];
我正在使用genericItems数据填充我的HTML表格。该表格是可修改的。有一个重置按钮可以撤消使用backUpData所做的所有更改。这个数组由一个服务填充：
getGenericItems(selected: Item) {
this.itemService.getGenericItems(selected).subscribe(
result => {
this.genericItems = result;
});
this.backupData = this.genericItems.slice();
}
我的想法是，用户的更改将会反映在第一个数组中，而第二个数组可以用作重置操作的备份。我面临的问题是，当用户修改表格（<code>genericItems[]</code>）时，第二个数组<code>backupData</code>也会被修改。
这是怎么发生的，如何防止这种情况？
克隆一个对象：
const myClonedObject = Object.assign({}, myObject);
克隆一个数组：
const myClonedArray = Object.assign([], myArray);
const myArray= [{ a: 'a', b: 'b' }, { a: 'c', b: 'd' }];
const myClonedArray = [];
myArray.forEach(val => myClonedArray.push(Object.assign({}, val)));
const myArray= [{ a: 'a', b: 'b' }, { a: 'c', b: 'd' }]; const myClonedArray = []; myArray.map(val => myClonedArray.push(Object.assign({}, val)));. 另外一个可行的深拷贝方案是使用JSON序列化，正如其他答案中提到的。 - mumblesNZ_.cloneDeep(obj) 这样的东西。JSON 序列化也可以，就像你说的那样，但这是一种非常迂回的方法。 - user2683747在javascript中克隆数组和对象的语法不同，迟早每个人都会通过艰难的方式学习到这种差异并最终到达这里。
在Typescript和ES6中，您可以使用展开运算符来处理数组和对象：
const myClonedArray = [...myArray]; // This is ok for [1,2,'test','bla']
// But wont work for [{a:1}, {b:2}].
// A bug will occur when you
// modify the clone and you expect the
// original not to be modified.
// The solution is to do a deep copy
// when you are cloning an array of objects.
要深度复制一个对象，你需要使用外部库：
import {cloneDeep} from 'lodash';
const myClonedArray = cloneDeep(myArray); // This works for [{a:1}, {b:2}]
const myShallowClonedObject = {...myObject}; // Will do a shallow copy
// and cause you an un expected bug.
要深度复制一个对象，你需要使用外部库：
import {cloneDeep} from 'lodash';
const deeplyClonedObject = cloneDeep(myObject); // This works for [{a:{b:2}}]
使用 map 或其他类似的解决方案不能深度复制对象数组。 不需要添加新库，更简单的方法是使用 JSON.stringify，然后再使用 JSON.parse。
在您的情况下，应该这样操作：
this.backupData = JSON.parse(JSON.stringify(genericItems));
对于小对象，lodash的cloneDeep可能更快，但对于较大/更深的对象，json克隆会更快。因此，在这种情况下，您应该毫不犹豫地使用它。请查看https://www.measurethat.net/Benchmarks/Show/6039/0/lodash-clonedeep-vs-json-clone-larger-object以及有关信息https://v8.dev/blog/cost-of-javascript-2019#json
不方便之处在于您的源对象必须可以转换为JSON。
请尝试以下代码：
this.cloneArray= [...this.OriginalArray]
genericItems中所有对象的引用复制到这个新数组中，并将其赋值给backupData：this.backupData = this.genericItems.slice();
因此，尽管 backupData 和 genericItems 是不同的数组，它们包含完全相同的对象引用。
您可以引入一个库来为您执行深层复制（如@LatinWarrior所提到的）。
但是，如果 Item 不太复杂，也许您可以添加一个 clone 方法来自行深度克隆对象：
class Item {
somePrimitiveType: string;
someRefType: any = { someProperty: 0 };
clone(): Item {
let clone = new Item();
// Assignment will copy primitive types
clone.somePrimitiveType = this.somePrimitiveType;
// Explicitly deep copy the reference types
clone.someRefType = {
someProperty: this.someRefType.someProperty
};
return clone;
}
}
clone():this.backupData = this.genericItems.map(item => item.clone());
下面的代码可能会帮助你复制第一层对象
let original = [{ a: 1 }, {b:1}]
const copy = [ ...original ].map(item=>({...item}))
copy[0].a = 23
console.log(original[0].a) //logs 1 -- value didn't change voila :)
对于这种情况失败
let original = [{ a: {b:2} }, {b:1}]
const copy = [ ...original ].map(item=>({...item}))
copy[0].a.b = 23;
console.log(original[0].a) //logs {b: 23} -- lost the original one :(
非常强大的克隆（不带引用）对象/数组
您可以使用@angular-devkit获取对象/数组的深复制。
import { deepCopy } from '@angular-devkit/core/src/utils/object';
export class AppComponent {
object = { .. some object data .. }
array = [ .. some list data .. ]
constructor() {
const newObject = deepCopy(this.object);
const newArray = deepCopy(this.array);
}
}
{ ... }）的数组实际上并不是一个对象的数组。这是微妙的，但是一个对象的数组实际上是一个引用的数组。以现实世界的比喻来说，将"对象"看作是网络上的网站：在这种情况下，"对象的数组"实际上是一个URL地址的数组。数组并不包含网站本身，如果你复制这个数组，你将得到URL的副本。如果一个网站的所有者更改了他们的主页，你将从两个数组中都"看到"这个变化。（续...） - undefined toArray= fromArray.map(x => x);
我也有与 primeNg DataTable 相同的问题。 经过多次尝试和哭泣后，我使用了这段代码解决了问题。
private deepArrayCopy(arr: SelectItem[]): SelectItem[] {
const result: SelectItem[] = [];
if (!arr) {
return result;
}
const arrayLength = arr.length;
for (let i = 0; i <= arrayLength; i++) {
const item = arr[i];
if (item) {
result.push({ label: item.label, value: item.value });
}
}
return result;
}
用于初始化备份数值
backupData = this.deepArrayCopy(genericItems);
genericItems = this.deepArrayCopy(backupData);
{} 重新创建项目，而不是调用构造函数。
我尝试过 new SelectItem(item.label, item.value)，但它没有起作用。克隆数组最简单的方法是
backUpData = genericItems.concat();
backUpData创建新的内存。 backUpData仍然持有genericItems的引用。 - Suyash Gupta
slice()会从另一个数组创建一个新的对象，我猜是这样... - Arunslice函数会将数组中的每个引用复制到一个新的数组中。因此，旧数组和新数组实际上是不同的，但其中的对象完全相同。所以这应该与使用[...array]是一样的。 - Frank Modica