如何在Javascript中克隆对象数组？

Question

如何在Javascript中克隆对象数组？.每个对象也有对同一数组中其他对象的引用？当我第一次提出这个问题的时候，我只是想到var clonedNodesArray = nodesArray.clone()将存在并搜索有关如何在javascript中克隆对象的信息。我确实找到了问题关于StackOverflow(由相同的@JohnResig回答)，他指出使用jQuery可以做到var clonedNodesArray = jQuery.extend({}, nodesArray);克隆物体。不过，我尝试过这样做，它只复制数组中对象的引用。所以如果我nodesArray[0].value = "red"clonedNodesArray[0].value = "green"nodesArray[0]和clonedNodesArray[0]的值将变成“绿色”。然后我试着var clonedNodesArray = jQuery.extend(true, {}, nodesArray);深层次复制一个物体，但我得到了“太多递归“和”控制堆栈溢出“分别来自Firebug和Opera蜻蜓的消息。你会怎么做？这难道是不该做的事吗？在Javascript中有可重用的方法吗？

Answer 1

浅拷贝的问题是，所有对象都不是克隆的。虽然对每个对象的引用在每个数组中都是唯一的，但是一旦您最终抓住它，您将处理与前面相同的对象。你克隆它的方式没什么不对的.使用Array.Slice()也会出现同样的结果。

深拷贝出现问题的原因是，您最终得到了循环对象引用。深度会越深越好，如果你有一个圆圈，它就会无止境地前进，直到浏览器昏倒。

如果数据结构不能表示为有向无圈图，那么我不确定您是否能够找到一种通用的深入克隆方法。循环图提供了许多棘手的角落情况，而且由于它不是一个常见的操作，我怀疑没有人写过完整的解决方案(如果可能的话-可能不是！)但我现在没有时间试着写一份严格的证据。)我在这个问题上找到了一些很好的评论本页.

如果您需要一个带有循环引用的数组对象的深度副本，我相信您将不得不编写自己的方法来处理您的专用数据结构，这样它就是一个多通道克隆：

1. 在第一轮中，克隆不引用数组中其他对象的所有对象。跟踪每个物体的起源。
2. 在第二轮中，将物体连接在一起。

Answer 2

只要您的对象包含JSON可序列化的内容(没有函数，没有Number.POSITIVE_INFINITY等等)不需要任何循环来克隆数组或对象。这是一个纯香草单线解决方案。

var clonedArray = JSON.parse(JSON.stringify(nodesArray))

总结下面的注释，这种方法的主要优点是它还克隆了数组的内容，而不仅仅是数组本身。主要的缺点是它只在JSON可序列化的内容上工作的限制，以及它的性能(这比slice基础办法)。

Answer 3

我解决了一个对象数组的克隆对象.分配

const newArray = myArray.map(a => Object.assign({}, a));

或者更短扩展语法

const newArray = myArray.map(a => ({...a}));