携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第2天,点击查看活动详情
javaScript对象的深拷贝与浅拷贝
前言
我们都知道数据类型有基本类型和引用类型,引用类型在直接进行赋值时,实际上是将指向当前的指针指向了新的变量,也就是说,改变其中一个变量的值时,另外一个变量的值也会变化
const a = {
name: "张三",
age: "15",
obj: {
class: "三年级二班"
}
}
const b = a;
console.log(`a对象的值=`,a)
console.log(`b对象的值=`,b)
// 将a的name改为李四
a.name= '李四'
console.log(`修改后a对象的值=`,a)
console.log(`修改后b对象的值=`,b)
** 结果如下 **
可以看到结果就是name都为李四了
深拷贝与浅拷贝
深拷贝
深拷贝指的是对于有嵌套的引用类型,使用递归的形式继续拷贝,确保返回的都是全新的引用
function deepClone1(obj) {
//判断拷贝的要进行深拷贝的是数组还是对象,是数组的话进行数组拷贝,对象的话进行对象拷贝
var objClone = Array.isArray(obj) ? [] : {};
//进行深拷贝的不能为空,并且是对象或者是
if (obj && typeof obj === "object") {
for (key in obj) {
if (obj.hasOwnProperty(key)) {
if (obj[key] && typeof obj[key] === "object") {
objClone[key] = deepClone1(obj[key]);
} else {
objClone[key] = obj[key];
}
}
}
}
return objClone;
}
浅拷贝
**浅拷贝只是拷贝了顶层的属性,如果里面还含有引用类型,还是直接复制引用不会返回新的引用。
讨论对象的扩展运算符是深拷贝还是浅拷贝?
继续刚才我们的例子,将对象里面的obj引用的class改为二年级三班
const a = {
name: "张三",
age: "15",
obj: {
class: "三年级二班"
}
}
const b = {...a};
console.log(`a对象的值=`,a)
console.log(`b对象的值=`,b)
// 将a的obj的class改为二年级三班
a.name="李四"
a.obj.class= '二年级三班'
console.log(`修改后a对象的值=`,a)
console.log(`修改后b对象的值=`,b)