使用structuredClone创建深度拷贝

在JavaScript中深度复制数组的现代方法是使用structuredClone:

array2 = structuredClone(array1);

然而，这个功能相对较新(Chrome 98, Firefox 94)，目前只有大约85%的用户可以使用，所以它还没有准备好投入生产。

作为替代方案，您可以使用下面支持良好的基于json的解决方案之一。

使用JSON.parse创建深度副本

一个通用的解决方案，即在对象数组中考虑所有可能的对象可能是不可能的。 也就是说，如果数组包含具有json序列化内容的对象(没有函数，没有Number。POSITIVE_INFINITY等)一个以性能为代价避免循环的简单方法就是这种纯香草式的单行解决方案。

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

总结一下下面的评论，这种方法的主要优点是它还克隆数组的内容，而不仅仅是数组本身。主要的缺点是它只能处理json序列化的内容，而且它的性能比spread方法慢30倍。

如果数组中有浅对象，并且IE6是可以接受的，那么更好的方法是将展开操作符与.map数组操作符结合使用。对于两层深的情况(如下面附录中的数组):

clonedArray = nodesArray.map(a => {return {...a}})

原因有两个:1)它的速度要快得多(参见下面的基准比较)，而且它还允许数组中的任何有效对象。

*附件: 性能量化是基于克隆这个对象数组一百万次:

 [{url: 'https://github.com/bobziroll/scrimba-react-bootcamp-images/blob/master/pic1.jpg?raw=true', id: '1', isFavorite: false}, {url: 'https://github.com/bobziroll/scrimba-react-bootcamp-images/blob/master/pic2.jpg?raw=true', id: '2', isFavorite: false},{url: 'https://github.com/bobziroll/scrimba-react-bootcamp-images/blob/master/pic3.jpg?raw=true', id: '3', isFavorite: false},{url: 'https://github.com/bobziroll/scrimba-react-bootcamp-images/blob/master/pic4.jpg?raw=true', id: '4', isFavorite: false},{url: 'https://github.com/bobziroll/scrimba-react-bootcamp-images/blob/master/pic5.jpg?raw=true', id: '5', isFavorite: true},{url: 'https://github.com/bobziroll/scrimba-react-bootcamp-images/blob/master/pic6.jpg?raw=true', id: '6', isFavorite: false},{url: 'https://github.com/bobziroll/scrimba-react-bootcamp-images/blob/master/pic7.jpg?raw=true', id: '7', isFavorite: false},{url: 'https://github.com/bobziroll/scrimba-react-bootcamp-images/blob/master/pic8.jpg?raw=true', id: '8', isFavorite: false},{url: 'https://github.com/bobziroll/scrimba-react-bootcamp-images/blob/master/pic9.jpg?raw=true', id: '9', isFavorite: false},{url: 'https://github.com/bobziroll/scrimba-react-bootcamp-images/blob/master/pic10.jpg?raw=true', id: '10', isFavorite: false},{url: 'https://github.com/bobziroll/scrimba-react-bootcamp-images/blob/master/pic11.jpg?raw=true', id: '11', isFavorite: false},{url: 'https://github.com/bobziroll/scrimba-react-bootcamp-images/blob/master/pic12.jpg?raw=true', id: '12', isFavorite: false},{url: 'https://github.com/bobziroll/scrimba-react-bootcamp-images/blob/master/pic13.jpg?raw=true', id: '13', isFavorite: false},{url: 'https://github.com/bobziroll/scrimba-react-bootcamp-images/blob/master/pic14.jpg?raw=true', id: '14', isFavorite: false},{url: 'https://github.com/bobziroll/scrimba-react-bootcamp-images/blob/master/pic15.jpg?raw=true', id: '15', isFavorite: false},{url: 'https://github.com/bobziroll/scrimba-react-bootcamp-images/blob/master/pic16.jpg?raw=true', id: '16', isFavorite: false},{url: 'https://github.com/bobziroll/scrimba-react-bootcamp-images/blob/master/pic17.jpg?raw=true', id: '17', isFavorite: false},{url: 'https://github.com/bobziroll/scrimba-react-bootcamp-images/blob/master/pic18.jpg?raw=true', id: '18', isFavorite: false},{url: 'https://github.com/bobziroll/scrimba-react-bootcamp-images/blob/master/pic19.jpg?raw=true', id: '19', isFavorite: false},{url: 'https://github.com/bobziroll/scrimba-react-bootcamp-images/blob/master/pic20.jpg?raw=true', id: '20', isFavorite: false},{url: 'https://github.com/bobziroll/scrimba-react-bootcamp-images/blob/master/pic21.jpg?raw=true', id: '21', isFavorite: false},{url: 'https://github.com/bobziroll/scrimba-react-bootcamp-images/blob/master/pic22.jpg?raw=true', id: '22', isFavorite: false},{url: 'https://github.com/bobziroll/scrimba-react-bootcamp-images/blob/master/pic23.jpg?raw=true', id: '23', isFavorite: false}]

