揭秘JavaScript深浅拷贝的世界，玩转复制技巧

前端

2023-01-09 14:16:33

深拷贝与浅拷贝：掌握克隆对象的艺术

在 JavaScript 的世界中，对象和数组是至关重要的，它们允许我们存储和操纵复杂的数据结构。然而，当涉及到对象和数组的复制时，浅拷贝和深拷贝之间存在着微妙的区别，这对于编写健壮且可维护的代码至关重要。

浅拷贝：浅尝辄止的复制

浅拷贝只是复制一个对象的引用，这意味着它创建了一个指向原始对象的指针。当您对浅拷贝进行修改时，原始对象也会随之改变，因为它们本质上是同一对象。浅拷贝可以用简单的赋值操作符 = 来实现。

深拷贝：彻底的复制

与浅拷贝不同，深拷贝创建一个原始对象的新副本，其属性和值都完全复制。因此，对深拷贝的修改不会影响原始对象。

选择合适的拷贝方式：量身定制的克隆

根据您的具体需求，选择正确的拷贝方式非常重要：

浅拷贝： 当您只想创建原始对象的副本，但不打算修改原始对象时，使用浅拷贝就足够了。
深拷贝： 当您需要创建一个原始对象的独立副本，即使修改该副本也不会影响原始对象时，深拷贝是必不可少的。

手写深拷贝：深入挖掘

虽然 JavaScript 提供了 JSON.parse(JSON.stringify(obj)) 等内置方法来实现深拷贝，但我们也可以手动编写自己的深拷贝函数：

function deepCopy(obj) {
  // 如果 obj 是对象或数组
  if (typeof obj === "object" && obj !== null) {
    // 如果 obj 是数组
    if (Array.isArray(obj)) {
      // 创建一个新数组，遍历原数组的每个元素，并对其进行深拷贝
      const newObj = [];
      for (let i = 0; i < obj.length; i++) {
        newObj[i] = deepCopy(obj[i]);
      }
      return newObj;
    } else {
      // 如果 obj 是对象
      // 创建一个新对象，遍历原对象的每个属性，并对其进行深拷贝
      const newObj = {};
      for (const key in obj) {
        newObj[key] = deepCopy(obj[key]);
      }
      return newObj;
    }
  } else {
    // 如果 obj 是简单值
    // 直接返回 obj
    return obj;
  }
}