在了解深拷贝和浅拷贝之前,我们先梳理一下:在JavaScript中,分为基本数据类型(原始值)和复杂类型(对象),它们各自数据类型再细分下,有几种基本的数据类型。数字、字符串、字符串、布尔值、空值、未定义符号、BigInt。基本数据类型存放在内存中,存放在栈中。它很短。当变量用完后,方法执行完就会释放。所以在js中,变量用完之后,基本都是回收的。有一个例外。在闭包的情况下,变量总是存储在内存中。未发布。栈存储具有先进先出和后进先出的特点:1,2,3,4,5,6=>6,5,4,3,2,1引用数据类型date,objectObject,Array,methodFunction,regularregex,collectionwithkey:Maps,Sets,WeakMaps,WeakSets引用数据类型和堆内存的一些关系heap在JavaScript中,不允许直接访问堆内存中的位置,objects不能直接操作Heap内存空间。对象的引用地址存储在栈内存中。在我们日常的编码过程中,在操作对象时,读取的是栈内存中存储的对象的引用地址,而不是堆中的对象。引用类型的值是通过引用访问的。JavaScript中堆内存和栈内存的简单图解示例下面对对象的操作可以参考上图来考虑。让对象上的userInfo={name:"zhangsan",age:"29",say:function(){console.log("hello");},child:[{name:"zhangsan01",},],};对象解构,只能复制一级对象//对象解构...letinfo={...userInfo};info.name="lisi";info.child.name="lisi001";info.say();console.log("userInfo",userInfo);console.log("info",info);userInfo和info中的child.name都改成---->"lisi001"Object.assign()否第一层是深拷贝,第二层属性是浅拷贝letinfo={};Object.assign(info,userInfo);info.name="lisi";info.child.name="lisi001";console.log("userInfo",userInfo);console.log("info",info);JSON.parse(JSON.stringify());对象可以复制,但是当属性为function时,不会复制到新的对象中,所以在日常开发过程中,会涉及到数组对象,使用JSON.parse(JSON.stringify());还是没问题letinfo=JSON.parse(JSON.stringify(userInfo));info.name="lisi";info.child.name="lisi001";console.log("userInfo",userInfo);console.log("info",info);对于in,可以复制第一层,修改第二层,还是用引用地址,前后对象都变了letinfo={};for(letkeyinuserInfo){info[key]=userInfo[key];}info.name="lisi";info.孩子。name="lisi001";console.log("userInfo",userInfo);console.log("info",info);浅拷贝总结上面的浅拷贝方法,有的拷贝只能拷贝第一层,有的可以拷贝多层layers,但是当属性类型是方法时,它仍然是浅拷贝。所以我们在开发的时候需要注意使用浅拷贝。同时,还有复制功能。和regular类似,date等数据类型就不一一列举了。有兴趣的同学可以自己写一些demo来验证更复杂更丰富的数据类型的数据。将所有属性深复制到一个新对象。使用递归遍历遍历每个属性。递归遍历时,针对每个数据类型的处理以及copylodash深拷贝的方法,有兴趣的同学,可以阅读lodash深拷贝的实现源码文档地址:deepcopycloneDeephttps://www.lodashjs.com/docs/lodash。cloneDeep更多的方法要在最后添加当我们对复杂数据类型进行操作时,我们操作的是栈内存Stack的内存地址,指针指向堆内存heap中对象的数据。传入的对象是使用对象文字{}创建的还是由构造函数生成的对象?如果对象是由构造函数创建的,是否复制原型链上的属性如果要复制原型链上的属性,那么如果原型链上有多个同名属性,保留哪个数据类型,属性的数据类型,各自的缺陷,以及适用的业务场景,自己造轮子或者使用原生方法,工具类源码地址码云https://gitee.com/lewyon/vue-notegithubhttps:///github.com/akari16/vue-note文章个人博客地址:javaScript深拷贝与浅拷贝梳理欢迎关注公众号:程序员布欧,时不时更新一些技术文章创作不易,转载请注明转载时注明出处和作者。
