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;
}
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/538664.html
標籤：其他