秒懂深淺拷貝
- 淺拷貝只是拷貝一層, 更深層次物件級別的只拷貝參考.
- 【情形一】for回圈
- 【情形二】o=obj
- 【情形三】Object.assign(o, obj)
- 深拷貝拷貝多層, 每一級別的資料都會拷貝，
- 深拷貝的實作（遞回的方式）
淺拷貝只是拷貝一層, 更深層次物件級別的只拷貝參考.
【情形一】for回圈
var obj = {
id: 1,
name: 'andy',
msg: {
age: 18
}
};
var o = {};
for (var k in obj) {
// k 是屬性名 obj[k] 屬性值
o[k] = obj[k];
}
console.log(o);
//o拷貝了obj的msg參考
console.log(obj);
console.log('--------------');
var obj = {
id: 1,
name: 'andy',
msg: {
age: 18
}
};
var o = {};
for (var k in obj) {
// k 是屬性名 obj[k] 屬性值
o[k] = obj[k];
}
console.log(o);
//o拷貝了obj的msg參考
console.log(obj);
o.msg.age = 20; //這里換成obj.msg.age = 20;道理一樣，參考值互相影響
console.log('--------------');
var obj = {
id: 1,
name: 'andy',
msg: {
age: 18
}
};
var o = {};
for (var k in obj) {
// k 是屬性名 obj[k] 屬性值
o[k] = obj[k];
}
console.log(o);
o.msg.age = 20;
//o拷貝了obj的msg參考
console.log(obj);
console.log('--------------');
var obj = {
id: 1,
name: 'andy',
msg: {
age: 18
}
};
var o = {};
for (var k in obj) {
// k 是屬性名 obj[k] 屬性值
o[k] = obj[k];
}
console.log(o);
o.id=2;
o.name="leon";
//o.msg.age = 20;
//o拷貝了obj的msg參考
console.log(obj);
console.log('--------------');
var obj = {
id: 1,
name: 'andy',
msg: {
age: 18
}
};
var o = {};
for (var k in obj) {
// k 是屬性名 obj[k] 屬性值
o[k] = obj[k];
}
o.id=2;
o.name="leon";
console.log(o);
//o.msg.age = 20;
//o拷貝了obj的msg參考
console.log(obj);
console.log('--------------');
var obj = {
id: 1,
name: 'andy',
msg: {
age: 18
}
};
var o = {};
for (var k in obj) {
// k 是屬性名 obj[k] 屬性值
o[k] = obj[k];
}
obj.id=2;
obj.name="leon";
console.log(o);
//o.msg.age = 20;
//o拷貝了obj的msg參考
console.log(obj);
console.log('--------------');
var obj = {
id: 1,
name: 'andy',
msg: {
age: 18
}
};
var o = {};
for (var k in obj) {
// k 是屬性名 obj[k] 屬性值
o[k] = obj[k];
}
console.log(o);
//o.msg.age = 20;
//o拷貝了obj的msg參考
console.log(obj);
obj.id=2;
obj.name="leon";
console.log('--------------');
一定得好好注意里面的細節，對于淺拷貝來說，原始值原樣復制，修改其中一方原始值不影響另外一方；更深層次的參考型別只復制參考，修改參考會互相影響，
【情形二】o=obj
var obj = {
id: 1,
name: 'andy',
msg: {
age: 18
}
};
var o = {};
console.log('--------------');
o=obj
console.log(o);//
o.msg.age = 20;//
console.log(obj);//
var obj = {
id: 1,
name: 'andy',
msg: {
age: 18
}
};
var o = {};
console.log('--------------');
//o整個復制了對obj的參考
o=obj
console.log(o);//
console.log(obj);//
obj.msg.age = 20;//
var obj = {
id: 1,
name: 'andy',
msg: {
age: 18
}
};
var o = {};
console.log('--------------');
//o整個復制了對obj的參考
o=obj
console.log(o);//
console.log(obj);//
obj.id=2 //o.id=2同理
obj.name="leon" //o.name="leon"同理
var obj = {
id: 1,
name: 'andy',
msg: {
age: 18
}
};
var o = {};
console.log('--------------');
//o整個復制了對obj的整個參考
o=obj
console.log(o);//
o.id=2
o.name="leon"
console.log(obj);//
o=obj，相當于是將obj整個一層看作整體的參考，將整個物件型別的參考完整復制給了o，因此其中的任何資料修改都會互相影響，
【情形三】Object.assign(o, obj)
var obj = {
id: 1,
name: 'andy',
msg: {
age: 18
}
};
var o = {};
console.log('--------------');
Object.assign(o, obj)
console.log(o);//
o.msg.age = 20;//
console.log(obj);//
var obj = {
id: 1,
name: 'andy',
msg: {
age: 18
}
};
var o = {};
console.log('--------------');
Object.assign(o, obj)
console.log(o);//
console.log(obj);//
obj.msg.age = 20;//
var obj = {
id: 1,
name: 'andy',
msg: {
age: 18
}
};
var o = {};
console.log('--------------');
Object.assign(o, obj)
console.log(o);//
o.id=2
o.name="leon"
console.log(obj);//
var obj = {
id: 1,
name: 'andy',
msg: {
age: 18
}
};
var o = {};
console.log('--------------');
Object.assign(o, obj)
console.log(o);//
console.log(obj);//
obj.id=2
obj.name="leon"
對于Object.assign(o, obj)來說，屬于淺拷貝，只拷貝一層，更深層次物件級別的只拷貝參考，
深拷貝拷貝多層, 每一級別的資料都會拷貝，
深拷貝的實作（遞回的方式）
var obj = {
id: 1,
name: 'andy',
msg: {
age: 18
},
color: ['pink', 'red']
}; //old
var o = {}; //new
// -------------------------------------------------
// 封裝函式
function deepCopy(newobj, oldobj) {
for (var k in oldobj) {
// 判斷我們的屬性值屬于那種資料型別
// 1. 獲取屬性值 oldobj[k]
var item = oldobj[k];
// 2. 判斷這個值是否是陣列
if (item instanceof Array) {
newobj[k] = [];
deepCopy(newobj[k], item)
} else if (item instanceof Object) {
// 3. 判斷這個值是否是物件
newobj[k] = {};
deepCopy(newobj[k], item)
} else {
// 4. 屬于簡單資料型別（number string null undefined boolean）
newobj[k] = item;
}
}
}
deepCopy(o, obj); //將后者拷貝給前者
console.log(o);// age 20
// ------------------------------------------
var arr = [];
console.log(arr instanceof Object); //true**********
//console.log(arr instanceof Array); //true**********
o.msg.age = 20;//
console.log(obj); //拷貝前后兩個物件互不影響干擾 age 18
var obj = {
id: 1,
name: 'andy',
msg: {
age: 18
},
color: ['pink', 'red']
}; //old
var o = {}; //new
// -------------------------------------------------
// 封裝函式 （遞回實作）
function deepCopy(newobj, oldobj) {
for (var k in oldobj) {
// 判斷我們的屬性值屬于那種資料型別
// 1. 獲取屬性值 oldobj[k]
var item = oldobj[k];
// 2. 判斷這個值是否是陣列
if (item instanceof Array) {
newobj[k] = [];
deepCopy(newobj[k], item)
} else if (item instanceof Object) {
// 3. 判斷這個值是否是物件
newobj[k] = {};
deepCopy(newobj[k], item)
} else {
// 4. 屬于簡單資料型別（number string null undefined boolean）
newobj[k] = item;
}
}
}
deepCopy(o, obj); //將后者拷貝給前者
//obj.msg.age = 20;//都是下圖結果，因為在此之前，obj已經深拷貝給了o，
//此后的修改互不影響，
console.log(o);//
// ------------------------------------------
var arr = [];
console.log(arr instanceof Object); //true**********
//console.log(arr instanceof Array); //true**********
obj.msg.age = 20;//
console.log(obj); //拷貝前后兩個物件互不影響干擾
//obj.msg.age = 20;//都是下圖結果
對于簡單基本資料型別的原始值，更是不會相互影響，
var obj = {
id: 1,
name: 'andy',
msg: {
age: 18
},
color: ['pink', 'red']
}; //old
var o = {}; //new
// -------------------------------------------------
// 封裝函式 （遞回實作）
function deepCopy(newobj, oldobj) {
for (var k in oldobj) {
// 判斷我們的屬性值屬于那種資料型別
// 1. 獲取屬性值 oldobj[k]
var item = oldobj[k];
// 2. 判斷這個值是否是陣列
if (item instanceof Array) {
newobj[k] = [];
deepCopy(newobj[k], item)
} else if (item instanceof Object) {
// 3. 判斷這個值是否是物件
newobj[k] = {};
deepCopy(newobj[k], item)
} else {
// 4. 屬于簡單資料型別（number string null undefined boolean）
newobj[k] = item;
}
}
}
deepCopy(o, obj); //將后者拷貝給前者
//******此后的修改互不影響，******
console.log(o);//
// ------------------------------------------
var arr = [];
console.log(arr instanceof Object); //true**********
//console.log(arr instanceof Array); //true**********
console.log(obj); //拷貝前后兩個物件互不影響干擾
obj.id = 20;
將obj深拷貝給了o之后，此后的任何資料的修改都不會相互影響，
關于深拷貝與淺拷貝的相關實作介紹到這，若有幫助，煩請留個贊~ ^ _ ^,一起進步學習，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/246566.html
標籤：其他