JavaScript 浅拷贝：只复制“第一层”的艺术

JavaScript 浅拷贝只复制“第一层”的艺术 什么是浅拷贝定义浅拷贝是指创建一个新对象这个新对象拥有原对象属性值的精确拷贝。如果属性是基本类型String, Number, Boolean…拷贝的是值。如果属性是引用类型Object, Array…拷贝的是内存地址指针。通俗比喻想象你有一本相册原对象。浅拷贝你复印了相册的封面和目录。对于照片本身你没有重新打印而是把原相册里的照片拿出来放进了新相册。结果如果你在新相册里撕掉一张照片修改引用类型的内部属性原相册里的那张照片也坏了因为它们其实是同一张物理照片。但是如果你给新相册换了一个封面修改第一层基本属性原相册不受影响。 目录️ 图解浅拷贝 vs 深拷贝️ 实现浅拷贝的 4 种主流方法⚠️ 浅拷贝的陷阱什么时候会出问题 总结与选型建议1. ️ 图解浅拷贝 vs 深拷贝假设我们有如下数据结构constoriginal{name:Lingma,// 基本类型info:{// 引用类型age:1,},};✅ 浅拷贝后内存结构Stack (栈) ---------- Heap (堆) | original |----------- ------------------ ---------- | name: Lingma | | info: [Addr A] ---- ------------------ ---------- ------------------ | age: 1 | | copy |----------- ------------------ ------------------ ---------- | name: Lingma | | info: [Addr A] ------^ (指向同一个对象!) ------------------结论original.info和copy.info指向堆中的同一个对象。❌ 深拷贝后内存结构对比参考Stack (栈) ---------- Heap (堆) | original |----------- ------------------ ---------- | name: Lingma | | info: [Addr A] ---- ------------------ ---------- ------------------ | age: 1 | | copy |----------- ------------------ ------------------ ---------- | name: Lingma | | info: [Addr B] ---- ------------------ ------------------ | age: 1 | ------------------结论copy拥有完全独立的内存空间。2. ️ 实现浅拷贝的 4 种主流方法方法一Object.assign()经典常用这是 ES6 之前最常用的浅拷贝方法。它将源对象的所有可枚举属性复制到目标对象。constoriginal{a:1,b:{c:2}};constcopyObject.assign({},original);// 测试基本类型copy.a99;console.log(original.a);// 1 ✅ 互不影响// 测试引用类型copy.b.c99;console.log(original.b.c);// 99 原数据被修改注意第一个参数{}是目标对象必须传空对象否则original自身会被修改。方法二展开运算符...现代首选ES6 引入的语法糖代码更简洁可读性更高。constoriginal{a:1,b:{c:2}};constcopy{...original};// 效果同 Object.assigncopy.b.c99;console.log(original.b.c);// 99 对于数组的浅拷贝constarr[1,2,[3,4]];constnewArr[...arr];// 或者constnewArr2arr.slice();// 或者constnewArr3Array.from(arr);方法三Array.prototype.slice()/concat()数组专用在 ES6 之前这是数组浅拷贝的标准做法。constarr[1,2,3];constcopy1arr.slice();constcopy2[].concat(arr);方法四手写浅拷贝函数面试/定制需求如果需要兼容旧环境或处理特殊逻辑可以手写。functionshallowClone(obj){if(objnull||typeofobj!object){returnobj;}// 判断是数组还是对象constcloneObjArray.isArray(obj)?[]:{};for(letkeyinobj){if(obj.hasOwnProperty(key)){cloneObj[key]obj[key];// 直接赋值引用类型拷贝地址}}returncloneObj;}3. ⚠️ 浅拷贝的陷阱什么时候会出问题浅拷贝最大的风险在于嵌套对象。❌ 事故现场constuser{name:Lingma,settings:{theme:dark,notifications:true,},};// 浅拷贝constnewUser{...user};// 用户修改设置newUser.settings.themelight;console.log(user.settings.theme);// light // 糟糕原用户的设置也被改了✅ 如何避免如果只有一层嵌套使用浅拷贝完全没问题性能最好。如果有多层嵌套使用深拷贝structuredClone,JSON.parse/stringify, LodashcloneDeep。或者使用不可变数据库如 Immer, Immutable.js它们通过结构共享实现了高效的“看似可变实则不可变”。4. 总结与选型建议方法适用场景优点缺点{ ...obj }对象浅拷贝语法简洁现代标准仅浅拷贝兼容性需 babelObject.assign对象浅拷贝/合并兼容性好可合并多个对象语法稍啰嗦[...arr]数组浅拷贝简洁速度快仅适用于数组/可迭代对象arr.slice()数组浅拷贝经典写法兼容 IE语义不如展开运算符清晰 博主寄语浅拷贝不是“低级”的拷贝而是高性能的拷贝。在 React/Vue 的状态管理中如果状态层级不深浅拷贝配合不可变思维Immutability是最佳实践。记住原则一层用浅多层用深。数组展开最香对象合并 assign。引用类型要小心修改之前想清楚。希望这篇文档能帮你彻底掌握浅拷贝如果有疑问欢迎在评论区留言。喜欢这篇文章吗记得点赞、收藏、转发哦❤️