js的深层克隆和浅层克隆代码和理解
程序员文章站
2022-03-26 14:33:34
深层克隆 注意:判断是否是原型的方法,要首先想到for in 和hasProperty的方法,然后再用typeof(Origin[prop]) =='object', 判断数组和对象的方法,则有三种,constructor ,toString call ,instanceof 此处用的是toStri ......
<script> //判断是不是原始值 //判断是数组还是对象 //建立相应的数组或对象 var obj={ name:'辣鸡', sex:'male', card:['laobi','feiwu'], wife:{ name:'智障', son:{ name:'彩笔' } } } var obj1={} function deepclone(origin,target){ var target=target ||{}, tostr = object.prototype.tostring, arrstr = '[object array]'; for(var prop in origin){ //第一步,判断对象是不是原始值 if(origin.hasownproperty(prop)){ if(typeof(origin[prop])=='object'){ if(tostr.call(origin[prop]) == arrstr){ target[prop]=[]; }else{ target[prop] = {}; } deepclone(origin[prop],target[prop]); } else{ target[prop] = origin[prop]; } } } } </script>
深层克隆
注意:判断是否是原型的方法,要首先想到for in 和hasproperty的方法,然后再用typeof(origin[prop]) =='object',
判断数组和对象的方法,则有三种,constructor ,tostring call ,instanceof
此处用的是tostring.call(origin[prop]=='arrstr'),其实就是判断是否是[object array]
最后递归则用回调deepclone()方法,建立相应数组和对象
下面是通过三目运算符完善代码,并且加了判断方法不为空,还有加了返回值target
function deepclone(origin,target){ var target=target ||{}, tostr = object.prototype.tostring, arrstr = '[object array]'; for(var prop in origin){ //第一步,判断对象是不是原始值 if(origin.hasownproperty(prop)){ if(typeof(origin[prop])=='object' && origin[prop] !=='null'){ target[prop] = tostr.call(origin[prop]) == arrstr ?[]: {}; deepclone(origin[prop],target[prop]); } else{ target[prop] = origin[prop]; } } } return target; }
浅层克隆
var obj3={ name:'abc', sex:'boy', height:178} var obj4={} function clone(origin,target){ var target = target||{};//防止用户不传target for ( prop in origin){ target[prop]=origin[prop] }
return target; } clone(obj3,obj4)
需要注意的是,如果修改origin的值,则不会改变target的值
但是如果obj3里面有数组属性,调用方法改变obj4的数组属性时,也会改变obj3,因为是引用属性: