js 深浅拷贝

理解深浅拷贝前,你一定要知道的是 javascript数据类型。我推荐你可以先看看JavaScript基础心法——数据类型

需要知道js的数据类型 基本数据类型 和引用数据类型。
在这里 深浅拷贝 针对的就是 引用数据类型

浅拷贝

浅拷贝我们复制的只是引用,而不是真正的值

const arr=['a','b','c'];
const obj={a:"2",b:"xzz",c:"ccc"};

const cloneArr=arr;  	console.log(cloneArr) //['a','b','c'];
const cloneObj=obj;		console.log(cloneObj)//{a:"2",b:"xzz",c:"ccc"};

arr.push('dddd'); 
console.log(arr)	//['a','b','c','dddd'];
console.log(cloneArr)	//['a','b','c','dddd'];
obj.a="333";
console.log(obj); //{a:"333",b:"xzz",c:"ccc"};
console.log(cloneObj) //{a:"333",b:"xzz",c:"ccc"};

随着 arr,obj的改变,cloneArr,cloneObj也发生了改变。

深拷贝

深拷贝是对目标的完全拷贝,将引用地址和值一起复制过来。
实现办法
1 JSON.stringify() JSON.parse()
JSON.stringify() 将javascript值或对象 转化为json字符串
JSON.parse() 将json字符串转化为对象或javascript值
2 递归 (建议使用递归)复制所有的层级属性

function deepClone(arr){
	let _a=JSON.stringify(arr),_b=JSON.parse(_a);
	return _b;
}
var arr=['a','b','c'];
var cloneArr=deepClone(arr);
arr.push('ddd');
console.log(arr);['a','b','c','ddd'];
console.log(cloneArr);['a','b','c'];
function deepClone(data){
const tem=data.constructor===Array?[]:{}; //判断复制的目标是对象还是数组
for(var keys in data){   //遍历
	if(data.hasOwnProperty(keys)){  //判断自身属性是否具有某些指定的属性
		if(data[keys]&&typeof data[keys]==='object'){ //判断值是对象的话就去递归			
			tem[keys]=deepClone(data[keys]); 
		}else{  //如果是数组 直接赋值
			tem[keys]=data[keys]
		}
	}
}
return tem;
}
var arr=['a','b','c'];
var arr=['a','b','c'];
var cloneArr=deepClone(arr);
arr.push('ddd');
console.log(arr);['a','b','c','ddd'];
console.log(cloneArr);['a','b','c'];
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值