如何在 JavaScript 中深度克隆对象数组？

在 JavaScript 中克隆对象数组：深入探索

挑战

创建对象的深层副本在 JavaScript 中，包含对数组中其他对象的引用的对象数组可能是一项复杂的任务。简单地克隆数组只会复制引用，从而导致一个数组中的更改影响另一个数组。

structedClone：一种现代解决方案

深度学习的最新且首选方法在 JavaScript 中克隆数组就是使用 StructuredClone：

array2 = structuredClone(array1);

此功能在现代浏览器中可用（Chrome 98、Firefox 94），但需要一个 polyfill 来实现更广泛的兼容性。

基于 JSON 的深度克隆

为了获得广泛的浏览器支持，可以采用基于 JSON 的技术。

使用 JSON.parse 和JSON.stringify

如果您的对象是 JSON 可序列化的，则可以使用 JSON.parse 和 JSON.stringify 进行深度克隆。然而，这种方法有优点和缺点：

优点

• 克隆数组及其内容。
• 简单的一行解决方案。

缺点

• 仅适用于 JSON 可序列化对象。
• 性能比使用展开慢

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

将 Spread 运算符与 .map 一起使用

对于现代浏览器中的浅克隆，Spread 运算符与 .map 结合使用可以更有效性能：

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

优点

• 比基于 JSON 的克隆更快。
• 适用于所有类型

缺点

• 仅执行浅克隆（克隆对象的第一级）。

基准：传播方法的执行速度明显快于基于 JSON 的克隆对于嵌套深度为 2 的 20 个对象的数组。

以上是如何在 JavaScript 中深度克隆对象数组？的详细内容。更多信息请关注PHP中文网其他相关文章！