深拷貝 && 淺拷貝
阿新 • • 發佈:2018-11-03
區別
深拷貝:A 複製了 B,A 改變,B 不變
淺拷貝:A 複製了 B,A 變B 也變;
淺拷貝只拷貝了資料的第一層,對引用型的資料只拷貝了引用。深拷貝是拷貝多層資料,每一層資料都拷貝了。
實現淺拷貝的方法
-
直接賦值
-
Object.assign()
var obj1 = {
a: "hello",
b: {
a: "hello",
b: 21}
};
var cloneObj1= Object.assign({}, obj1);
cloneObj1.a = "changed" ;
cloneObj1.b.a = "changed";
console.log(obj1.a); //hello
實現深拷貝的方法
- JSON.pares(JSON.stringify(object))
通過 JSON.pares(JSON.stringify(object)) 來解決這個問題
let obj1 = {
age : 18,
bank : {
b1 : '中國招商銀行',
}
}
let obj2 = JSON.parse(JSON.stringify (obj1))
obj1.bank.b1 = '中國建設銀行'
console.log(obj2.bank.b1) // 中國招商銀行
缺點:
1)會忽略 undefined
2)不能序列化函式
3)拋棄原物件的 constructor,變為 object
let obj = {
name: unfefined,
say: function () {},
school: 'HNUST'
}
let res = JSON.parse(JSON.stringify(obj)) // {school: 'HNUST'}
// 該方法會忽略掉函式和 undefined ,所以序列化後就只有school
- Object,create()
function deepClone(initalObj, finalObj) {
var obj = finalObj || {};
for (var i in initalObj) {
var prop = initalObj[i]; // 避免相互引用物件導致死迴圈,如initalObj.a = initalObj的情況
if(prop === obj) {
continue;
}
if (typeof prop === 'object') {
obj[i] = (prop.constructor === Array) ? [] : Object.create(prop);
} else {
obj[i] = prop;
}
}
return obj;