了解深/浅拷贝需要了解一些前置的知识,那就是堆和栈和js中数据类型之间的关系,我的理解比较的简单粗暴:
js中基本数据类型的数据(String,Number,Boolean,undifined,null,Symbol)统一存储在栈内存中;
然后引用类型的数据(Object,Array,Function)因为充满了各种不确定性,所以就分开存储了,对于引用类型来说栈内存 存储的是一个个内存地址对应着我们的变量名、函数名。而堆内存则存储着我们的数据(对应的值),每个内存地址(变量名...)对应一个堆内存,通过内存地址寻找到堆内存里面的数据。
这样的关系就跟钥匙对应一把锁,每把锁锁了一个箱子,箱子里是我们的数据,拿到钥匙才能打开对应的锁拿到数据,看图:
关于堆和栈,更专业的解说在这里->详解堆和栈
再讲深/浅拷贝: 我理解的浅拷贝就是只复制栈内存中的数据/或者地址,而深拷贝就是找到栈内存里对应的堆内存的数据给拷贝下来,这样两个引用类型的数据就互不影响了。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//只有一层的深拷贝------------------------------------------------------------
const obj = {
name: '张嘀嗒',
friends: {
one: '波仔',
two: '辉仔'
}
}
const objCopy = {}
// const objCopy = {...obj} //一样是只有一层深拷贝
//只拷贝一层的深拷贝
Object.assign(objCopy, obj)
obj.name = '有才' //输出之后发现 name 已经完成了深拷贝,两者不再互相影响
objCopy.friends.one = '华仔' //输出之后发现两个对象中的 friends.one 都变成了 '华仔',所有引用类型里面的引用类型深拷贝失败
console.log('obj',obj);
console.log('objCopy',objCopy);
//多层的深拷贝-------------------------------------------------------------------
const frist = {
name: '顺子',
parents:{
father: '老顺子',
mother: '花姨',
parentsFriends:{
one: '波仔',
two: '辉仔'
}
}
}
//先将对象转换为 json 类型的字符串数据 ,然后再将该字符串转换为对象
const second = JSON.parse(JSON.stringify(frist))
frist.name = '磊子'
frist.parents.father = '大磊子'
frist.parents.parentsFriends.one = '磊子兄弟'
//这里输出之后就可以发现,他们的数据没有互通
console.log('frist',frist);
console.log('second',second);
</script>
</body>
</html>
欢迎指正!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。