JS-15-深拷貝和淺拷貝

1.什麼是深拷貝,什麼是淺拷貝?

1.1深拷貝
修改新變量的值不會影響原有變量的值;
默認情況下基本數據類型都是深拷貝;

1.2淺拷貝
修改新變量的值會影響原有的變量的值;
默認情況下引用類型都是淺拷貝;

// 深拷貝
        let num1 = 123;
        let num2 = num1;
        num2 = 666; // 修改新變量的值
        console.log(num1); // 123
        console.log(num2); // 666
        
// 淺拷貝
        class Person{
            name = "abc";
            age = 22;
        }
        let p1 = new Person();
        let p2 = p1;
        p2.name = "zs"; // 修改變量的值
        console.log(p1.name); // zs
        console.log(p2.name); // zs

2. assign方法可以將第二個參數的對象的屬性和方法拷貝到第一個參數的對象中

例:

     Object.assign(p2, p1);
        // console.log(p2);
     p2.name = "zs";
     console.log(p1.name);
     console.log(p2.name);
     // 注意點: 當只有被拷貝對象中所有屬性都是基本數據類型時, 以上代碼纔是深拷貝
  • 當有對象或數組時(拷貝後會指向同一個原型對象,修改新變量參數同樣會影響之前變量的值)(下面方法爲真正的深拷貝):
  class Person{
            name = "abc";
            cat = {
                age : 3
            };
            scores = [1, 3, 5];
        }
        
 let p1 = new Person();
 let p2 = new Object();

depCopy(p2, p1);

p2.cat.age = 666;

  console.log(p1.cat.age);
  console.log(p2.cat.age);

function depCopy(target, source) {
                 // 1.通過遍歷拿到source中所有的屬性
            for(let key in source){
                // console.log(key);
                
                // 2.取出當前遍歷到的屬性對應的取值
            let sourceValue = source[key];
                // console.log(sourceValue);
                
                // 3.判斷當前的取值是否是引用數據類型
            if(sourceValue instanceof Object){
                    // console.log(sourceValue.constructor);
                    // console.log(new sourceValue.constructor);
                 let subTarget = new sourceValue.constructor; // 創建新的原型對象
                 target[key] = subTarget;
                 depCopy(subTarget, sourceValue);

                }else{
                    target[key] = sourceValue;
                }
            }
        }

-End

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章