Js深度克隆解析

北城以北 提交于 2020-03-23 18:29:59

Js克隆(clone),就是数据拷贝,包括基础类型的数据和引用类型的数据,而深度克隆(deepClone)就是针对引用类型,如数组和对象。

两种拷贝的区别在于:浅拷贝时,拷贝出的对象指向原对象的地址,当其值发生改变时,原对象的值也发生改变;

               深度拷贝,拷贝出的对象指向一个新的地址,当其值发生改变时,原对象的值不受影响。

下面列出深度拷贝的代码及其详细注释:

var obj = {//待拷贝的对象
   name:"abc",
   age:"123",
   card:['visa','master'],
   wife:{
   name:"bcd",
   son:{
     name:"aaa"
   }
   },
   a:function(){}
  }

function deepclone(origin , target){
  var target = target || {},
      tostr = Object.prototype.toString,//使用Object.prototype.toString.call方法进行对象和数组的区分,所以先将其进行存储以便使用
      arr = '[object Array]';
  for(var prop in origin){
      if(origin.hasOwnProperty(prop)){//防止拷贝的对象从原对象的原型上取值
          if(origin[prop] !== "null" && typeof(origin[prop]) == 'object'){//当遍历到的数据为对象或数组时调用Object.prototype.toString.call方法
              if(tostr.call(origin[prop]) == arr){//遍历到数组,创建数组
                  target[prop] = [];
              }else{//遍历到对象,创建对象
                 target[prop] = {};
              }             
              deepclone(origin[prop] , target[prop]);//对遍历到的数组和对象再次深度克隆
         }else{
             target[prop] = origin[prop];//当遍历到的数据为原始值时,直接进行赋值
         }
     }
 }
         return target;
 }

var target;
console.log(deepclone(obj,target));//实现target深度拷贝obj

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!