浅拷贝与深拷贝概述:
1.浅拷贝只是拷贝一层,更深层次对象级别只拷贝引用;
2.深拷贝拷贝多层,每一级别的数据都会拷贝;
利用原生JS实现深拷贝
原生JS的数据类型包括值类型和引用类型:
对于值类型(undefined;string;number;boolean;symbol;),可以很方便的使用赋值操作,
但对于引用类型(Array,Object),简单的进行赋值操作,赋值得到的只是地址,俗称浅拷贝,如下:
const obj = {
a: 13,
b: { name: 'zhangsan', age: 13 },
c: [1, 3, 4]
};
const obj2 = obj;
obj2.c[0] = 23;
console.log(obj.c[0]); //23
对obj2中的值修改也会更改obj中的值,因此就需要进行深拷贝操作,避免这种简单赋值操作带来的影响,代码如下:
const obj = {
a: 13,
b: { name: 'zhangsan', age: 13 },
c: [1, 3, 4]
};
function deepClone(obj = {}) {
//判断值类型
if (typeof obj !== 'object' || typeof obj == null) {
return obj
};
//初始化result值
let result;
if (obj instanceof Array) {
result = [];
} else {
result = {};
};
//进行赋值操作
for (let key in obj) {
//判断key是不是obj本身所含的属性,保证key不是原型属性
if (obj.hasOwnProperty(key)) {
//递归
result[key] = deepClone(obj[key]);
}
};
return result;
}
const obj3 = deepClone(obj);
obj3.c[0] = 23;
console.log(obj.c[0]);//1
综上,实现深拷贝有几个注意点:
1.判断值类型和应用类型
2.判断是数组还是对象
3.递归