如何克隆 TypeScript 对象数组？

Question

我尝试了这种方法：

this.plans = [];
this.plansCopy = [...this.plans];

看起来它不起作用，因为返回了重复的结果。

- Alice

---

它返回重复内容是什么意思？ - Explosion Pills

Answer 1

展开运算符返回数组的各个项。如果这些项已经是对象，那么它会返回对这些对象的引用。而创建一个新数组的是[]这一部分。因此你得到了一个新数组，但它仍然包含相同的对象引用，所以this.plans[0].oper()将同时调用this.plansCopy[0].oper()。

相反，您需要克隆每个单独的对象。有许多不同的方法可以实现这一点（创建数组或单独对象的深层副本）。如果您只需要一级克隆，则可以执行以下操作：

this.plansCopy = this.plans.map(obj => ({...obj}));

这将创建一个新的数组，在其中每个元素都是每个对象的副本。

- Explosion Pills

---

你能再详细解释一下吗？因为你漏掉了主要的部分。 - Alice

这句话的意思是什么？map(obj => ({...obj}));？你的意思是 map(obj => ({ return obj})); 吗？ - Alice

@Alice，你的意思是我错过了main函数吗？你能否更新你的问题并提供一个返回重复项的示例？ - Explosion Pills

@Alice .map(obj => ({...obj})) 和 .map(obj => { return {...obj}; }) 是相同的。 - Explosion Pills

哦，抱歉，我对 ...obj 的想法与您不同。 - Alice

"..." 是一个扩展运算符。 - spinalfrontier

Answer 2

这里有一个很好的回答。 主要问题是在数组的深层级别，你可能会遇到复制引用而不是重复它的问题。如果你知道你只有简单的对象，你也可以使用

const newArray = Array.from(oldArray); 

我发现这种方法比扩展运算符更清晰易懂。

然而，如果你不知道数组的嵌套深度有多深（即可能有非简单类型的嵌套层数），那么通用答案似乎是：

this.backupData = JSON.parse(JSON.stringify(genericItems));

由于它会一直遍历整个数组的对象，并进行构建 -- 为一般情况进行克隆。

- Ben