淺拷貝和深拷貝

title: 淺拷貝和深拷貝

概念

• 淺拷貝：只拷貝最外面一層的數據；更深層次的對象，只拷貝引用。

• 深拷貝：拷貝多層數據；每一層級別的數據都會拷貝。

總結：

拷貝引用的時候，是屬於傳址，而非傳值。關於傳值和傳址的區別，是很基礎的內容，詳見《JavaScript 基礎/對象簡介.md》這篇文章。

深拷貝會把對象里所有的數據重新複製到新的記憶體空間，是最徹底的拷貝。

淺拷貝的實現方式

用 for in 實現淺拷貝（比較繁瑣）

const obj1 = {
    name: 'qianguyihao',
    age: 28,
    info: {
        desc: '很厲害',
    },
};

const obj2 = {};
//  用 for in 將 obj1 的值拷貝給 obj2
for (let key in obj1) {
    obj2[key] = obj1[key];
}

console.log('obj2:' + JSON.stringify(obj2));

obj1.info.desc = '永不止步'; // 當修改 obj1 的第二層數據時，obj2的值也會被改變。所以  for in 是淺拷貝

console.log('obj2:' + JSON.stringify(obj2));

上方代碼中，用 for in 做拷貝時，只能做到淺拷貝。也就是說，在 obj2 中， name 和 age 這兩個屬性會單獨存放在新的記憶體地址中，和 obj1 沒有關係。但是，obj2.info 屬性，跟 obj1.info屬性，它倆指向的是同一個堆記憶體地址。所以，當我修改 obj1.info 里的值之後，obj2.info的值也會被修改。

列印結果如下：

obj2:{"name":"qianguyihao","age":28,"info":{"desc":"很厲害"}}

obj2:{"name":"qianguyihao","age":28,"info":{"desc":"永不止步"}}

用 Object.assgin() 實現淺拷貝（推薦的方式）

上面的 for in 方法做淺拷貝過於繁瑣。ES6 給我們提供了新的語法糖，通過 Object.assgin() 可以實現淺拷貝。

Object.assgin() 在日常開發中，使用得相當頻繁，非掌握不可。

語法：

// 語法1
obj2 = Object.assgin(obj2, obj1);

// 語法2
Object.assign(目標對象, 源對象1, 源對象2...);

解釋：將obj1 拷貝給 obj2。執行完畢後，obj2 的值會被更新。

作用：將 obj1 的值追加到 obj2 中。如果對象里的屬性名相同，會被覆蓋。

從語法2中可以看出，Object.assign() 可以將多個“源對象”拷貝到“目標對象”中。

例 1：

const obj1 = {
    name: 'qianguyihao',
    age: 28,
    info: {
        desc: 'hello',
    },
};

// 淺拷貝：把 obj1 拷貝給 obj2。如果 obj1 只有一層數據，那麼，obj1 和 obj2 則互不影響
const obj2 = Object.assign({}, obj1);
console.log('obj2:' + JSON.stringify(obj2));

obj1.info.desc = '永不止步'; // 由於 Object.assign() 只是淺拷貝，所以當修改 obj1 的第二層數據時，obj2 對應的值也會被改變。
console.log('obj2:' + JSON.stringify(obj2));

代碼解釋：由於 Object.assign() 只是淺拷貝，所以在當前這個案例中， obj2 中的 name 屬性和 age 屬性是單獨存放在新的堆記憶體地址中的，和 obj1 沒有關係；但是，obj2.info 屬性，跟 obj1.info屬性，它倆指向的是同一個堆記憶體地址。所以，當我修改 obj1.info 里的值之後，obj2.info的值也會被修改。

列印結果：

obj2:{"name":"qianguyihao","age":28,"info":{"desc":"hello"}}

obj2:{"name":"qianguyihao","age":28,"info":{"desc":"永不止步"}}

例 2：

const myObj = {
    name: 'qianguyihao',
    age: 28,
};

// 【寫法1】淺拷貝：把 myObj 拷貝給 obj1
const obj1 = {};
Object.assign(obj1, myObj);

// 【寫法2】淺拷貝：把 myObj 拷貝給 obj2
const obj2 = Object.assign({}, myObj);

// 【寫法3】淺拷貝：把 myObj 拷貝給 obj31。註意，這裡的 obj31 和 obj32 其實是等價的，他們指向了同一個記憶體地址
const obj31 = {};
const obj32 = Object.assign(obj31, myObj);

上面這三種寫法，是等價的。所以，當我們需要將對象 A 複製（拷貝）給對象 B，不要直接使用 B = A，而是要使用 Object.assign(B, A)。

例 3：

let obj1 = { name: 'qianguyihao', age: 26 };
let obj2 = { city: 'shenzhen', age: 28 };
let obj3 = {};

Object.assign(obj3, obj1, obj2); // 將 obj1、obj2的內容賦值給 obj3
console.log(obj3); // {name: "qianguyihao", age: 28, city: "shenzhen"}

上面的代碼，可以理解成：將多個對象（obj1和obj2）合併成一個對象 obj3。

例4：【重要】

const obj1 = {
    name: 'qianguyihao',
    age: 28,
    desc: 'hello world',
};

const obj2 = {
    name: '許嵩',
    sex: '男',
};

// 淺拷貝：把 obj1 賦值給 obj2。這一行，是關鍵代碼。這行代碼的返回值也是 obj2
Object.assign(obj2, obj1);

console.log(JSON.stringify(obj2));

列印結果：

{
    "name":"qianguyihao",
    "sex":"男",
    "age":28,
    "desc":"hello world"
}

註意，例 4 在實際開發中，會經常遇到，一定要掌握。它的作用是：將 obj1 的值追加到 obj2 中。如果兩個對象里的屬性名相同，則 obj2 中的值會被 obj1 中的值覆蓋。

深拷貝的實現方式

深拷貝其實就是將淺拷貝進行遞歸。

用 for in 遞歸實現深拷貝

代碼實現：

let obj1 = {
    name: 'qianguyihao',
    age: 28,
    info: {
        desc: 'hello',
    },
    color: ['red', 'blue', 'green'],
};
let obj2 = {};

deepCopy(obj2, obj1);
console.log(obj2);
obj1.info.desc = 'github';
console.log(obj2);

// 方法：深拷貝
function deepCopy(newObj, oldObj) {
    for (let key in oldObj) {
        // 獲取屬性值 oldObj[key]
        let item = oldObj[key];
        // 判斷這個值是否是數組
        if (item instanceof Array) {
            newObj[key] = [];
            deepCopy(newObj[key], item);
        } else if (item instanceof Object) {
            // 判斷這個值是否是對象
            newObj[key] = {};
            deepCopy(newObj[key], item);
        } else {
            // 簡單數據類型，直接賦值
            newObj[key] = item;
        }
    }
}