JavaScript淺拷貝與深拷貝

1.? 什么是淺拷貝，深拷貝？

淺拷貝：只復制一層物件，即只復制參考，沒有復制真正的值，
( 淺拷貝僅僅是指向被復制的記憶體地址，如果原物件被改變了，那么新物件也會相應改變 )

深拷貝：徹底復制一個物件，拷貝多層，而不是只復制物件的參考，
（ 深拷貝建一個新的物件，將原物件的各屬性的值拷貝過來，改變原物件的值時，不會改變新物件的值 ）

舉個例子：

let drinking = {
    name : "milk",
    volume : "250mL",
    pride : {
        value : 8
    }
};

function deepCopy(object) {
    let obj = object instanceof Array ? [] : {};
    for (const [key, val] of Object.entries(object)) {
      obj[key] = typeof val === "object" ? deepCopy(val) : val;
    }
    return obj;
};

let drinking1 = drinking;
let drinking2 = deepCopy(drinking);
console.log("drinking: ", drinking);
console.log("drinking1: ", drinking1);
console.log("drinking2: ", drinking2);

drinking.name = "coffee";
console.log("drinking: ", drinking);
console.log("drinking1: ", drinking1);
console.log("drinking2: ", drinking2);

2.?常用的淺拷貝方法

2.1） ‘=’ 賦值

let drinking = {
	name : "milk",
    pride : 8
};
let drinking1 = drinking;

drinking1.name = "coffee";
console.log("drinking: ", drinking);

2.2) 擴展運算子

我們可以使用擴展運算子 … 來進行淺拷貝
需要注意的是：
擴展運算子 … 可以進行一層的深拷貝

let drinking = {
    name : "milk",
    pride : 8,
    volume : {
        value : "250mL"
    }
};

let drinking1 = {...drinking};
drinking1.name = "water";
drinking1.volume.value = "550mL";
console.log("drinking_name: ", drinking.name); // milk，因為進行了一層的深拷貝
console.log("drinking_volume_value: ", drinking.volume.value); // 到了一下層，所以是淺拷貝

2.3) Object.assign()

Object.assign() 將一個或多個物件的屬性復制給目標物件，

• 接受一個引數時：淺拷貝

let drinking = {
    name : "milk",
    pride : 8,
    volume : {
        value : "250mL"
    }
};

let drinking2 = {
    name2 : "tea"
}

let drinking1 = Object.assign(drinking2,drinking);
drinking1.name = "water";
drinking1.volume.value = "550mL";
console.log("drinking_name: ", drinking.name);
console.log("drinking_volume_value: ", drinking.volume.value);

• 接受多個引數時：

需要注意的是：
Object.assign() 會進行一層的深拷貝，剩下層都是淺拷貝，

let drinking = {
    name : "milk",
    pride : 8,
    volume : {
        value : "250mL"
    }
};

let drinking1 = Object.assign({}, drinking);
drinking1.name = "water";
drinking1.volume.value = "550mL";
console.log("drinking_name: ", drinking.name); // milk， 因為是第一層，進行了一次深拷貝
console.log("drinking_volume_value: ", drinking.volume.value); // 550mL，因為到了下一層，進行淺拷貝

2.4) for … in

會進行一層深拷貝，剩下層都是淺拷貝，

let drinking = {
    name : "milk",
    pride : 8,
    volume : {
        value : "250mL"
    }
};

let drinking1 = {};
for (const key in drinking) {
    drinking1[key] = drinking[key];
};

drinking1.name = "coffee";
drinking1.volume.value = "550mL";
console.log("drinking_name: ", drinking.name);
console.log("drinking_volume_value: ", drinking.volume.value);

3.?常用的深拷貝方法

3.1) 遞回

let drinking = {
    name : "milk",
    volume : "250mL",
    pride : {
        value : 8
    }
};

function deepCopy(object) {
    let obj = object instanceof Array ? [] : {};
    for (const [key, val] of Object.entries(object)) {
      obj[key] = typeof val === "object" ? deepCopy(val) : val;
    }
    return obj;
};

let drinking1 = deepCopy(drinking);
drinking1.name = "coffee";
drinking1.pride.value = 12;

console.log("drinking1: ", drinking1);
console.log("drinking: ", drinking);

3.2) JSON做字串轉換

利用 JSON.stringify() 和 JSON.parse()
需要注意的是：
只有可以轉成JSON格式的物件才可以這樣用，像function沒辦法轉成JSON，就不可以，

let drinking = {
    name : "milk",
    volume : "250mL",
    pride : {
        value : 8
    }
};

let strDrinking = JSON.stringify(drinking);
let drinking1 = JSON.parse(strDrinking);
console.log("drinking1", drinking1);

drinking1.name = "coffee";
drinking1.pride.value = 12;
console.log("drinking1", drinking1);
console.log("drinking", drinking);