什麼是拷貝?
拷貝,就是將一個對象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.利用遞歸,向淺拷貝一樣去循環
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>