企业官网建设流程全解析

昆明网站建设王道下拉棒,网站开发如何适应各分辨率,无锡seo,高端企业网站建设注意问题欢迎使用我的小程序#x1f447;#x1f447;#x1f447;#x1f447; 俱好用助手功能介绍 #x1f4da; 拷贝不只是复制粘贴 想象一下#xff0c;你有一本心爱的精装书#xff0c;朋友想借去阅读。你有两个选择#xff1a; 直接给朋友 - 但书就不在你手上了#…欢迎使用我的小程序 俱好用助手功能介绍 拷贝不只是复制粘贴想象一下你有一本心爱的精装书朋友想借去阅读。你有两个选择直接给朋友- 但书就不在你手上了原始引用去复印店复印一本- 朋友有自己的副本你的原版还在在JavaScript的世界里拷贝数据就像这个场景但有更多的“套娃”情况 浅拷贝只搬家的“表面朋友”浅拷贝就像只搬走了家具但墙上还挂着原房子的钥匙// 原始对象 - 一个“套娃”对象constoriginal{name:小明,age:25,hobbies:[编程,游戏,阅读],// 注意这个数组address:{city:北京,district:海淀区}};// 浅拷贝的几种方式constshallowCopy1Object.assign({},original);constshallowCopy2{...original};// 扩展运算符constshallowCopy3original.slice?.();// 数组专用// 试试修改会发生什么shallowCopy1.name小红;// ✅ 不会影响originalshallowCopy1.hobbies.push(摄影);// ⚠️ 糟糕original的hobbies也被改了浅拷贝的特点只复制第一层属性嵌套对象/数组仍然是“共享”的引用像只换了外壳芯子还是同一个 深拷贝真正的“独立门户”深拷贝就像带着所有家当搬到了全新的房子// 深拷贝实现方式大比拼// 方法1JSON大法最简单但有局限constdeepCopy1JSON.parse(JSON.stringify(original));// 方法2递归实现自己动手丰衣足食functiondeepClone(obj){if(objnull||typeofobj!object)returnobj;if(objinstanceofDate)returnnewDate(obj);if(objinstanceofRegExp)returnnewRegExp(obj);constcloneArray.isArray(obj)?[]:{};for(letkeyinobj){if(obj.hasOwnProperty(key)){clone[key]deepClone(obj[key]);}}returnclone;}constdeepCopy2deepClone(original);// 方法3使用现成库最省心// const deepCopy3 _.cloneDeep(original); // Lodash// const deepCopy4 structuredClone(original); // 现代JS原生API现在无论怎么修改deepCopy都不会影响original了 什么时候用什么浅拷贝适用场景// 场景1配置合并constdefaultConfig{theme:light,showTips:true};constuserConfig{theme:dark};constfinalConfig{...defaultConfig,...userConfig};// 场景2创建对象副本进行简单修改constuser{name:张三,loggedIn:false};constupdatedUser{...user,loggedIn:true};深拷贝适用场景// 场景1状态管理如Redux reducerfunctionreducer(state,action){switch(action.type){caseUPDATE_USER:return{...state,user:deepClone(action.payload)// 确保完全独立};}}// 场景2表单数据的初始副本constinitialFormDatadeepClone(templateData);constformDatadeepClone(initialFormData);// 每次都是新的开始 趣味实验拷贝的陷阱// 陷阱1循环引用自己引用自己constnarcissist{name:自恋对象};narcissist.selfnarcissist;// 我引用我自己// JSON大法会报错// JSON.parse(JSON.stringify(narcissist)); // TypeError!// 陷阱2特殊对象constspecialObj{date:newDate(),regex:/hello/gi,func:function(){returnHi;},undefined:undefined,infinity:Infinity,nan:NaN};console.log(JSON.parse(JSON.stringify(specialObj)));// 函数、undefined不见了日期变成了字符串... 性能对比速度与深度的博弈方法速度深度特殊类型支持循环引用支持扩展运算符...⚡⚡⚡⚡⚡浅有限❌Object.assign()⚡⚡⚡⚡⚡浅有限❌JSON方法⚡⚡⚡深差❌递归实现⚡⚡深好❌Lodash的cloneDeep⚡⚡深很好✅structuredClone()⚡⚡⚡深较好✅ 实用小贴士“先问要不要再问怎么做”- 先确定是否需要深拷贝很多情况浅拷贝就够用了现代JS的救星// 浏览器和Node.js的新宠constclonedstructuredClone(original);// 支持大部分类型Lodash是你的好朋友import{cloneDeep}fromlodash-es;// 按需引入// 或者用 throttle 的深拷贝函数性能提示对于超大对象考虑是否需要整个拷贝也许只需修改部分 实战演练拷贝在真实场景的应用// 购物车场景constshoppingCart{items:[{id:1,name:JavaScript高级编程,quantity:1,price:99},{id:2,name:TypeScript入门,quantity:2,price:79}],discount:0.1,getTotal(){returnthis.items.reduce((sum,item)sumitem.price*item.quantity,0)*(1-this.discount);}};// 用户想“如果这样买”的试算功能functionwhatIfAddItem(cart,newItem){consthypotheticalCartdeepClone(cart);hypotheticalCart.items.push(newItem);returnhypotheticalCart.getTotal();}// 真实的购物车不受影响console.log(shoppingCart.items.length);// 还是2个 总结拷贝选择指南“我只想改改表面”→ 用浅拷贝...或Object.assign“我要完全独立的新对象”→ 用深拷贝“我有特殊类型或循环引用”→ 用structuredClone()或Lodash“不确定深浅”→ 问问自己嵌套对象需要独立吗记住在JavaScript的世界里“拷贝”不是简单的复制粘贴而是关于“独立性”的哲学选择。选择正确的拷贝方式能让你的代码更健壮、更可预测下次当你面对需要拷贝的场景时不妨先想想这是一个需要独立门户的深拷贝还是一个可以共享芯子的浅拷贝✨小测验你能看出下面代码的输出吗constobj{a:1,b:{c:2}};constshallow{...obj};constdeepJSON.parse(JSON.stringify(obj));shallow.b.c999;deep.b.c888;console.log(obj.b.c);// 是多少答案999因为浅拷贝共享了嵌套对象