JavaScript深度克隆

在js里面,想要把对象克隆,主要来说就是三步:
//遍历对象 for(var prop in obj)
// 1.判断是不是原始值 typeof() object
// 2.判断是数组还是对象 instanceof ||toString ||constructor
(建议使用toString,原因:父子域的问题,判断子域的数组放到父域里面的数组打印出来是false)
// 3.建立相应的数组或者对象
//递归

var obj = {
	name : "abc",
	age : 123,
	arr : ['visa' , 'master'],
	wife : {
		name : "bcd",
		son : {
			name : "aaa"
		}
		
	}
}
//把obj拷贝到obj1大致思路是这样的,如果是数组[]或者函数{},就递归,如果不是就赋值
var obj1 = {
	name : obj.name , 
	age : 123 , 
	card : [obj.arr[0] , obj.arr[1]],
	wife : {
		name : obj.wife.name,
		son : {
			name :obj.wife.son.name
		}
	}
}

以下是完整深度克隆的代码:

var obj = {
	name : "abc",
	age : 123,
	arr : ['visa' , 'master'],
	wife : {
		name : "bcd",
		son : {
			name : "aaa"
		}
		
	}
}
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)){
	    		//判断它typeof是不是object,是object那么就是数组[]或者对象{}
	    		if(origin[prop] !== "null" && typeof(origin[prop]) == 'object'){
	    			//用toString方法判断是数组还是对象
                  if(toStr.call(origin[prop]) == arrStr){
                  	    target[prop] = [];
                    } 
                    else{
                    	target[prop] = {};
                    }
                    //递归,数组或者对象里面重复执行
                    deepClone(origin[prop] , target[prop]);
	    		}
	    		//如果typeof不是object,那么是string或者number,就直接赋值
	    		else{
	    			target[prop] = origin[prop];
	    		}
	    	}
	    }
	    return target;
}

控制台得出的结果如下:

在这里插入图片描述
下面简单说一下JS判断是数组还是对象的toString方法:
调用toString( )方法试着将该变量转化为代表其类型的string。

var a=[];
var b={};
Object.prototype.toString.call(a) === ‘[object Array]’//true
Object.prototype.toString.call(b) === ‘[object Array]’//false

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值