副本探索：深度复制指南，揭秘数据独立本质

前端

2023-11-18 11:09:46

浅谈浅拷贝与深拷贝

在 JavaScript 中，我们经常会用到数组和对象。有时我们需要对数组或对象进行复制，以便在不影响原始数据的情况下对副本进行修改。

浅拷贝是指只复制数组或对象本身，而不复制其内部的元素。因此，如果我们对副本进行修改，原始数据也会受到影响。

深拷贝是指不仅复制数组或对象本身，而且还复制其内部的元素。因此，如果我们对副本进行修改，原始数据不会受到影响。

在大多数情况下，浅拷贝就足够了。但是，在某些情况下，我们需要使用深拷贝。例如，当我们想要在不影响原始数据的情况下对数组或对象进行修改时，就需要使用深拷贝。

如何实现深拷贝

在 JavaScript 中，我们可以使用以下方法实现深拷贝：

使用 JSON.parse() 和 JSON.stringify() 方法：

const original = {
  name: 'John',
  age: 30,
  hobbies: ['reading', 'coding', 'gaming']
};

const copy = JSON.parse(JSON.stringify(original));

copy.name = 'Jane';
copy.hobbies.push('cooking');

console.log(original); // { name: 'John', age: 30, hobbies: ['reading', 'coding', 'gaming'] }
console.log(copy); // { name: 'Jane', age: 30, hobbies: ['reading', 'coding', 'gaming', 'cooking'] }

使用递归：

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

  if (Array.isArray(obj)) {
    const copy = [];
    for (let i = 0; i < obj.length; i++) {
      copy.push(deepCopy(obj[i]));
    }
    return copy;
  }

  const copy = {};
  for (const key in obj) {
    copy[key] = deepCopy(obj[key]);
  }

  return copy;
}

处理循环引用

在某些情况下，我们可能会遇到循环引用，即两个或多个对象相互引用。在这种情况下，如果我们使用上述方法进行深拷贝，可能会导致无限循环。

为了处理循环引用，我们可以使用以下方法：

使用 WeakMap：

const weakMap = new WeakMap();

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

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

  if (Array.isArray(obj)) {
    const copy = [];
    weakMap.set(obj, copy);
    for (let i = 0; i < obj.length; i++) {
      copy.push(deepCopy(obj[i]));
    }
    return copy;
  }

  const copy = {};
  weakMap.set(obj, copy);
  for (const key in obj) {
    copy[key] = deepCopy(obj[key]);
  }

  return copy;
}

使用 Set：

const set = new Set();

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

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

  if (Array.isArray(obj)) {
    const copy = [];
    set.add(obj, copy);
    for (let i = 0; i < obj.length; i++) {
      copy.push(deepCopy(obj[i]));
    }
    return copy;
  }

  const copy = {};
  set.add(obj, copy);
  for (const key in obj) {
    copy[key] = deepCopy(obj[key]);
  }

  return copy;
}