js 深浅拷贝
2018-10-09 14:22
197 查看
理解深浅拷贝前,你一定要知道的是 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'];阅读更多