前端:深拷贝的多种方法(超全详解) | 您所在的位置:网站首页 › js中深拷贝的方法有哪些 › 前端:深拷贝的多种方法(超全详解) |
别划走 !走过路过不要错过;错过这个村,我在下一个村等你!坚持每天进步一点点;一天两天可能没发现有效果;但一年365天后你将会感谢今天的自己!!! 今天博主带大家了解一下前端常用的深拷贝方法:(超全详解) 我们先举个例子:说说深拷贝的作用是什么? 一、 JSON.parse(JSON.stringify(xxx)) var p = { "id":"007", "name":"刘德华", "wife":{ "id":"008", "name":"刘德的妻子", "address":{ "city":"北京", "area":"海淀区" } } } let p1 = JSON.parse(JSON.stringify(p)); // 这是第一种方法 p1.name ='周星驰'; console.log(p1.name) // 周星驰 console.log(p.name) // 刘德华 let p2 = p; p2.name ='周星驰'; console.log(p2.name) // 周星驰 console.log(p.name) // 周星驰这里我们就能够很明显的看出如果我们直接用等号赋值的话,我们的源对象里面的属性也会随着我们赋值对象属性改变而改变,这对于我们备份数据来说,这显然是不可取的。 我们用JSON.parse(JSON.stringify(xxx))的话可以实现深拷贝,从而达到我们前端的数据备份,但这个方法使用的时候容易导致一些特殊类型的数据丢失和损坏。 例如:如果obj里有RegExp、Error对象,则序列化的结果将只得到空对象;如果obj里有函数,undefined,则序列化的结果会把函数或 undefined丢失等等。为了能够很好的避免以及面对可能出现的未知可能性,博主带大家拓展一下我们的知识小宝库,所谓学到老;活到老嘛。 二、 . . .xxx(扩展属性) 用这个方法的时候请注意一下博主写的案例;里面有点点需要注意的地方 // 如果需要拷贝对象只有一层 var p = { "id":"007", "name":"刘德华", "wife":'刘德的妻子' }; let p1 ={...p}; p1.name ='周星驰'; console.log(p1.name) // 周星驰 console.log(p.name) // 刘德华 // 如果需要拷贝的对象有两层或者多层 var p = { "id":"007", "name":"刘德华", "wife":{ "id":"008", "name":"刘德的妻子", "address":"北京" } } let p2 ={...p}; p2.name ='周星驰'; p2.wife.name='请注意' console.log(p2.name,p2.wife.name) // 周星驰,请注意 console.log(p.name,p.wife.name) // 刘德华,请注意 // let p2 = {} // for(let key in p){ // p2[key] = {...p[key]} // } // p2.name ='周星驰'; // p2.wife.name='请注意' // console.log(p2.name,p2.wife.name) // 周星驰,请注意 // console.log(p.name,p.wife.name) // 刘德华,刘德的妻子...这个语法是es6的语法糖,如果不是很理解的小伙伴建议百度查询一下学习要与时俱进。案例博主这里只列举了两层,多层的博主这里就没写了,主要目的就是想要大家知道使用这个方法前需要注意的事项,那如果工作中遇到多层的对象拷贝不会了怎么办?别慌往下看,博主会为大家仔细讲解的,等一下看完了博主介绍的其他方法再回来想想,我猜这就不是问题了。 三、Object.assign() // 看过方法二的应该知道,这个方法博主也只列举了单层 var p = { "id":"007", "name":"刘德华", "wife":'刘德的妻子' } let p3 = {}; for(let key in p){ p3 = Object.assign(p3,{[key]:p[key]}) } p3.name ='周星驰'; p3.wife ='请注意' console.log(p3.name,p3.wife) // 周星驰,请注意 console.log(p.name,p.wife) // 刘德华,刘德的妻子这个方法博主只简单列举了一下,如果数据类型是单层嵌套的对象可以拿过去直接用,学到这里我们已经知道了3种可以深拷贝的方法了,但为了保证能够扩展大家的知识库,博主这里在列举一些;创作不易,如果觉得还不错的伙伴们给博主一个支持,点点你们手中的小爱心,祝大家每天开开心心!哈哈哈插曲已过,下面我们精彩继续。 四、$.extend(这个方法需要在 jquery 环境下使用哦) var p = { "id":"007", "name":"刘德华", "wife":'刘德的妻子' } let p4 = $.extend(true,{},p) p4.name ='周星驰'; p4.wife ='请注意' console.log(p4.name,p4.wife) // 周星驰,请注意 console.log(p.name,p.wife) // 刘德华,刘德的妻子方法4我就不做过多的介绍了,下面我们了解一下我们的方法。 五、原生手写拷贝(这里讲到了上面多层对象嵌套的处理方法) var p = { "id":"007", "name":"刘德华", "wife":{ "id":"008", "name":"刘德的妻子", "address":{ "city":"北京", "area":"海淀区" } } } //写函数 function copyObj(obj){ let newObj={}; for(let key in obj){ if(typeof obj[key] =='object'){//如:key是wife,引用类型,那就递归 newObj[key] = copyObj(obj[key]) }else{//基本类型,直接赋值 newObj[key] = obj[key]; } } return newObj; } let p5 = copyObj(p); p5.name = '周星驰'; p5.wife.name ='朱茵' p5.wife.address.city='上海' console.log(p5.name,p5.wife.name,p5.wife.address.city) // 周星驰 朱茵 上海 console.log(p.name,p.wife.name,p.wife.address.city) // 刘德华 刘德的妻子 北京方法五里面的递归方法就是深拷贝重要的实现原理,也是上面多层级嵌套拷贝的重要解决方法,所以其实如果你不是特别喜欢运用简写的话,了解一下方法5的实现逻辑,这样的话下次你对深拷贝的运用就一点问题也没有啦! 前端还有很多深拷贝的方法,就不一 一列举了;相信如果这几种方法都了解了;深拷贝也不算是问题了;快乐的时光总是短暂的,学海无涯!博主在这里预祝小伙伴们 "长风破浪会有时,直挂云帆济沧海" |
CopyRight 2018-2019 实验室设备网 版权所有 |