前端每日一练：js中的深拷贝有哪些方法？什么是循环引用？深拷贝如何处理循环引用问题

在JavaScript中，深拷贝是一种创建目标对象的完全独立副本，而不是仅复制原始对象的引用的操作。深拷贝通常用于确保两个对象之间的完全独立性，以防止在一个对象上的更改影响另一个对象。然而，深拷贝也会面临循环引用的问题，即对象之间相互引用形成闭环，导致深拷贝陷入无限循环。以下是深拷贝问题及循环引用问题的处理方法：

深拷贝问题

1. 基本的深拷贝方法

可以使用 JSON 对象提供的 JSON.parse(JSON.stringify(obj)) 方法进行简单的深拷贝。这种方法适用于大多数简单的对象，但有一些情况下它不适用，比如无法拷贝函数、正则表达式、undefined 等。

const originalObj = { key: 'value', nested: { innerKey: 'innerValue' } };
const deepCopyObj = JSON.parse(JSON.stringify(originalObj));

2. 自定义深拷贝函数

编写自定义深拷贝函数，递归遍历对象的每个属性，并进行拷贝。这种方法需要考虑复杂的数据类型，如函数、正则表达式等。

function deepCopy(obj) {
    if (obj === null || typeof obj !== 'object') return obj;
    if ([Date, RegExp].includes(obj.constructor)) return new obj.constructor(obj)
    const copy = Array.isArray(obj) ? [] : {};
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            copy[key] = deepCopy(obj[key]);
        }
    }
    return copy;
}

 循环引用

循环引用指的是在对象之间存在相互引用的关系，形成一个闭环。具体来说，对象 A 包含一个指向对象 B 的引用，而对象 B 同时包含一个指向对象 A 的引用，这样就形成了一个循环引用。例如：

const objectA = {};
const objectB = {};

objectA.reference = objectB;
objectB.reference = objectA;

在这个例子中，objectA 和 objectB 彼此之间形成了一个循环引用，因为它们相互引用对方。

循环引用可能导致以下问题：

1. 无限递归： 在深度优先或广度优先的深拷贝过程中，如果存在循环引用，可能导致递归无限循环，占用大量内存，并最终导致堆栈溢出。

2. 性能问题： 循环引用可能导致深拷贝算法的性能问题。每次深拷贝到一个对象时，需要检查是否已经拷贝过该对象，以避免无限递归。这样的检查可能会导致性能下降，尤其是在处理大型对象图时。

3. 数据一致性问题： 如果深拷贝不正确地处理循环引用，可能导致拷贝后的数据失去一致性，即拷贝结果与原始对象之间存在差异。

4. 堆栈溢出： 在深拷贝的过程中，由于循环引用导致的递归调用可能会消耗堆栈空间，最终导致堆栈溢出错误。

为了避免这些问题，深拷贝算法通常需要检测和处理循环引用，确保拷贝过程不会陷入无限递归，同时保持数据一致性。在实现深拷贝时，需要考虑如何处理循环引用，以提高性能和确保正确性。

循环引用问题及处理方法

1. 标记已拷贝对象

通过在拷贝过程中标记已拷贝的对象，防止循环引用。

function deepCopyWithCircularReference(obj, cache = new WeakMap()) {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }

  if (cache.has(obj)) {
    return cache.get(obj);
  }

  if (obj instanceof Date) {
    return new Date(obj);
  }

  if (obj instanceof RegExp) {
    return new RegExp(obj);
  }

  const copy = Array.isArray(obj) ? [] : {};
  cache.set(obj, copy);

  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = deepCopyWithCircularReference(obj[key], cache);
    }
  }

  return copy;
}

2. 使用第三方库

使用第三方库，如 lodash 的 cloneDeep 方法，它已经处理了循环引用的情况。

const _ = require('lodash');

const originalObj = { key: 'value', nested: { innerKey: 'innerValue' } };
const deepCopyObj = _.cloneDeep(originalObj);

注意：深拷贝和循环引用问题的处理需要根据具体情况选择合适的方法。在一些复杂的应用中，可能需要结合多种方法来处理不同的情况。