您的位置:首页 > Web前端 > JavaScript

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'];
阅读更多
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: