剖析深度复制：如何优雅地复制数组中的对象

javascript

2024-03-24 17:01:36

深入浅出：复制数组中对象的艺术

简介

在 JavaScript 的世界中，我们经常需要处理包含对象引用的数组。然而，简单地复制数组并不能复制对象的引用，这可能导致意外的问题。为了解决这个问题，我们需要深入了解数组复制的艺术——深度复制。

基本复制 vs. 深度复制

基本复制 只会复制对象的表面属性，而深度复制 会创建新对象的副本，包括对原始对象的所有引用的副本。深度复制对于修改数组中对象的引用而不影响原始数组至关重要。

实现深度复制的方法

jQuery.extend()

jQuery 提供了一个方便的 jQuery.extend() 方法进行深度复制。语法如下：

var clonedNodesArray = jQuery.extend(true, {}, nodesArray);

JSON.parse() 和 JSON.stringify()

另一种方法是使用 JSON.parse() 和 JSON.stringify() 函数。通过将数组转换为 JSON 字符串，然后使用 JSON.parse() 将其转换回对象，我们可以创建一个包含对象引用的副本。

var clonedNodesArray = JSON.parse(JSON.stringify(nodesArray));

手动深度复制

对于更复杂的对象结构，我们可以使用手动深度复制函数。该函数递归遍历原始对象，为每个对象及其所有引用创建副本。

实际应用

让我们通过一个示例来说明深度复制的重要性：

const originalArray = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' }
];

const basicCopy = originalArray.slice();
basicCopy[0].name = 'Jack';

console.log(originalArray); // [{ id: 1, name: 'Jack' }, { id: 2, name: 'Jane' }]

基本复制未能创建对象引用的副本，导致修改 basicCopy 中的对象引用也会修改原始数组中的对象引用。

相比之下，深度复制：

const deepCopy = JSON.parse(JSON.stringify(originalArray));
deepCopy[0].name = 'Jack';

console.log(originalArray); // [{ id: 1, name: 'John' }, { id: 2, name: 'Jane' }]

不会修改原始数组，因为深度复制创建了独立于原始数组的对象副本。