深浅拷贝背后揭秘：JavaScript拷贝原理大揭秘

前端

2023-05-30 02:21:01

浅拷贝与深拷贝：掌握 JavaScript 中的对象复制

在 JavaScript 的世界中，对象复制是一个至关重要的概念，它让我们能够创建对象的副本，而不影响原始对象。理解浅拷贝和深拷贝之间的区别至关重要，因为它们在不同情况下有着不同的应用。

浅拷贝：仅复制对象本身

浅拷贝只复制对象自身的数据，而不复制其引用的其他对象。当一个对象包含对另一个对象的引用时，浅拷贝只会复制该引用，而不是引用对象本身。想象一下浅拷贝就像一张照片，它只捕捉到对象在特定时刻的状态，而不会捕捉到任何变化。

深拷贝：复制对象及其所有引用

深拷贝不仅仅复制对象自身的数据，还复制所有它引用的对象。它采用递归的方式，层层复制，直到所有对象都被复制完毕。与浅拷贝不同，深拷贝就像一场彻底的扫描，它复制对象的每个细节，包括所有层次结构中的引用。

浅拷贝与深拷贝的区别

关键的区别在于浅拷贝只复制对象本身的数据，而深拷贝不仅复制对象本身的数据，还复制所有引用的对象。浅拷贝就像一张快照，只记录当前状态，而深拷贝就像一次彻底的复制，创建了一个与原始对象完全独立的副本。

何时使用浅拷贝和深拷贝

浅拷贝适合不需要复制引用的对象的情况，例如基本数据类型或简单对象。深拷贝则适合需要复制所有引用的对象的情况，例如复杂对象或包含其他对象的数组。浅拷贝效率更高，而深拷贝更彻底。

如何手写浅拷贝和深拷贝

我们可以使用以下函数实现浅拷贝和深拷贝：

// 浅拷贝
function shallowCopy(obj) {
  return Object.assign({}, obj);
}

// 深拷贝
function deepCopy(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }
  if (Array.isArray(obj)) {
    return obj.map(deepCopy);
  }
  const newObj = {};
  for (const key in obj) {
    newObj[key] = deepCopy(obj[key]);
  }
  return newObj;
}