【面试题】 JavaScript 中的深浅拷贝: 原理与实现

  在开发过程中，我们经常会遇到需要复制一个对象或数组的情况。在 JavaScript 中，我们可以使用浅拷贝或深拷贝来实现复制功能。浅拷贝只会复制对象或数组的第一层属性，如果属性的值还是对象或数组，那么它们之间的引用关系并不会改变。相反，深拷贝会完全复制对象或数组的所有属性，并创建新的引用关系。
  在什么情况下需要使用深拷贝呢？通常来说，当我们希望对象或数组的改变不影响原对象或数组时，就需要使用深拷贝。例如，我们可能希望在处理数据的过程中保留原始数据的副本，或者在修改一个对象的属性时不影响原对象。在本文中，我们将介绍 JavaScript 中的深拷贝方法，并给出使用深拷贝的示例代码。
复制代码

  在 JavaScript 中，对象和数组都是引用类型，它们的值是存储在内存中的地址，而不是实际的值。当我们复制一个对象或数组时，如果我们只是复制它们的地址，那么原来的对象或数组和新的对象或数组都指向同一个地址，对其中一个对象或数组的修改会影响另一个对象或数组。这种复制方式称为浅拷贝。为了避免这种情况，我们需要进行深拷贝，即复制对象或数组的值，而不是复制地址。
复制代码

 深拷贝的方法有很多种，常见的方法包括使用 `JSON.parse` 和 `JSON.stringify`、使用递归算法、使用 lodash 等。
复制代码

const original = { a: 1, b: { c: 2 } };
// 使用 JSON.stringify 将对象转化为字符串，再使用 JSON.parse 将字符串转回对象
const copy = JSON.parse(JSON.stringify(original));
console.log(original === copy); // false
console.log(original.b === copy.b); // false
复制代码

  使用 `JSON.parse` 和 `JSON.stringify` 进行深拷贝也有一些限制，比如不能复制函数、Symbol 等类型的值，也不能正确地复制循环引用的对象。
  因此，在实际应用中，我们还需要考虑使用其他的深拷贝方法来解决这些限制,例如递归算法实现深拷贝,它可以递归地复制对象或数组的值，并判断是否为基本类型（如数字、字符串、布尔值等），如果是基本类型就直接返回，否则就继续递归复制。
复制代码

function deepCopy(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }
  // 判断是数组还是对象
  const isArray = Array.isArray(obj);
  const copy = isArray ? [] : {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = deepCopy(obj[key]);
    }
  }
  return copy;
}
const original = { a: 1, b: { c: 2 } };
const copy = deepCopy(original);
console.log(original === copy); // false
console.log(original.b === copy.b); // false
复制代码

1.   与深拷贝相比，浅拷贝的实现方法要简单得多，但是它的功能也相对较弱。如果我们希望复制对象或数组的所有属性，并创建新的引用关系，还是需要使用深拷贝,但是在某些情况下，我们可能希望使用浅拷贝。
2. 复制代码

function shallowClone(obj) {
  return {...obj};
}
复制代码

function shallowClone(obj) {
  return Object.assign({}, obj);
}
复制代码

function shallowClone(obj) {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }
  let clone = new obj.constructor();
  for (let key in obj) {
    clone[key] = obj[key];
  }
  return clone;
}
let obj = {a: 1, b: 2, c: [3, 4, 5]};
let shallow = shallowClone(obj);
console.log(shallow); // {a: 1, b: 2, c: [3, 4, 5]}
复制代码

最后，在使用深浅拷贝时，我们要根据实际的需求来决定使用哪种方法，并确保复制的对象或数组能够满足我们的需求。
复制代码