js深拷贝和浅拷贝的区别（深拷贝和浅拷贝的区别）
js深拷贝和浅拷贝的区别（深拷贝和浅拷贝的区别）
- 使用场景：开发的时候对引用类型进行处理，为了避免修改一个引用类型数据时，其他用这个变量来赋值的变量也都被改变了。如下例子：
我们修改李明的年龄的时候，小明的年龄也跟着发生改变了，这不是我们预期的结果。所以这时候就需要用深拷贝或浅拷贝来进一步处理了。
let person = {}
xiaoming = person
liming = person;
(xiaoming.age = 12) (liming.age = 18);
console.log(xiaoming.age liming.age); // 18 18
先了解一下引用类型：它是一种数据结构，在JavaScript也可以称为对象定义，它描述一类对象所具备的属性和方法。存放在堆内存里，保存的是一个指针，常见的引用类型： Array、Object。
- 创建的方式：
//1 Object构造函数
let person = new Object();
console.log(person); // {}
// 2 对象字面量
let person = {}
//
let arr = new Array();
let arrr = [];
浅拷贝：按位拷贝，复制了空间，不复制资源。对对象拷贝，遇到基本数据类型，拷贝值，遇到引用类型拷贝的是内存地址（还是会受到影响）。
- 浅拷贝的方式（适用只有一级的对象）：
- Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
2. 缺点：二级（引用类型）还是会受到影响，如下：
let obj_1 = { a: 1 c: { b: 2 } };
let obj_2 = Object.assign({} obj_1);
console.log(obj_2); //=> { a: 1 c: { b: 2 } }
//尝试修改obj_1
obj_1.c.b = 10;
obj_1.a = 6;
// a不受影响，b受影响
console.log(obj_1); // => { a: 6 c: { b: 10 } }
console.log(obj_2); //=> { a: 1 c: { b: 10 } }
深拷贝: 重新开辟了空间进行深度复制，互不影响。
- 深拷贝的方式：
- JSON.parse(JSON.stringify())
- 递归
let obj_1 = { a: 1 c: { b: 2 } };
function deepClone(obj) {
let obj_1 = {};
for (const key in obj) {
if (Object.prototype.toString.call(obj[key]) === "[object Object]") {
obj_1[key] = deepClone(obj[key]);
} else {
obj_1[key] = obj[key];
}
}
return obj_1;
}
let obj_2 = deepClone(obj_1);
console.log(obj_2); //=> { a: 1 c: { b: 2 } }
//尝试修改obj_1
obj_1.c.b = 10;
obj_1.a = 6;
obj_2.a = 2;
obj_2.c.b = 12;
// 互不影响
console.log(obj_1); //=> { a: 6 c: { b: 10 } }
console.log(obj_2); //=> { a: 2 c: { b: 12 } }
我是爱美的姑娘，关注我，每天为您分享和复习前端开发的知识点、学习的同时还可以了解最新的娱乐八卦、幽默搞笑，学习更轻松哟！
