壹 ❀ 引
如何區分深拷貝與淺拷貝，簡單點來說，就是假設B復制了A，當修改A時，看B是否會發生變化，如果B也跟着變了，說明這是淺拷貝，拿人手短，如果B沒變，那就是深拷貝，自食其力。
此篇文章中也會簡單闡述到棧堆，基本數據類型與引用數據類型，因為這些概念能更好的讓你理解深拷貝與淺拷貝。
我們來舉個淺拷貝例子：
let a=[0,1,2,3,4],
b=a;
console.log(a===b);
a[0]=1;
console.log(a,b);
嗯？明明b復制了a，為啥修改數組a，數組b也跟着變了，這里我不禁陷入了沉思。
那么這里，就得引入基本數據類型與引用數據類型的概念了。
貳 ❀ 基本數據與復雜(引用)數據
面試常問，基本數據類型有哪些，number，string，boolean，null，undefined，symbol以及未來ES10新增的BigInt(任意精度整數)七類。
引用數據類型(Object類)有常規名值對的無序對象{a:1}，數組[1,2,3]，以及函數等。
而這兩類數據存儲分別是這樣的：
a.基本類型--名值存儲在棧內存中，例如let a=1;
當你b=a復制時，棧內存會新開辟一個內存，例如這樣：
所以當你此時修改a=2，對b並不會造成影響，因為此時的b已自食其力，翅膀硬了，不受a的影響了。當然，let a=1,b=a;雖然b不受a影響，但這也算不上深拷貝，因為深拷貝本身只針對較為復雜的object類型數據。
b.引用數據類型--名存在棧內存中，值存在於堆內存中，但是棧內存會提供一個引用的地址指向堆內存中的值，我們以上面淺拷貝的例子畫個圖：
當b=a進行拷貝時，其實復制的是a的引用地址，而並非堆里面的值。
而當我們a[0]=1時進行數組修改時，由於a與b指向的是同一個地址，所以自然b也受了影響，這就是所謂的淺拷貝了。
那，要是在堆內存中也開辟一個新的內存專門為b存放值，就像基本類型那樣，豈不就達到深拷貝的效果了
叄 ❀ 實現簡單的深拷貝
1.我們怎么去實現深拷貝呢，這里可以遞歸遞歸去復制所有層級屬性。
這么我們封裝一個深拷貝的函數(PS：只是一個基本實現的展示，並非最佳實踐)
function deepClone(obj){
let objClone = Array.isArray(obj)?[]:{};
if(obj && typeof obj==="object"){
for(key in obj){
if(obj.hasOwnProperty(key)){
//判斷ojb子元素是否為對象，如果是，遞歸復制
if(obj[key]&&typeof obj[key] ==="object"){
objClone[key] = deepClone(obj[key]);
}else{
//如果不是，簡單復制
objClone[key] = obj[key];
}
}
}
}
return objClone;
}
let a=[1,2,3,4],
b=deepClone(a);
a[0]=2;
console.log(a,b);
可以看到
跟之前想象的一樣，現在b脫離了a的控制，不再受a影響了。
這里再次強調，深拷貝，是拷貝對象各個層級的屬性，可以看個例子。JQ里有一個extend方法也可以拷貝對象，我們來看看
let a=[1,2,3,4],
b=a.slice();
a[0]=2;
console.log(a,b);
那是不是說slice方法也是深拷貝了，畢竟b也沒受a的影響，上面說了，深拷貝是會拷貝所有層級的屬性，還是這個例子，我們把a改改
let a=[0,1,[2,3],4],
b=a.slice();
a[0]=1;
a[2][0]=1;
console.log(a,b);
拷貝的不徹底啊，b對象的一級屬性確實不受影響了，但是二級屬性還是沒能拷貝成功，仍然脫離不了a的控制，說明slice根本不是真正的深拷貝。
這里引用知乎問答里面的一張圖
第一層的屬性確實深拷貝，擁有了獨立的內存，但更深的屬性卻仍然公用了地址，所以才會造成上面的問題。
同理，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除了實現深拷貝，還能結合localStorage實現對象數組存儲。有興趣可以閱讀博主這篇文章。
localStorage存儲數組，對象，localStorage,sessionStorage存儲數組對象
3.除了上面兩種方法之外，我們還可以借用JQ的extend方法。
$.extend( [deep ], target, object1 [, objectN ] )
deep表示是否深拷貝，為true為深拷貝，為false，則為淺拷貝
target Object類型 目標對象，其他對象的成員屬性將被附加到該對象上。
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庫。
說了這么多，了解深拷貝也不僅僅是為了應付面試題，在實際開發中也是非常有用的。例如后台返回了一堆數據，你需要對這堆數據做操作，但多人開發情況下，你是沒辦法明確這堆數據是否有其它功能也需要使用，直接修改可能會造成隱性問題，深拷貝能幫你更安全安心的去操作數據，根據實際情況來使用深拷貝，大概就是這個意思。
肆 ❀ 總
那么到這里，我們知道了深拷貝與淺拷貝的區別，同時從數據存儲規則來解釋，也明白了為什么要使用深拷貝；其次，我們知道了幾種簡單粗暴的深拷貝辦法，也明白在何種情況下我們應該使用深拷貝。
對於文章中簡單提及的棧堆概念，我專門整理了一篇關於JS內存空間的文章，若有興趣歡迎閱讀 JS 從內存空間談到垃圾回收機制 這篇文章。
其實stringify與parse在日常開發中使用特別頻繁，如果大家對於它兩還有不解，可以閱讀博主 json.stringify()的妙用，json.stringify()與json.parse()的區別 這篇文章。