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

js中的赋值浅拷贝和深拷贝

时间:2023-03-27 14:11:15 JavaScript

前言js数据类型主要分为基本数据类型和引用数据类型。前者包括Number、String等,后者主要是Object,所以下面会针对不同的数据类型进行分析,需要一点js内存知识。下面简单说一下js内存js内存,或者说大部分语言的内存,都分为栈和堆。基本数据类型的变量值分配在栈上,引用数据类型的变量值分配在堆上,栈只存储对象在特定堆中的地址。赋值对于基本数据类型,赋值操作是一个拷贝,即新旧变量不会相互影响。vara=1;varb=a;b=2;console.log(b);//2对于引用数据类型,赋值操作只是在栈上增加一个指向堆中对象的变量,即复制引用地址。新旧变量会相互影响,即如果对象值在新变量上改变,旧变量对应的值也会改变。vara={name:"mike"};varb=a;b.name="jack";console.log(a);//{name:"jack"}浅拷贝对于基本数据类型和集合对象的数据都是拷贝操作,新旧变量不会互相影响。vara={name:"mike"};varb={};b.name=a.name;b.name="jack";console.log(a)//{name:"mike"}但对于对于对象嵌套的数据,浅拷贝只拷贝第一层对象,深层值仍然是拷贝引用地址。vara={name:"mike",language:{first:"english",second:"chinese"}};varb={};b.name=a.name;b.name="jack";b.language=a.language;b.language.first="japanese"console.log(a)//{language:{first:"japanese",second:"chinese"}}js实现浅拷贝,思路:遍历目标对于的每个属性,将属性名称和值分配给一个新变量。如果理解赋值的含义,那么在第四行代码中,当此时target[key]的值为对象时,给新变量赋值,本质上就是复制其中引用数据类型的地址heap,不难理解为什么浅拷贝对于是否是嵌套对象会有不同的结果。functionshallowCopy(target){让结果={};for(constkeyintarget){结果[key]=target[key];}returnresult;}深拷贝深拷贝是一个完整的拷贝,新旧变量之间不会互相影响。参数是否为对象有不同的处理方式。如果是对象,则对对象的每个属性和值进行赋值,然后递归处理;否则直接返回。functionclone(target){if(typeoftarget==="object"){//判断是否是数组letresult=Array.isArray(target)?[]:{};for(constkeyintarget){result[key]=clone(target[key]);}返回结果;}else{返回目标;}}参考深拷贝实现