展开(或收集)运算符(...)是深拷贝还是浅拷贝?

展开(或收集)运算符是深拷贝还是浅拷贝?

在讲展开运算符的时候我希望大家明白什么是展开(或收集)运算符,什么是解构赋值

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

おすすめ

転載: blog.csdn.net/m0_46412825/article/details/127768822