「小墨是前端」专注分享前端技术，推荐优秀的开源项目，展示Github、Gitee上的创意作品，带你深入前端底层，一起成长。

破解JS复制难题：深浅拷贝不再傻傻分不清！

你以为复制粘贴就是简单的Ctrl+C和Ctrl+V？在JavaScript里，对象的复制远比你想象的要复杂！如果操作不当，可能会引发意想不到的bug，让你抓耳挠腮。本期我们就来深入浅出地聊聊JavaScript中的深浅拷贝，让你彻底告别复制粘贴的烦恼，写出更加健壮的代码。

什么是深拷贝和浅拷贝？一分钟快速理解！

想象一下，你有一套乐高积木，你想复制它。

• 浅拷贝: 就像只复制了积木的搭建图，新旧两套积木共用同一堆零件。你修改了其中一套积木，另一套也会跟着改变。
• 深拷贝: 则是将积木的零件也全部复制一份，创造出完全独立的两个积木模型。你修改其中一个，另一个完全不受影响。

在JavaScript中，对象和数组等引用类型的数据存储在堆内存中，变量存储的是指向它们的地址。浅拷贝只复制地址，而深拷贝则复制地址指向的数据。

浅拷贝：省时省力，但暗藏陷阱

浅拷贝就像一个快捷键，可以快速复制对象的第一层属性。它省时省力，但在处理嵌套对象时要格外小心。

• 常见方法： Object.assign({}, obj)、展开运算符({...obj})、Array.prototype.slice()、Array.prototype.concat() 等。

const original = { a: 1, b: { c: 2 } };
const copy = { ...original };
original.b.c = 3;  // 修改原对象嵌套属性
console.log(copy.b.c); // 输出 3，拷贝对象也跟着变了！

• 适用场景: 不包含嵌套对象的简单复制，或者明确需要共享内部数据的场景。

深拷贝：一丝不苟，确保独立性

深拷贝就像一个保险箱，可以保证复制的对象完全独立，互不干扰。它更安全可靠，但性能开销也更大。

• 常用方法:
• JSON.parse(JSON.stringify(obj))：简单粗暴，但无法处理函数、Symbol、循环引用等特殊情况。
• structuredClone(obj)：功能更强大，支持更多数据类型，也能处理循环引用，是ES6的推荐做法。

const original = { a: 1, b: { c: 2 } };
const copy = structuredClone(original);
original.b.c = 3;
console.log(copy.b.c); // 输出 2，拷贝对象不受影响

• 适用场景: 需要完全独立副本的场景，或者处理包含复杂数据类型的对象。

手写深拷贝：提升编程内功

想成为JS高手？那就挑战一下手写深拷贝吧！

function deepClone(obj) {
  if (typeof obj !== "object" || obj === null) return obj;
  const copy = Array.isArray(obj) ? [] : {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = deepClone(obj[key]); // 递归调用
    }
  }
  return copy;
}

这段代码利用递归，实现了对嵌套对象的深度复制，让你对深拷贝的理解更上一层楼。

总结：选择合适的拷贝方式

深浅拷贝没有绝对的好坏，关键在于选择合适的场景。理解它们的区别和应用，才能写出更高效、更安全的JavaScript代码。

创作不易，欢迎大家关注、点赞、收藏、转发！我会继续分享高质量的干货和前沿的技术，给大家提供更多有价值的内容！