前言
js中如何进行对象的深浅拷贝呢？相信看过本文后，你就会有一定的了解。话不多说，先从浅拷贝开始。
一、对象的浅拷贝？
1.什么是浅拷贝
将一个对象内的值拷贝到另一个新的对象里，但是只能拷贝最外边的一层。
2.代码演示
代码如下（示例）：
<!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>
let obj = {
uname: '张三丰',
age: 23,
gender: '男',
color: ['red', 'green', 'blue'],
message: {
index: 3,
score: 98
}
}
let newObj = {}
// for...in遍历进行浅拷贝
for (let key in obj) {
newObj[key] = obj[key]
}
// 可以快速实现浅拷贝的方法
// Object.assign(newObj, obj)
obj.uname = '阿飞'
obj.message.index = 5
console.log(obj, newObj)
</script>
</body>
</html>
3.结果展示
如下图所示，浅拷贝只能拷贝最外面一层，修改原对象中的属性，对拷贝的新对象并无影响。但是如果修改原对象中的 message对象中的内容，新对象还是会受到影响。因为原对象中的color和message属于引用数据类型，只能拷贝到其在堆内存中的地址。同理，修改原对象中color数组，新对象同样会受到影响！
二、深拷贝
1.为什么需要深拷贝
因为浅拷贝后，修改原对象中的引用数据类型，会影响到拷贝后的新对象。
2.代码演示
代码如下（示例）：
<!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>
let a = {
uname: '张三丰',
age: 23,
gender: '男',
color: ['red', 'green', 'blue'],
message: {
index: 3,
score: 98
}
}
let b = {}
// 封装一个进行深拷贝的函数，把新对象和原对象当做实参传给这个函数即可
function deepCopyFn(newObj, obj) {
for (let key in obj) {
// 判断原对象内的键值对类型是否为数组
if (obj[key] instanceof Array) {
newObj[key] = []
// 使用递归进行拷贝元素组内的引用类型
deepCopyFn(newObj[key], obj[key])
} else if (obj[key] instanceof Object) {
newObj[key] = {}
deepCopyFn(newObj[key], obj[key])
} else {
// 如果是基本数据类型，直接拷贝
newObj[key] = obj[key]
}
}
}
// 调用函数并传入实参
deepCopyFn(b, a)
a.uname = '阿飞'
a.color[2] = 'skyblue'
a.message.index = 5
console.log(a, b)
</script>
</body>
</html>
3.结果展示
如下图所示，进行深拷贝后，修改原对象内的任意数据，都不会对拷贝的新对象造成影响。
总结
以上就是对对象深浅拷贝的讲解了，有问题的小伙伴可以一起在评论区讨论哦~
