无需递归也能惊艳面试官的 JavaScript 对象深拷贝方法

前端

2023-12-24 23:04:51

引言

在 JavaScript 中，对象深拷贝是一种非常常见的操作，它可以将一个对象的所有属性和值复制到另一个新的对象中，而不会影响到原对象。对象深拷贝通常用于以下场景：

将对象作为参数传递给函数时，避免对原对象造成影响。
将对象存储在数据库或其他持久化存储中时，需要一份独立的副本。
对对象进行修改或操作时，需要一份原始对象的副本作为备份。

传统递归深拷贝方法

传统上，JavaScript 中的对象深拷贝可以通过递归的方式实现。这种方法的基本思路是：

如果对象是基本类型（例如字符串、数字、布尔值等），则直接返回该值。
如果对象是引用类型（例如数组、对象等），则遍历对象的属性，并对每个属性的值进行递归深拷贝。
将所有属性的值深拷贝完成后，返回一个新的对象，并将所有属性的值复制到该对象中。

这种递归深拷贝方法虽然简单易懂，但在某些情况下可能会存在性能问题。例如，当对象非常庞大或者存在循环引用时，递归深拷贝可能会导致栈溢出或内存泄漏等问题。

非递归深拷贝方法

为了解决传统递归深拷贝方法的性能问题，我们可以使用一种非递归的深拷贝方法。这种方法的基本思路是：

使用 JSON.stringify() 方法将对象转换成 JSON 字符串。
使用 JSON.parse() 方法将 JSON 字符串解析成一个新的对象。

这种非递归深拷贝方法非常简单，而且性能优异。它不会导致栈溢出或内存泄漏等问题，即使对于非常庞大的对象或存在循环引用的对象，它也能正常工作。

处理循环引用

循环引用是指对象中存在一个属性的值指向该对象本身的情况。例如，以下对象存在一个循环引用：

const obj = {
  name: '张三',
  age: 20,
  children: [
    {
      name: '李四',
      age: 10,
      parent: obj // 循环引用
    }
  ]
};

如果使用传统递归深拷贝方法对该对象进行深拷贝，则会导致栈溢出。这是因为递归深拷贝方法在遍历对象的属性时，会不断地遇到循环引用，从而导致栈空间被不断占用，最终导致栈溢出。

为了处理循环引用，我们可以使用 WeakMap 数据结构。WeakMap 是一种特殊的映射数据结构，它可以将键值对存储在内存中，但不会阻止键或值被垃圾回收器回收。这使得 WeakMap 非常适合用于处理循环引用问题。

我们可以使用以下代码来处理循环引用：

const weakMap = new WeakMap();

function deepCopy(obj) {
  if (typeof obj === 'object' && obj !== null) {
    if (weakMap.has(obj)) {
      return weakMap.get(obj);
    }
    weakMap.set(obj, obj); // 将对象存储在 WeakMap 中

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

    for (const key in obj) {
      if (Object.prototype.hasOwnProperty.call(obj, key)) {
        newObj[key] = deepCopy(obj[key]);
      }
    }

    return newObj;
  } else {
    return obj;
  }
}

在上述代码中，我们首先使用 WeakMap 来存储已经遍历过的对象。然后，我们使用 Array.isArray() 方法来判断对象是否为数组。如果是数组，则创建一个新的空数组。如果不是数组，则创建一个新的空对象。接下来，我们使用 for...in 循环遍历对象的属性，并对每个属性的值进行递归深拷贝。最后，我们返回新的对象。