前端必备技能：彻底搞懂JavaScript深浅拷贝，告别数据共享的坑！
❤ 写在前面
如果觉得对你有帮助的话，点个小❤❤ 吧，你的支持是对我最大的鼓励~
个人独立开发wx小程序，感谢支持！
开篇故事：为什么我的数据“打架”了？
想象一下这个场景：你在开发一个购物车功能，复制了一个商品对象准备修改数量，结果发现原始商品的数据也变了！这种“灵异事件”让很多前端开发者头疼不已。
letoriginalProduct={name:"JavaScript高级程序设计",price:99,details:{publisher:"人民邮电出版社",pages:728}};// 你以为的“复制”letcopiedProduct=originalProduct;copiedProduct.price=79;// 修改副本的价格console.log(originalProduct.price);// 79？！原对象也被修改了！这就是我们今天要解决的“深浅拷贝”问题！下面，让我们一步步解开这个谜团。
内存模型：理解深浅拷贝的基础
在深入之前，我们先看看JavaScript中数据是如何存储的：
┌─────────────┐ ┌───────────────┐ │ 栈内存 │ │ 堆内存 │ │ (Stack) │ │ (Heap) │ ├─────────────┤ ├───────────────┤ │ 基本类型 │ │ │ │ 变量名|值 │ │ 引用类型 │ │ a -> 10 │ │ 的对象数据 │ │ b -> true │ │ {name: "xxx"}│ │ │ │ [1,2,3] │ │ obj1 -> ↗═══╪══════> {x: 1, y: 2} │ │ obj2 -> ↗═══╪══════> {name: "test"}│ └─────────────┘ └───────────────┘基本类型（Number, String, Boolean等）直接存储在栈内存中，而引用类型（Object, Array等）在栈中只存储地址指针，真正的数据在堆内存中。
深浅拷贝对比流程图
浅拷贝：只挖第一层
浅拷贝就像只复制房子的钥匙，不复制房子里的家具。
常见的浅拷贝方法
方法1：展开运算符（最常用）
letshallowCopy={...originalObject};letshallowCopyArray=[...originalArray];方法2：Object.assign()
letshallowCopy=Object.assign({},originalObject);方法3：数组的slice()和concat()
letshallowCopyArray=originalArray.slice();letanotherCopy=originalArray.concat();浅拷贝的陷阱
letuser={name:"小明",settings:{theme:"dark",notifications:true}};letuserCopy={...user};userCopy.name="小红";// ✅ 不会影响原对象userCopy.settings.theme="light";// ❌ 原对象的theme也被修改了！console.log(user.settings.theme);// "light" 中招了！深拷贝：连根拔起的复制
深拷贝是真正的"克隆"，创建一个完全独立的新对象。
方法1：JSON大法（最简单但有局限）
letdeepCopy=JSON.parse(JSON.stringify(originalObject));注意限制：
- 不能复制函数、undefined、Symbol
- 不能处理循环引用
- Date对象会变成字符串
方法2：手写递归深拷贝函数
functiondeepClone(obj,hash=newWeakMap()){// 处理基本类型和nullif(obj===null||typeofobj!=='object'){returnobj;}// 处理Dateif(objinstanceofDate){returnnewDate(obj);}// 处理数组if(Array.isArray(obj)){returnobj.map(item=>deepClone(item,hash));}// 处理普通对象if(hash.has(obj)){returnhash.get(obj);// 解决循环引用}letcloneObj=Object.create(Object.getPrototypeOf(obj));hash.set(obj,cloneObj);for(letkeyinobj){if(obj.hasOwnProperty(key)){cloneObj[key]=deepClone(obj[key],hash);}}returncloneObj;}// 测试letcomplexObj={name:"测试",date:newDate(),nested:{x:1},arr:[1,2,[3,4]]};complexObj.self=complexObj;// 循环引用letcloned=deepClone(complexObj);console.log(cloned!==complexObj);// trueconsole.log(cloned.nested!==complexObj.nested);// trueconsole.log(cloned.self===cloned);// true，循环引用正确处理方法3：使用现成库
// lodashimport_from'lodash';letdeepCopy=_.cloneDeep(originalObject);// 或者使用structuredClone（现代浏览器原生API）if(typeofstructuredClone==='function'){letdeepCopy=structuredClone(originalObject);}实战场景：什么时候用什么拷贝？
场景1：表单编辑（推荐深拷贝）
// 编辑前深拷贝原始数据leteditData=deepClone(originalData);// 用户随意编辑...editData.user.profile.avatar="new_avatar.jpg";// 点击取消，原始数据完好无损// 点击保存，提交editData场景2：状态管理中的状态更新（浅拷贝足够）
// Redux reducer中的状态更新functionreducer(state=initialState,action){switch(action.type){case'UPDATE_SETTINGS':return{...state,// 浅拷贝settings:{...state.settings,// 嵌套对象也需要展开theme:action.payload}};// ...}}场景3：配置对象合并（浅拷贝+深度合并）
functionmergeConfig(defaultConfig,userConfig){return{...defaultConfig,...userConfig,// 深度合并嵌套对象options:{...defaultConfig.options,...userConfig.options}};}性能考虑：深浅拷贝的选择
| 方法 | 速度 | 内存占用 | 适用场景 |
|---|---|---|---|
| 浅拷贝 | ⚡⚡⚡⚡⚡（快） | 少 | 简单对象，无嵌套修改 |
| JSON深拷贝 | ⚡⚡⚡（中） | 中 | 数据简单，无函数/日期 |
| 递归深拷贝 | ⚡⚡（慢） | 多 | 复杂对象，需要完整复制 |
| structuredClone | ⚡⚡⚡⚡（较快） | 中 | 现代浏览器，需要原生支持 |
总结：拷贝选择速查表
- 只需要复制第一层数据？→ 使用展开运算符
... - 需要完全独立的副本？→ 使用深拷贝
- 数据简单，不含函数/日期？→
JSON.parse(JSON.stringify()) - 需要处理复杂类型和循环引用？→ 手写递归或使用lodash
- 现代浏览器环境？→ 尝试
structuredClone
记住这个黄金法则：当你不知道嵌套属性是否需要独立修改时，选择深拷贝更安全！
互动挑战
试试看你能看出下面代码的输出吗？
letpuzzle={a:1,b:{inner:2},c:[3,4]};letcopy1={...puzzle};letcopy2=JSON.parse(JSON.stringify(puzzle));copy1.b.inner=999;copy1.c.push(888);console.log(puzzle.b.inner);// 是多少？console.log(puzzle.c.length);// 是多少？console.log(copy2.b.inner);// 是多少？答案：第一个是999（浅拷贝共享嵌套对象），第二个是4（数组也被修改了），第三个是2（深拷贝完全独立）。
希望这篇博客能帮你彻底理解JavaScript中的深浅拷贝！下次遇到数据"打架"的情况，你就知道该怎么处理了。