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

Javascript中的深拷贝

时间:2023-04-02 16:21:16 HTML

对对象、数组等引用类型值的拷贝分为浅拷贝和深拷贝。比如这样一个对象letobj={a:1,b:{a:1,b:2},c:3}显然,这个对象有两层,obj[b]不是基本类型值,但另一个对象。如果使用浅拷贝来复制这个对象,那么复制的新对象的b属性的值就是原对象b属性的引用地址,也就是说如果改变了源对象的b属性,新对象也会受到影响。因为我们使用浅拷贝只复制了一层。以上是浅拷贝,在实际应用中存在严重问题。因此,我们一般使用深拷贝来拷贝对象。深拷贝不是简单的复制一层,而是遍历整个对象,直到得到的值不是引用类型,而是基本类型。该对象与原始对象完全不同。下面是我写的一个简单的深度复制函数letobj={a:1,b:{a:1,b:2},c:3}functiondeepClone(object){letobj=newObject();if(objectinstanceofObject){//说明是一个对象for(letattrinobject){if(object.hasOwnProperty(attr)){//过滤基本类型值if(typeofobject[attr]!='object'||object[attr]==null){obj[attr]=object[attr];}else{obj[attr]=deepClone(object[attr]);}}}}returnobj;}letobj2=deepClone(obj);obj.b=1;console.log(obj,obj2);注意这个函数有一个问题,因为这个函数只能处理纯对象类型,也就是说属性中包含数组的对象不能用这个方法处理。下面的方法是stackoverflow上的答案,兼容数组和对象functionclone(obj){varcopy;//处理3种简单类型,以及null或undefinedif(null==obj||"object"!=typeofobj)returnobj;//处理日期if(objinstanceofDate){copy=newDate();copy.setTime(obj.getTime());返回副本;}//处理数组if(objinstanceofArray){copy=[];对于(vari=0,len=obj.length;i