展开（或收集）运算符（...）是深拷贝还是浅拷贝？

展开（或收集）运算符是深拷贝还是浅拷贝？

在讲展开运算符的时候我希望大家明白什么是展开（或收集）运算符，什么是解构赋值。

展开（或收集）运算符：可以在函数调用/数组构造时，将数组表达式或者 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.
简单数据结构：{}，只有一层对象或者数组结构的对象，例如{ [ ] } 、{ { } } 、[ [ ] ] 等都是复杂数据结构。