JavaScript 数组的深度复制解析

什么是数组的深度复制？

数组的深度复制是指将一个数组中的所有元素和子数组全部复制，并创建一个全新独立的数组，其中元素或子数组任意一项发生变化，也不会影响原始数组中的元素和子数组。

实现数组的深度复制

在 JavaScript 中，实现数组的深度复制需要借助递归方法来完成。下面是一个常用的代码示例：

function deepCopy(arr) {
  const result = Array.isArray(arr) ? [] : {};
  for (const key in arr) {
    if (Object.prototype.hasOwnProperty.call(arr, key)) {
      const element = arr[key];
      if (typeof element === 'object' && element !== null) {
        result[key] = deepCopy(element);
      } else {
        result[key] = element;
      }
    }
  }
  return result;
}

这个函数中的 deepCopy 函数可以接收一个数组作为参数，并在函数内部创建一个新的数组 result。接着，使用 for...in 循环遍历原始数组中的每个元素或子数组，判断每个元素或子数组是否是对象，并递归调用 deepCopy 函数进行深度复制。最后将新数组 result 返回。

示例说明

示例 1

const arr = [1, 2, [3, 4]];
const newArr = deepCopy(arr);
newArr[2][0] = 5;
console.log(arr); // [1, 2, [3, 4]]
console.log(newArr); // [1, 2, [5, 4]]

代码中定义了一个包含数字和子数组的数组 arr，使用 deepCopy 函数进行深度复制并赋值给新数组 newArr，然后将 newArr 中下标为 2 的子数组中第一个元素赋值为 5。最后，分别输出原始数组 arr 和新数组 newArr 是否被改变。可以看到，原始数组 arr 中的元素并未被改变，而新数组 newArr 中的元素修改成功。

示例 2

const arr = [{ a: 1 }, { b: { c: 2 } }];
const newArr = deepCopy(arr);
newArr[1].b.c = 3;
console.log(arr); // [{ a: 1 }, { b: { c: 2 } }]
console.log(newArr); // [{ a: 1 }, { b: { c: 3 } }]

代码中定义了一个包含对象和子对象的数组 arr，使用 deepCopy 函数进行深度复制并赋值给新数组 newArr，然后将 newArr 中下标为 1 的对象中 b 对象的 c 属性的值赋值为 3。最后，分别输出原始数组 arr 和新数组 newArr 是否被改变。可以看到，原始数组 arr 中的元素并未被改变，而新数组 newArr 中的元素修改成功。

结论

通过以上示例说明，可以看到在 JavaScript 中使用 deepCopy 函数进行数组深度复制，可以有效地保护原始数组中的数据完整性，同时避免因数组的引用传递导致的修改问题。