什么是拷贝?
拷贝,就是将一个对象obj1复制给另个对象obj2,且obj2的数据发生改变时,obj1不发生改变
浅拷贝
只拷贝第一层对象的数据
浅拷贝实现方式 - 1.循环遍历对象,复制
2.利用Object.assign()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浅拷贝 -1.循环遍历对象,复制</title>
</head>
<body>
<script>
let user = {
name: '张三',
age: 18,
obj:{
fav:'打篮球'
}
}
//实现浅拷贝 - 只可拷贝第一层数据 - 遍历对象添加
let user2 = {}
for (const key in user) {
user2[key] = user[key];
}
//修改拷贝后第一层数据不会修改原数据
user2.age = 20;
//修改拷贝的第二层数据,会修改原数据
user2.obj.fav = '打乒乓';
console.log(user.age,user.obj.fav)//18,打乒乓
</script>
</body>
</html>
第二种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浅拷贝与深拷贝</title>
</head>
<body>
<script>
let user = {
name: '张三',
age: 18,
obj:{
fav:'打篮球'
}
}
// 实现浅拷贝 - 利用方法实现
let user3 = Object.assign({},user);
user3.age = 20;
user3.obj.fav = '打乒乓';
console.log(user.age,user.obj.fav)//18,打乒乓
</script>
</body>
</html>
深拷贝
拷贝所有的对象,改变拷贝后的数据不会修改原对象
1.利用递归,向浅拷贝一样去循环
function deepClone(obj) {
if(typeof obj !== 'object' || obj == null) {
return obj;
}
let result
if(obj instanceOf Arrary){
result = [];
}else {
result = {};
}
for(let key in obj){
if(obj.hasOwnProperty(key)){
result[key] = deepClone(obj[key])
}
}
return result;
}
2.利用JSON转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>深拷贝</title>
</head>
<body>
<script>
let user = {
name: '张三',
age: 18,
obj:{
fav:'打篮球'
}
}
//实现深拷贝 - 1.利用递归 2.利用json
//将对象转换为字符串,利用基本数据类型赋值
let user4 = JSON.stringify(user);
//字符串转换为对象
user4 = JSON.parse(user4);
user4.age = 20;
user4.obj.fav = '打乒乓';
console.log(user.age,user.obj.fav)//18,打篮球
</script>
</body>
</html>