当前位置: 首页 > Web前端 > HTML5

浅谈JavaScript的深拷贝和浅拷贝

时间:2023-04-05 16:11:24 HTML5

本文收录于github和掘金。掘金:https://juejin.im/post/5da5bc...github:https://github.com/Michael-lz...深拷贝深拷贝拷贝变量值,递归对于非基本类型的变量后到达基本类型变量,再次复制。深拷贝后的对象与原对象完全隔离,互不影响。对一个对象的修改不会影响另一个对象。浅拷贝浅拷贝会依次拷贝对象的每一个属性,但是当对象的属性值是引用类型时,真正拷贝的是它的引用,当引用指向的值发生变化时,它也会发生变化.浅拷贝和深拷贝的区别仅在于引用数据类型。1.浅拷贝只复制对象的指针,不复制对象本身。旧对象和新对象仍然共享相同的内存;2.深拷贝会创建另一个完全相同的对象,不与原对象共享内存。修改新的对象并不会改变为原来的对象;3、区别:浅拷贝只拷贝对象的一级属性,深拷贝可以递归拷贝对象的属性。letobj={name:'Yvette',age:18,hobbies:['reading','photography']}letobj1=objletobj2=Object.assign({},obj)letobj3=JSON.parse(JSON.stringify(obj))obj.name='Jack'obj.hobbies.push('coding')console.log(obj)//{name:'Jack',age:18,hobbies:['阅读','摄影','coding']}console.log(obj1)//{name:'Jack',age:18,hobbies:['reading','photography','coding']}console.log(obj2)//{name:'Yvette',age:18,hobbies:['reading','photography','coding']}console.log(obj3)//{name:'Yvette',age:18,hobbies:['reading','photography']}从上面的例子可以看出,当数据为引用数据类型1时,直接赋值属于浅拷贝2,Object.assign,当第一层数据为基础数据时类型,新对象和原对象互不影响,但是如果第一层的属性值是复杂数据类型,那么新对象的属性值和原对象指向同一个内存地址。3.JSON.parse(JSON.stringify(obj))可以实现深拷贝。1.JSON.parse(JSON.stringify(obj))但是有一些缺陷。当对象的属性值为函数时,不能复制。无法复制原型链上的属性,无法正确处理Date。RegExp类型的数据将忽略undefined2。实现一个deepClone函数。如果是基本数据类型,直接返回。如果是RegExp或Date类型,则返回对应的类型。如果是复杂数据类型,递归。考虑循环引用的问题===null||typeofobj!=='object'){//如果不是复杂数据类型,直接returnreturnobj}if(hash.has(obj)){returnhash.get(obj)}/***如果obj是一个数组,那么obj.constructor就是[Function:Array]*如果obj是一个对象,那么obj.constructor就是[Function:Object]*/lett=newobj.constructor()hash.set(obj,t)for(letkeyinobj){//递归if(obj.hasOwnProperty(key)){//是否是自己的属性t[key]=deepClone(obj[key],hash)}}返回t}