浅拷贝只复制一层对象的属性，二深拷贝则复制了所有的层级。
对于简单类型来说浅拷贝,拷贝的是值,对于引用类型来说浅拷贝拷贝的是地址,修改其中一个对象的属性，则另一个对象的属性也会改变.
而深拷贝则是开辟新的栈，两个对象对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性。
使用递归的方法完成深拷贝
<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 obj1 = {
uname: '张三',
age: 18,
gender: '男',
gfs: ['凤姐', '芙蓉姐姐', '黄蓉'],
wife: {
w1: '蔡徐坤',
w2: 'ikun'
}
}
// 需要使用递归
const obj2 = {}
// 将旧对象的属性copy到新对象里面
function deepCopy(newObj, oldObj) {
// 遍历旧对象
for (let k in oldObj) {
// 获取旧对象的属性值给到item
const item = oldObj[k]
// 判读是不是数组
if (item instanceof Array) {
newObj[k] = []
deepCopy(newObj[k], item)
// 判断是不是对象
} else if (item instanceof Object) {
newObj[k] = {}
deepCopy(newObj[k], item)
} else {
newObj[k] = item
console.log(newObj[k]);
}
}
}
deepCopy(obj2, obj1)
obj2['gfs'][0] = '我是新'
obj1['gfs'][0] = '我是旧'
console.log(obj2);
console.log(obj1);
</script>
</body>
</html>
使用lodash第三方库,引入完成深拷贝
<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 src="./js/lodash.min.js"></script>
<script>
const obj1 = {
uname: '张三',
age: 18,
gender: '男',
gfs: ['凤姐', '芙蓉姐姐', '黄蓉'],
wife: {
w1: '蔡徐坤',
w2: 'ikun'
}
}
const obj2 =_.cloneDeep(obj1)
obj2['gfs'][0] = '吃饭吃饭 '
console.log(obj2);
console.log(obj1);
</script>
</body>
</html>
使用JSON.stringify()来完成深拷贝
<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 obj1 = {
uname: '张三',
age: 18,
gender: '男',
gfs: ['凤姐', '芙蓉姐姐', '黄蓉'],
wife: {
w1: '蔡徐坤',
w2: 'ikun'
}
}
const str = JSON.stringify(obj1)
const obj2 = JSON.parse(str)
console.log(obj2);
</script>
</html>
我们推荐使用递归,和引入第三方库,来完成深拷贝,因为使用JSON.stringify()来实现深拷贝,虽然代码简单,不严谨.
