展开(或收集)运算符是深拷贝还是浅拷贝?
在讲展开运算符的时候我希望大家明白什么是展开(或收集)运算符,什么是解构赋值。
展开(或收集)运算符:可以在函数调用/数组构造时,将数组表达式或者 string 在语法层面展开;还可以在构造字面量对象时,将对象表达式按 key-value 的方式展开。
解构赋值:可以将数组中的值或对象的属性取出,赋值给其他变量。
其实展开运算符既可以是深拷贝也可以是浅拷贝,但什么时候是深拷贝什么时候是浅拷贝呢?
相信看完下面的解释你就会明白了。
一、深拷贝
//先来个简单结构的例子
let cheng1 = { a: "a" };
let obj3 = { ...cheng1 }; //将对象进行展开
let obj4 = JSON.parse(JSON.stringify(obj3)); //这种方法无论层级多深都是深拷贝
//上面打印出来赋值后的三个对象值以便后面观察
console.log("1=========>", cheng1, obj3, obj4);
//对通过赋值操作的两个对象直接操作属性,根据是否更改了原来的对象的属性来判断是否是深拷贝;
//如果是深拷贝,更改属性不会改变原来对象的值, 要是浅拷贝则会修改原对象;
obj3.a = "aaaaaaaa";
//打印更改后的三个对象,观察是否发生改变
console.log("2=========>", cheng1, obj3, obj4);
结果如下:
二、浅拷贝
let cheng = {
a: "a",
b: "b",
c: [{ c1: "c1" }, { c2: "c2" }, { c3: [{ c4: "c4" }, { c5: "c5" }] }],
};
let obj1 = { ...cheng }; //将对象进行展开
let obj2 = JSON.parse(JSON.stringify(cheng)); //这种方法无论层级多深都是深拷贝
//上面打印出来赋值后的三个对象值以便后面观察
console.log("11111111111", cheng, obj1, obj2);
//对通过赋值操作的两个对象直接操作属性,根据是否更改了原来的对象的属性来判断是否是深拷贝;
//如果是深拷贝,更改属性不会改变原来对象的值, 要是浅拷贝则会修改原对象;
obj1.c[1].c2 = "c222";
obj1.c[2].c3[1].c5 = "c5555555555555555";
obj2.c[2].c3[0].c4 = "444444444";
//打印更改后的三个对象,观察是否发生改变
console.log("22222222222", cheng, obj1, obj2);
结果如下:
三、总结
当操作对象为基本数据类型及简单对象结构的时候是深拷贝,当操作对象为复杂数据类型时是浅拷贝。
基本数据类型:string、number、boolean、undefined、null.
简单数据结构:{},只有一层对象或者数组结构的对象,例如{ [ ] } 、{ { } } 、[ [ ] ] 等都是复杂数据结构。