手撕面试题：深拷贝对象，无视陷阱！

前端

2023-12-03 06:08:59

深度剖析 JavaScript 深拷贝：应对面试挑战

揭秘深拷贝的本质

在 JavaScript 的领域中，对象作为非基本数据类型，其值通过引用传递。这种机制意味着当我们对对象进行赋值时，实际上只是复制了对象的引用，而非实际数据。这意味着对副本进行的任何修改都会影响到原始对象，这在某些情况下可能是不可取的。

深拷贝应运而生，它旨在解决引用传递的局限性，创建一个新的对象，并逐一复制其属性的值，形成一个独立的对象。通过深拷贝，即使对副本进行修改，也不会影响原始对象，确保了数据的完整性和独立性。

常见陷阱：绕过深拷贝的障碍

虽然深拷贝是一个强大的工具，但存在一些常见的陷阱，可能会导致我们陷入困境：

忽略循环引用： 循环引用是指对象之间互相引用，形成环形结构。在深拷贝过程中，如果不考虑循环引用，可能会陷入无限递归，导致栈溢出。
忽略函数、正则和日期： 函数、正则表达式和日期对象在 JavaScript 中属于特殊对象，其值不能直接复制。需要使用特殊的方法来处理这些类型的数据。
忽略 Symbol 属性： ES6 引入了 Symbol 类型，其属性不会出现在for...in或Object.keys()中。在深拷贝时，需要使用Object.getOwnPropertySymbols()来获取并复制 Symbol 属性。

深度优先搜索算法：突破深拷贝的藩篱

为了解决上述陷阱，我们可以使用深度优先搜索算法来实现深拷贝。该算法通过递归遍历对象，逐层复制属性值，直到达到叶节点。

代码示例：揭开深拷贝的面纱

function deepCopy(obj) {
  if (obj === null || typeof obj !== "object") {
    return obj;
  }

  const result = Array.isArray(obj) ? [] : {};

  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      if (typeof obj[key] === "object" && obj[key] !== null) {
        result[key] = deepCopy(obj[key]);
      } else {
        result[key] = obj[key];
      }
    }
  }

  // 处理循环引用
  const visited = new Set();
  return deepCopyWithVisited(result, visited);
}

function deepCopyWithVisited(obj, visited) {
  if (visited.has(obj)) {
    return obj;
  }

  visited.add(obj);

  if (obj === null || typeof obj !== "object") {
    return obj;
  }

  const result = Array.isArray(obj) ? [] : {};

  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      if (typeof obj[key] === "object" && obj[key] !== null) {
        result[key] = deepCopyWithVisited(obj[key], visited);
      } else {
        result[key] = obj[key];
      }
    }
  }

  return result;
}

使用指南：熟练运用深拷贝

在实际应用中，我们可以使用deepCopy()函数来轻松地实现对象深拷贝。以下是一个示例：

const originalObj = {
  name: "John",
  age: 30,
  friends: ["Alice", "Bob"],
  address: {
    street: "Main Street",
    number: 123,
  },
  // 循环引用
  self: originalObj,
};

const copyObj = deepCopy(originalObj);

copyObj.name = "Jane";
copyObj.address.number = 456;

console.log(originalObj); // { name: "John", age: 30, friends: [ 'Alice', 'Bob' ], address: { street: 'Main Street', number: 456 }, self: [Circular] }
console.log(copyObj); // { name: 'Jane', age: 30, friends: [ 'Alice', 'Bob' ], address: { street: 'Main Street', number: 456 }, self: [Circular] }