Ist der Spread- (oder Collection-)Operator (...) eine Deep Copy oder eine Shallow Copy?

Ist der Spread- (oder Collection-)Operator eine Deep Copy oder eine Shallow Copy?

Wenn ich über den Erweiterungsoperator spreche, hoffe ich, dass jeder versteht, wasder Erweiterungs- (oder Sammlungs-)Operator ist und was ist Destrukturierungsauftrag.

Erweiterungsoperator (oder Sammlungsoperator): Sie können Array-Ausdrücke oder Zeichenfolgen auf Syntaxebene während Funktionsaufrufen/Array-Erstellung erweitern; Sie können auch Literalobjekte erstellen und den Objektausdruck erweitern auf Schlüsselwert-Weise.
Destrukturierende Zuweisung: Sie können die Werte im Array oder die Eigenschaften des Objekts herausnehmen und sie anderen Variablen zuweisen.

Tatsächlich kann der Erweiterungsoperator entweder eine tiefe Kopie oder eine flache Kopie sein, aber wann ist es eine tiefe Kopie und wann ist es eine flache Kopie?
Ich glaube, Sie werden es verstehen, nachdem Sie die Erklärung unten gelesen haben.

1. Tiefe Kopie

//先来个简单结构的例子
    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);

Das Ergebnis ist wie folgt:

Fügen Sie hier eine Bildbeschreibung ein

2. Flache Kopie

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);

Das Ergebnis ist wie folgt:

Fügen Sie hier eine Bildbeschreibung ein

3. Zusammenfassung

Wenn das Operationsobjekt ein Basisdatentyp und eine einfache Objektstruktur ist, handelt es sich um eine tiefe Kopie. Wenn das Operationsobjekt ein komplexer Datentyp ist, handelt es sich um eine flache Kopie.
Grundlegende Datentypen: Zeichenfolge, Zahl, boolescher Wert, undefiniert, null.
Einfache Datenstruktur: {}, Objekte mit nur einer Objektebene oder Array-Strukturen, wie { [ ] }, { { } }, [ [ ] ] usw. sind allesamt komplexe Datenstrukturen.

Guess you like

Origin blog.csdn.net/m0_46412825/article/details/127768822