JS中物件的深淺克隆
一、物件的淺克隆
1.淺克隆：只克隆物件的“表層”，如果物件的某些屬性值又是參考型別值，則不進一步克隆它們，只是傳遞它們的參考
2.使用for…in…回圈即可實作物件的淺克隆
var obj1 = {
a: 1,
b: 2,
c: [44, 55, 66]
};
// 實作淺克隆
var obj2 = {};
for(var k in obj1){
// 每遍歷一個k屬性，就給obj2也添加一個同名的k屬性
// 值和obj1的k屬性值相同
obj2[k] = obj1[k];
}
// 為什么叫淺克隆呢？比如c屬性的值是參考型別值，那么本質上obj1和obj2的c屬性是記憶體中的同一個陣列，并沒有被克隆分開，
obj1.c.push(77);
console.log(obj2); // obj2的c屬性這個陣列也會被增加77陣列
console.log(obj1.c == obj2.c); // true，true就證明了陣列是同一個物件
二、物件的深克隆
1.克隆物件的全貌，不論物件的屬性值是否又是參考型別值，都能將它們實作克隆
2.和陣列的深克隆類似，物件的深克隆需要使用遞回（面試常考）
var obj1 = {
a: 1,
b: 2,
c: [33, 44, {
m: 55,
n: 66,
p: [77, 88]
}]
};
// 深克隆
function deepClone(o) {
// 要判斷o是物件還是陣列
//要注意if陳述句的判斷順序，因為陣列的typeof也是object，即如果先檢測typeof o == 'object'
//陣列和物件都為object ，先檢測陣列
if (Array.isArray(o)) {
// 陣列
var result = [];
for (var i = 0; i < o.length; i++) {
result.push(deepClone(o[i]));
}
} else if (typeof o == 'object') {
// 物件
var result = {};
for (var k in o) {
result[k] = deepClone(o[k]);
}
} else {
// 基本型別值
var result = o;
}
return result;
}
var obj2 = deepClone(obj1);
console.log(obj2); //被克隆
console.log(obj1.c == obj2.c); // false說明被克隆了，記憶體中不同的物件
obj1.c.push(99);
console.log(obj2); // obj2不變的，因為沒有“藕斷絲連”的現象
obj1.c[2].p.push(999);
console.log(obj2); // obj2不變的，因為沒有“藕斷絲連”的現象
想了解陣列的淺克隆和深克隆點擊即可
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/398698.html
標籤：其他
上一篇：瀏覽器開發者工具入門筆記