淺拷貝和深拷貝的區(qū)別
1.淺拷貝：將源對(duì)象或者原數(shù)組的引用 ```直接賦給``` 新對(duì)象/新數(shù)組 负敏，新對(duì)象/新數(shù)組只是```對(duì)原對(duì)象的一個(gè)引用``` 2.深拷貝：創(chuàng)建一個(gè)新的對(duì)象或者數(shù)組诈唬，將源對(duì)象的各項(xiàng)屬性的值拷貝過(guò)來(lái)是“值”而不是“引用”
為什么要使用深拷貝
希望在改變新數(shù)組/對(duì)象的時(shí)候憔晒，不改變?cè)瓟?shù)組/對(duì)象
深拷貝的要求程度
我們?cè)谑褂蒙羁截惖臅r(shí)候驳阎，一定要弄清楚我們對(duì)深拷貝的要求程度： 是僅僅“深”拷貝第一層級(jí)的對(duì)象屬性或數(shù)組元素码撰，還是遞歸拷貝所有層級(jí)的對(duì)象屬性和數(shù)組元素谭期？
簡(jiǎn)單的對(duì)象深拷貝使用JSON.parse 和JSON.stringify 但是遇到undefined茬高、function兆旬、Symbol的時(shí)候會(huì)在轉(zhuǎn)換過(guò)程中忽略，也就是復(fù)制不了這些類型的數(shù)據(jù)怎栽。eg:
var syb = Symbol('obj');
var person = {
name:'tino',
say:function(){
console.log('hi')
}丽猬，
ok:syb,
un:undefined
};
var copy = JSON.parse(JSON.stringify(person)); //{name:'tino'}
如上所述，如果要復(fù)制的對(duì)象里面含有這些數(shù)據(jù)將不被拷貝熏瞄，然后我們?cè)贀Q一個(gè)方法脚祟，我們自己封裝一個(gè)函數(shù)來(lái)解決。
var arr = [{name:"塞內(nèi)加爾",color:"pink"},{name:"烏斯懷亞",color:"orange"}];
function deepCopy(obj){
var result = Array.isArray(obj)?[]:{};
for(var key in obj){
if(obj.hasOwnProperty(key)){
if(typeof obj[key]==="object"){
result[key] = deepCopy(obj[key]); //遞歸復(fù)制
}else{
result[key] = obj[key];
}
}
}
return result;
}
console.log(deepCopy(person));
//{
// name:'tino',
// say:function(){
// console.log('hi')
// }强饮，
// ok:syb,
// un:undefined
//}
console.log(arr);// [{name:"塞內(nèi)加爾",color:"pink"},{name:"烏斯懷亞",color:"orange"}]
如何檢驗(yàn)深拷貝成功
改變?nèi)我庖粋€(gè)新對(duì)象/數(shù)組的值由桌，如果原對(duì)象/數(shù)組的值不變就成功，否則失敗邮丰。
淺拷貝的第一種方法
function copyFunc(data){
let obj = {};
for(let i in data){
obj[i] = data[i];
}
return obj;
}
var obj = {
a:"hello",
b:{
a:"world",
b:21
},
c:["Bob","Tom","Jenny"],
d:function(){
alert("hello world")
}
};
var qiancopy =copyFunc(obj);
qiancopy.a = "a is changed";
qiancopy.b.a = "b.a is changed";
qiancopy.b.b = "b.b is changed";
qiancopy.c = [1,2,3];
qiancopy.d = function(){
alert('d is changed')
};
console.log('a-'+obj.a); //'hello'
console.log('a-'+qiancopy.a) ; //'changed'
console.log('b.a-'+obj.b.a);// 'b.a is changed'
console.log('b.a-'+qiancopy.b.a) ;// 'b.a is changed'
console.log('b.b-'+obj.b.b); //'b.b is changed'
console.log('b.b-'+qiancopy.b.b) ; // 'b.b is changed'
console.log('c-'+obj.c); //'["Bob","Tom","Jenny"]'
console.log('c-'+qiancopy.c) ; //[1,2,3]
console.log('d-'+obj.d); //function(){alert('hello world')}
console.log('d-'+qiancopy.d) ; //function (){alert("d is changed")}
//事實(shí)上就是只有對(duì)象是拷貝的引用類型
image.png
對(duì)象的值改變是因?yàn)闇\拷貝他們的值指向同一個(gè)對(duì)象
淺拷貝就是拷貝了一層行您，除了對(duì)象是拷貝的引用類型，其他都是直接將值傳遞剪廉，有自己的內(nèi)存空間的娃循。
淺拷貝的第二種方法
ES6的Object.assign()方法，object.assign是es6的新函數(shù)斗蒋。Object.assign()方法可已經(jīng)任意多個(gè)的原對(duì)象自身的可枚舉屬性拷貝給目標(biāo)對(duì)象捌斧，然后返回目標(biāo)對(duì)象笛质。但是object.assign()進(jìn)行的是淺拷貝，拷貝的是對(duì)象的屬性的引用捞蚂，而不是對(duì)象本身妇押。
var obj2= {
a:"1",
b:{
a:"b.a",
b:"b.b"
},
e:3
}
var copyAssign = Object.assign({},obj,obj2);//obj為上面定義的
//如果引用的源對(duì)象有屬性重復(fù)，去最后那個(gè)洞难，如果有新屬性舆吮，直接加進(jìn)去
