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

如何在JavaScript中深度克隆

时间:2023-03-27 14:17:51 JavaScript

方法一varcloned=JSON.parse(JSON.stringify(objectToClone));优缺点1.写法简单2.适用于数据量小的json格式的数据3.数据量大,耗时内存4.只适用于json格式数据方式2functionclone(item){if(!item){返回项目;}//null,未定义值检查vartypes=[Number,String,Boolean],result;//如果有人做了newString('aaa'),ornewNumber('444');types.forEach(function(type){if(iteminstanceoftype){result=type(item);}});if(typeofresult=="undefined"){if(Object.prototype.toString.call(item)==="[objectArray]"){result=[];item.forEach(function(child,index,array){result[index]=clone(child);});}elseif(typeofitem=="object"){//测试这是DOMif(item.nodeType&&typeofitem.cloneNode=="function"){result=item.克隆节点(真);否则如果(!item.prototype){//检查这是一个文字if(iteminstanceofDate){result=newDate(item);}else{//这是一个对象字面量result={};for(variinitem){结果[i]=clone(item[i]);}}}else{//取决于你在这里想要什么,//只保留引用,或者创建新对象if(false&&item.constructor){//不建议这样做,原因?阅读下文result=newitem.constructor();}else{结果=项目;}}}else{结果=项目;}}returnresult;}再看一种ES6的写法functiondeepClone(obj,hash=newWeakMap()){if(Object(obj)!==obj)returnobj;//原始数据vesif(hash.has(obj))returnhash.get(obj);//循环引用constresult=objinstanceofSet?newSet(obj)//参见注释!:objinstanceof映射?newMap(Array.from(obj,([key,val])=>[key,deepClone(val,hash)])):objinstanceofDate?newDate(obj):objinstanceofRegExp?newRegExp(obj.source,obj.flags)//...在此处添加对其他类的任何特定处理...//最后是一个包罗万象的::obj.constructor?newobj.constructor():Object.create(null);hash.set(obj,结果);returnObject.assign(result,...Object.keys(obj).map(key=>({[key]:deepClone(obj[key],hash)})));}优缺点1.适合各种数据类型的深度克隆2.代码量比较大,适合封装在public类函数中方法3_.cloneDeep(object)_.cloneDeepWith(object,(val)=>{if(_.isElement(val))returnval.cloneNode(true)})优缺点1.工具库打包,即用即用。Better2.需要引入loadsh库,当然还有一些针对特定数据类型的方法如constarr1=[1,2,3];constarr2=Array.from(arr1)Array.prototype.concat()arrayObject.concat(arrayX,arrayX,...,arrayX)参考:[HowtoDeepcloneinjavascript](https://stackoverflow.com/que...