JS 数组和对象的深拷贝操作示例

让我来详细讲解一下 “JS 数组和对象的深拷贝操作示例”的完整攻略。

什么是深拷贝？

在 JavaScript 中，对象和数组是非常常用的数据类型，而涉及到对象和数组的拷贝时，我们通常有两种方式，分别是浅拷贝和深拷贝。

浅拷贝指的是将原对象的引用赋值给目标对象，即两个对象指向同一个内存地址，所以修改一个对象会影响到另一个对象。而深拷贝则是将原对象完全复制一份，生成一个新的对象，在内存中分别占用不同的地址。深拷贝目标对象与原对象完全独立，修改目标对象不会对原对象造成任何影响。

如何进行深拷贝操作？

方法一：使用 JSON.parse 和 JSON.stringify 进行深拷贝

这是一种常见的深拷贝方式，首先通过 JSON.stringify() 将原对象转成 JSON 格式的字符串，再通过 JSON.parse() 将这个字符串转成新的对象，从而完成深拷贝。

以下是一个示例代码：

const sourceObj = { a: 1, b: 2, c: [3, 4, 5] };
const targetObj = JSON.parse(JSON.stringify(sourceObj));

// 修改 targetObj，不会影响到 sourceObj
targetObj.c.push(6);
console.log(sourceObj); // { a: 1, b: 2, c: [3, 4, 5] }
console.log(targetObj); // { a: 1, b: 2, c: [3, 4, 5, 6] }

需要注意的是，该方法存在一些局限性：

• 如果原对象中有函数或者 Symbol 类型的属性，无法通过这种方式进行拷贝
• 如果原对象中存在循环引用的情况，也无法通过这种方式进行拷贝

方法二：使用递归进行深拷贝

递归是一种常见的深拷贝方式，思路是遍历原对象的属性并将其复制到新的对象中，同时判断该属性是否为对象或数组，如果是则继续递归处理。

以下是一个示例代码：

function deepCopy(sourceObj) {
  // 判断 sourceObj 是否为对象或数组
  if (typeof sourceObj !== 'object' || sourceObj === null) {
    return sourceObj;
  }

  const targetObj = Array.isArray(sourceObj) ? [] : {};

  // 遍历 sourceObj 的属性并递归进行深拷贝
  for (const key in sourceObj) {
    targetObj[key] = deepCopy(sourceObj[key]);
  }

  return targetObj;
}

const sourceObj = { a: 1, b: { c: 2 }, d: [3, 4, 5] };
const targetObj = deepCopy(sourceObj);

// 修改 targetObj，不会影响到 sourceObj
targetObj.d.push(6);
console.log(sourceObj); // { a: 1, b: { c: 2 }, d: [3, 4, 5] }
console.log(targetObj); // { a: 1, b: { c: 2 }, d: [3, 4, 5, 6] }

需要注意的是，该方法也存在一些局限性：

• 如果原对象中有函数或者 Symbol 类型的属性，需要特殊处理
• 如果原对象中存在循环引用的情况，需要特殊处理

总结

本文主要介绍了如何进行 JS 数组和对象的深拷贝操作，包括使用 JSON.parse 和 JSON.stringify 方法以及使用递归进行深拷贝。需要注意的是，以上两种方法都存在一些局限性，具体情况需要根据实际需求进行选择。