使用:

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

or:

clonedArray = nodesArray.map(a => {return {...a}})

map/spread方法每次传递花费0.000466毫秒，JSON。解析和JSON。Stringify 0.014771毫秒每传递

浅拷贝的问题是所有对象都没有被克隆。虽然对每个对象的引用在每个数组中都是唯一的，但一旦最终获取到它，您将处理与以前相同的对象。你克隆它的方式没有问题…使用Array.slice()也会得到相同的结果。

深层复制出现问题的原因是您最终得到了循环对象引用。深度会尽可能地深，如果你有一个圈，它会无限延伸，直到浏览器昏厥。

如果数据结构不能表示为有向无环图，那么我不确定您是否能够找到用于深度克隆的通用方法。循环图提供了许多棘手的极端情况，由于这不是一个常见的操作，我怀疑是否有人编写了一个完整的解决方案(如果有可能的话——可能没有!)但是我现在没有时间来写一个严格的证明)。我在这个页面上找到了一些关于这个问题的很好的评论。

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

在第一轮中，克隆数组中不引用其他对象的所有对象。记录每个物体的起源。 在第二轮，把这些物体连在一起。

我们可以发明一个简单的递归数组方法来克隆多维数组。虽然嵌套数组中的对象保持对源数组中相应对象的引用，但数组不会。

Array.prototype.clone = function(){ 返回。map(e => Array.isArray(e) ?e.clone(): e); }; var arr =[1、2、3、4(1、2(1、2、3),4、5],6], BRR = arr.clone(); Brr [4][2][1] = " 2 "; console.log (JSON.stringify (arr)); console.log (JSON.stringify (brr));

在JavaScript中，数组和对象复制会改变原始值，因此深度复制是解决这个问题的解决方案。

深度复制实际上意味着创建一个新数组并复制值，因为无论它发生什么都不会影响原始数组。

JSON。解析和JSON。Stringify是深度复制的最佳和简单的方法。JSON.stringify()方法将JavaScript值转换为JSON字符串。JSON.parse()方法解析JSON字符串，构造由字符串描述的JavaScript值或对象。

深克隆

let a = [{ x:{z:1} , y: 2}];
let b = JSON.parse(JSON.stringify(a));
b[0].x.z=0

console.log(JSON.stringify(a)); //[{"x":{"z":1},"y":2}]
console.log(JSON.stringify(b)); // [{"x":{"z":0},"y":2}]

更多细节:阅读这里

在2022年，我们可以使用structuredClone进行深度复制。

structuredClone(数组)

欲了解更多详情，请点击这里

这对我来说很管用:

var clonedArray = $.map(originalArray, function (obj) {
                      return $.extend({}, obj);
                  });

如果你需要数组中对象的深度拷贝:

var clonedArray = $.map(originalArray, function (obj) {
                      return $.extend(true, {}, obj);
                  });