如何区分深拷贝和浅拷贝？
假设 B 复制了 A ，当 A 修改时，看 B 是否跟着发生改变
- 如果 B 改变了，说明是浅拷贝。
- 如果 B 没改变，说明时深拷贝。
首先，简单阐述栈堆，基本数据类型与引用数据类型。
因为这些概念能更好的让我们理解浅拷贝和深拷贝。
我们来举例浅拷贝的例子：
let obj = {
name: "张三",
habby: {
one: "旅行",
two: "摸鱼"
}
};
let newObj = {
...obj
};
newObj.habby.one = "打代码"; // 修改
console.log(obj); // 打印如下
微信截图_20200531000200.png
我明明 newObj 复制了 obj，为什么修改了 newObj ，obj 也跟着改变。那么这里，就得引入基本数据类型与引用数据类型的概念了。
基本数据类型有哪些？
number、string、undefined、null、symbol、boolean。
引用数据类型
array、object、function
基本数据类型：名值存储在栈内存中。
微信截图_20200531000200.png
比如 let a = 1，当 b = a 复制时，栈内存会新开辟一个内存，例如这样：
2.png
所以当你修改 a = 2，对 b 并不会造成影响。当然，let a = 1，b = a。虽然 b 不受影响，但这也不算是深拷贝，因为深拷贝本身只针对较为复杂的 object 类型数据。
引用数据类型：名存在栈内存中，值存在于堆内存中。但是栈内存会提供一个引用的地址指向堆内存中的值。
3.png
当 b = a 进行拷贝时，其实复制的是 a 的引用地址，并非堆里面的值。
4.png
而当我们a[0] = 1 时进行数组修改时，由于 a 与 b 指向的是同一个地址，所以自然 b 受了影响，所以这就是所谓的浅拷贝。
6.png
那，要是在推内存也开辟一个新的内存专门为 b 存放值，就是基本数据类型那样，岂不是达到深拷贝的效果。
7.png
方法一：通过递归去复制所有的层级属性实现深拷贝效果
function deepCopy(obj){
let newObj = Array.isArray(obj) ? [] : {};
for(let key in obj){
if(obj.hasOwnProperty(key)){
if(typeof obj[key] === "object"){
newObj[key] = deepCopy(obj[key]);
} else {
newObj[key] = obj[key];
}
}
};
return newObj;
};
let obj = {
name: "张三",
habby: {
one: "旅行",
two: "摸鱼"
}
};
let newObj = deepCopy(obj);
newObj.habby.one = '排球';
console.log(obj)
8.png
可以看到现在 obj 脱离了 newObj 的控制，不再受 newObj 的影响了。
方法二：通过 JSON 对象的 parse 和 stringify，缺点是对 function 和 undefined 无效。
let obj = {
name: "张三",
habby: {
one: "旅行",
two: "摸鱼"
}
};
let newObj = JSON.parse(JSON.stringify(obj));
newObj.habby.one = '排球';
console.log(obj);
9.png
可以看到 obj 不受 newObj 的控制了。
可以使用 localStorage实现对象数组存储，不过这里不多说，不太推荐。
最后，深拷贝能帮你更安全安心的去操作数据，根据实际情况来使用深拷贝。
网友评论