轉(zhuǎn)載于：?https://www.cnblogs.com/echolun/p/7889848.html
【JS】深拷貝與淺拷貝的區(qū)別信不，實現(xiàn)深拷貝的幾種方法
如何區(qū)分深拷貝與淺拷貝屏箍，簡單點來說全闷，就是假設(shè)B復(fù)制了A，當(dāng)修改A時斑鸦，看B是否會發(fā)生變化担租，如果B也跟著變了，說明這是淺拷貝喷众，拿人手短，如果B沒變紧憾，那就是深拷貝到千，自食其力。
此篇文章中也會簡單闡述到棧堆赴穗，基本數(shù)據(jù)類型與引用數(shù)據(jù)類型憔四，因為這些概念能更好的讓你理解深拷貝與淺拷貝。
我們來舉個淺拷貝例子：
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ù)類型有哪些，number,string,boolean,null,undefined五類鸠窗。
引用數(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ù)制時，棧內(nèi)存會新開辟一個內(nèi)存臣嚣，例如這樣：
所以當(dāng)你此時修改a=2净刮，對b并不會造成影響，因為此時的b已自食其力硅则，翅膀硬了淹父，不受a的影響了。當(dāng)然怎虫，let a=1,b=a;雖然b不受a影響暑认，但這也算不上深拷貝，因為深拷貝本身只針對較為復(fù)雜的object類型數(shù)據(jù)大审。
b.引用數(shù)據(jù)類型--名存在棧內(nèi)存中蘸际，值存在于堆內(nèi)存中，但是棧內(nèi)存會提供一個引用的地址指向堆內(nèi)存中的值徒扶，我們以上面淺拷貝的例子畫個圖：
當(dāng)b=a進(jìn)行拷貝時粮彤，其實復(fù)制的是a的引用地址，而并非堆里面的值。
而當(dāng)我們a[0]=1時進(jìn)行數(shù)組修改時导坟，由于a與b指向的是同一個地址屿良，所以自然b也受了影響，這就是所謂的淺拷貝了惫周。
那尘惧，要是在堆內(nèi)存中也開辟一個新的內(nèi)存專門為b存放值，就像基本類型那樣闯两，豈不就達(dá)到深拷貝的效果了
1.我們怎么去實現(xiàn)深拷貝呢褥伴，這里可以遞歸遞歸去復(fù)制所有層級屬性。
這么我們封裝一個深拷貝的函數(shù)(PS：只是一個基本實現(xiàn)的展示漾狼，并非最佳實踐)
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)核芽，深拷貝，是拷貝對象各個層級的屬性酵熙，可以看個例子轧简。JQ里有一個extend方法也可以拷貝對象，我們來看看
let a=[1,2,3,4],
? ? b=a.slice();
a[0]=2;
console.log(a,b);
那是不是說slice方法也是深拷貝了匾二，畢竟b也沒受a的影響哮独，上面說了，深拷貝是會拷貝所有層級的屬性察藐，還是這個例子凉袱，我們把a(bǔ)改改
let a=[0,1,[2,3],4],
? ? ? ? b=a.slice();
a[0]=1;a[
2][0]=1;
console.log(a,b);
拷貝的不徹底啊逾一，b對象的一級屬性確實不受影響了伍玖，但是二級屬性還是沒能拷貝成功享幽，仍然脫離不了a的控制，說明slice根本不是真正的深拷貝譬猫。
這里引用知乎問答里面的一張圖
第一層的屬性確實深拷貝讯檐，擁有了獨立的內(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除了實現(xiàn)深拷貝闸准，還能結(jié)合localStorage實現(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類型 第一個以及第N個被合并的對象。
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)付面試題隙咸，在實際開發(fā)中也是非常有用的。例如后臺返回了一堆數(shù)據(jù)耳高，你需要對這堆數(shù)據(jù)做操作扎瓶，但多人開發(fā)情況下，你是沒辦法明確這堆數(shù)據(jù)是否有其它功能也需要使用泌枪，直接修改可能會造成隱性問題概荷，深拷貝能幫你更安全安心的去操作數(shù)據(jù)，根據(jù)實際情況來使用深拷貝碌燕，大概就是這個意思误证。
本文算是個人對于深淺拷貝的學(xué)習(xí)筆記整理，這里借用了以下資料的思想修壕。
js面試題：實現(xiàn)對象深度克掠薄（deepClone）的三種方案
PS：下面這些話與深拷貝淺拷貝無關(guān)慈鸠，可以不看
本覺得知識在于分享蓝谨，不想添加轉(zhuǎn)載標(biāo)明出去，圖片加水印，直到我綁定博客園的郵箱收到了這兩條評論：
我好奇的點進(jìn)了他發(fā)的'原文鏈接'譬巫，然后發(fā)現(xiàn)：
圖直接用的我的不說咖楣，連我抽煙的表情包都拿過去了....
全文闡述也只是在我的文章基礎(chǔ)上換了下順序，這就算是一篇'原創(chuàng)'了芦昔，我都不敢說自己是原創(chuàng)...
我在他博文下客氣的回復(fù)也被他刪除了诱贿。
知識在于分享，轉(zhuǎn)載標(biāo)明出處咕缎，不得不說珠十，我屈服了。
