壹 ? 引
如何區(qū)分深拷貝與淺拷貝厂僧，簡單點(diǎn)來說扣草，就是假設(shè)B復(fù)制了A，當(dāng)修改A時(shí)吁系，看B是否會發(fā)生變化德召，如果B也跟著變了白魂，說明這是淺拷貝汽纤，拿人手短，如果B沒變福荸，那就是深拷貝蕴坪，自食其力。
此篇文章中也會簡單闡述到棧堆敬锐，基本數(shù)據(jù)類型與引用數(shù)據(jù)類型背传，因?yàn)檫@些概念能更好的讓你理解深拷貝與淺拷貝。
我們來舉個(gè)淺拷貝例子：
let a=[0,1,2,3,4],
? ? b=a;
console.log(a===b);
a[0]=1;
console.log(a,b);
嗯台夺？明明b復(fù)制了a径玖，為啥修改數(shù)組a，數(shù)組b也跟著變了颤介，這里我不禁陷入了沉思梳星。
那么這里，就得引入基本數(shù)據(jù)類型與引用數(shù)據(jù)類型的概念了滚朵。
?貳 ? 基本數(shù)據(jù)與復(fù)雜(引用)數(shù)據(jù)
面試常問冤灾，基本數(shù)據(jù)類型有哪些，number辕近，string韵吨，boolean，null移宅，undefined归粉，symbol以及未來ES10新增的BigInt(任意精度整數(shù))七類椿疗。
引用數(shù)據(jù)類型(Object類)有常規(guī)名值對的無序?qū)ο髙a:1}，數(shù)組[1,2,3]糠悼，以及函數(shù)等变丧。
而這兩類數(shù)據(jù)存儲分別是這樣的：
a.基本類型--名值存儲在棧內(nèi)存中，例如let a=1;
當(dāng)你b=a復(fù)制時(shí)绢掰，棧內(nèi)存會新開辟一個(gè)內(nèi)存痒蓬，例如這樣：
所以當(dāng)你此時(shí)修改a=2，對b并不會造成影響滴劲，因?yàn)榇藭r(shí)的b已自食其力攻晒，翅膀硬了闷堡，不受a的影響了竹揍。當(dāng)然捺典，let a=1,b=a;雖然b不受a影響粤咪，但這也算不上深拷貝胀蛮，因?yàn)樯羁截惐旧碇会槍^為復(fù)雜的object類型數(shù)據(jù)下翎。
b.引用數(shù)據(jù)類型--名存在棧內(nèi)存中刁憋，值存在于堆內(nèi)存中珍昨，但是棧內(nèi)存會提供一個(gè)引用的地址指向堆內(nèi)存中的值双揪，我們以上面淺拷貝的例子畫個(gè)圖：
當(dāng)b=a進(jìn)行拷貝時(shí)动羽，其實(shí)復(fù)制的是a的引用地址，而并非堆里面的值渔期。
而當(dāng)我們a[0]=1時(shí)進(jìn)行數(shù)組修改時(shí)运吓，由于a與b指向的是同一個(gè)地址，所以自然b也受了影響疯趟，這就是所謂的淺拷貝了拘哨。
那，要是在堆內(nèi)存中也開辟一個(gè)新的內(nèi)存專門為b存放值信峻，就像基本類型那樣倦青，豈不就達(dá)到深拷貝的效果了
?叁 ? 實(shí)現(xiàn)簡單的深拷貝
1.我們怎么去實(shí)現(xiàn)深拷貝呢，這里可以遞歸遞歸去復(fù)制所有層級屬性盹舞。
這么我們封裝一個(gè)深拷貝的函數(shù)(PS：只是一個(gè)基本實(shí)現(xiàn)的展示产镐，并非最佳實(shí)踐)
function deepClone(obj){
? ? let objClone = Array.isArray(obj)?[]:{};
? ? if(obj &&typeofobj==="object"){
? ? ? ? for(keyin obj){
? ? ? ? ? ? if(obj.hasOwnProperty(key)){
? ? ? ? ? ? ? ? //判斷ojb子元素是否為對象，如果是矾策，遞歸復(fù)制if(obj[key]&&typeofobj[key] ==="object"){
? ? ? ? ? ? ? ? ? ? objClone[key] = deepClone(obj[key]);
? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? //如果不是磷账，簡單復(fù)制objClone[key] = obj[key];
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? }
? ? return objClone;
}? ?
let a=[1,2,3,4],
? ? b=deepClone(a);
a[0]=2;
console.log(a,b);
可以看到
跟之前想象的一樣，現(xiàn)在b脫離了a的控制贾虽，不再受a影響了逃糟。
這里再次強(qiáng)調(diào)，深拷貝，是拷貝對象各個(gè)層級的屬性绰咽，可以看個(gè)例子菇肃。JQ里有一個(gè)extend方法也可以拷貝對象，我們來看看
let a=[1,2,3,4],
? ? b=a.slice();
a[0]=2;
console.log(a,b);
那是不是說slice方法也是深拷貝了取募，畢竟b也沒受a的影響琐谤，上面說了，深拷貝是會拷貝所有層級的屬性玩敏，還是這個(gè)例子斗忌，我們把a(bǔ)改改
let a=[0,1,[2,3],4],
? ? ? ? b=a.slice();
a[0]=1;a[
2][0]=1;
console.log(a,b);
拷貝的不徹底啊，b對象的一級屬性確實(shí)不受影響了旺聚，但是二級屬性還是沒能拷貝成功织阳，仍然脫離不了a的控制，說明slice根本不是真正的深拷貝砰粹。
這里引用知乎問答里面的一張圖
第一層的屬性確實(shí)深拷貝唧躲，擁有了獨(dú)立的內(nèi)存，但更深的屬性卻仍然公用了地址碱璃，所以才會造成上面的問題弄痹。
同理，concat方法與slice也存在這樣的情況嵌器，他們都不是真正的深拷貝肛真，這里需要注意。
2.除了遞歸嘴秸，我們還可以借用JSON對象的parse和stringify
function deepClone(obj){
? ? let _obj = JSON.stringify(obj),
? ? ? ? objClone = JSON.parse(_obj);
? ? return objClone
}? ?
let a=[0,1,[2,3],4],
? ? b=deepClone(a);
a[0]=1;
a[2][0]=1;
console.log(a,b);
可以看到毁欣，這下b是完全不受a的影響了庇谆。
附帶說下岳掐，JSON.stringify與JSON.parse除了實(shí)現(xiàn)深拷貝饭耳，還能結(jié)合localStorage實(shí)現(xiàn)對象數(shù)組存儲。有興趣可以閱讀博主這篇文章寞肖。
localStorage存儲數(shù)組纲酗，對象新蟆，localStorage,sessionStorage存儲數(shù)組對象
3.除了上面兩種方法之外，我們還可以借用JQ的extend方法琼稻。
$.extend( [deep ], target, object1 [, objectN ] )
deep表示是否深拷貝，為true為深拷貝，為false萝风，則為淺拷貝
target Object類型 目標(biāo)對象，其他對象的成員屬性將被附加到該對象上紫岩。
object1??objectN可選。 Object類型 第一個(gè)以及第N個(gè)被合并的對象泉蝌。?
let a=[0,1,[2,3],4],
? ? b=$.extend(true,[],a);
a[0]=1;
a[2][0]=1;
console.log(a,b);
可以看到，效果與上面方法一樣勋陪，只是需要依賴JQ庫。
說了這么多粥鞋，了解深拷貝也不僅僅是為了應(yīng)付面試題，在實(shí)際開發(fā)中也是非常有用的呻粹。例如后臺返回了一堆數(shù)據(jù)，你需要對這堆數(shù)據(jù)做操作等浊，但多人開發(fā)情況下腮郊，你是沒辦法明確這堆數(shù)據(jù)是否有其它功能也需要使用，直接修改可能會造成隱性問題筹燕，深拷貝能幫你更安全安心的去操作數(shù)據(jù)轧飞，根據(jù)實(shí)際情況來使用深拷貝，大概就是這個(gè)意思撒踪。
?肆 ? 總
那么到這里过咬，我們知道了深拷貝與淺拷貝的區(qū)別，同時(shí)從數(shù)據(jù)存儲規(guī)則來解釋制妄，也明白了為什么要使用深拷貝掸绞；其次，我們知道了幾種簡單粗暴的深拷貝辦法耕捞，也明白在何種情況下我們應(yīng)該使用深拷貝衔掸。
對于文章中簡單提及的棧堆概念，我專門整理了一篇關(guān)于JS內(nèi)存空間的文章俺抽，若有興趣歡迎閱讀JS 從內(nèi)存空間談到垃圾回收機(jī)制這篇文章敞映。
其實(shí)stringify與parse在日常開發(fā)中使用特別頻繁，如果大家對于它兩還有不解磷斧，可以閱讀博主?json.stringify()的妙用振愿，json.stringify()與json.parse()的區(qū)別這篇文章诗芜。
