多维解读JS 深拷贝，抽丝剥茧探本质

前端

2023-11-11 13:28:51

引子：浅拷贝与深拷贝的握手与区别

在JS的广阔天地中，变量的赋值操作可谓司空见惯。然而，当我们赋予变量一个对象时，却鲜有人意识到赋值过程的不同寻常之处。

浅拷贝与深拷贝，宛如形影不离的孪生兄弟，却在赋值的舞台上扮演着截然不同的角色。浅拷贝仅复制对象本身，而深拷贝则复制对象及其所有属性，以全新面貌构建一个独立的对象。

深拷贝的本质：抽丝剥茧，再造对象

深拷贝的精髓在于对对象进行彻底的复制，从表层属性到深层结构，一网打尽。这并非简单地复制对象引用，而是创建全新的对象，并将原有对象的属性值一一映射到新对象中。

如此一来，深拷贝的对象与原有对象之间毫无瓜葛，彼此独立，互不影响。修改深拷贝的对象不会对原有对象产生任何波澜，反之亦然。

实现深拷贝的妙招：巧用递归，逐层复制

实现深拷贝，方法可谓层出不穷，但递归当属其中翘楚。递归的精妙之处在于将其分解为更小的问题，并逐一解决，最终汇聚成完整的解决方案。

针对JS对象，递归可以一层一层地剥离其属性，并对每个属性进行独立的复制。若是遇到嵌套对象，递归会继续深入探索，直至触及最底层的属性。

代码示例：手把手教你深拷贝

// 使用递归实现深拷贝
const deepCopy = (obj) => {
  if (typeof obj !== "object" || obj === null) {
    return obj;
  }

  if (Array.isArray(obj)) {
    return obj.map((item) => deepCopy(item));
  }

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

  return newObj;
};

// 使用JSON解析实现深拷贝
const deepCopyWithJSON = (obj) => {
  return JSON.parse(JSON.stringify(obj));
};