浅拷贝： 将原对象或原数组的引用直接赋给新对象，新数组，新对象／数组只是原对象的一个引用
深拷贝： 创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”。
我们希望在改变新的数组（对象）的时候，不改变原数组（对象）时需要使用深拷贝。
1、浅拷贝实现
原对象
const obj = {
siteName:"张培跃",
info:{
age:18,
props:["阳光","帅气"]
}
}
// 1. ...实现
let copy1 = {...obj};
console.log(copy1 === obj);// false
console.log(copy1.info === obj.info);// true
console.log(copy1.siteName);// 张培跃
// 2. Object.assign实现
let copy2 = Object.assign({},obj);
console.log(copy2 === obj);// false
console.log(copy2.info === obj.info);// true
console.log(copy2.siteName);// 张培跃
// 3、for in 实现
let copy3 = {};
for(let key in obj){
copy3[key] = obj[key];
}
console.log(copy2 === obj);// false
console.log(copy2.info === obj.info);// true
console.log(copy2.siteName);// 张培跃
原数组
const arr =[{
siteName:"张培跃",
info:{
age:18,
props:["阳光","帅气"]
}
}]
// 1. ...实现
let copy1 = {...arr};
console.log(copy1 === arr);// false
console.log(copy1[0].info === arr[0].info);// true
console.log(copy1[0].siteName);// 张培跃
// 2. Array.from实现
let copy2 = Array.from(arr);
console.log(copy2 === arr);// false
console.log(copy2[0].info === arr[0].info);// true
console.log(copy2[0].siteName);// 张培跃
// 3、forEach实现
let copy3 = [];
arr.forEach(v=>copy3.push(v));
copy3 = Array.from(arr);
console.log(copy3 === arr);// false
console.log(copy3[0].info === arr[0].info);// true
console.log(copy3[0].siteName);// 张培跃
// 4、map实现
let copy4 = arr.map(v=>v);
console.log(copy4 === arr);// false
console.log(copy4[0].info === arr[0].info);// true
console.log(copy4[0].siteName);// 张培跃
2、深拷贝实现
- JOSN.stringify()/JSON.parse()
const obj = {
siteName:"张培跃",
info:{
age:18,
props:["阳光","帅气"]
}
}
const copy1 = JSON.parse(JSON.stringify(obj));
console.log(copy1 === obj);// false
console.log(copy1.info === obj.info);// false
console.log(copy1.info.props === obj.info.props);// false
console.log(copy1.siteName);// 张培跃
- 递归拷贝
function deepClone(obj) {
// 判断是否数组或对象，确定初始值
let copy = obj instanceof Array ? [] : {}
for (let i in obj) {
if (obj.hasOwnProperty(i)) {
copy[i] = typeof obj[i] === 'object' ? deepClone(obj[i]) : obj[i]
}
}
return copy
}
const obj = {
siteName:"张培跃",
info:{
age:18,
props:["阳光","帅气"]
}
}
const copy1 = deepClone(obj);
console.log(copy1 === obj);// false
console.log(copy1.info === obj.info);// false
console.log(copy1.info.props === obj.info.props);// false
console.log(copy1.siteName);// 张培跃
—————END—————
喜欢本文的朋友们，欢迎关注公众号 张培跃，收看更多精彩内容！！！公众号回复 电子书 ，送你经典电子书籍！
