1.背景介紹
在JavaScript中课锌，對(duì)于Object和Array這類引用類型值，當(dāng)從一個(gè)變量向另一個(gè)變量復(fù)制引用類型值時(shí)，這個(gè)值的副本其實(shí)是一個(gè)指針，兩個(gè)變量指向同一個(gè)堆對(duì)象乡小，改變其中一個(gè)變量，另一個(gè)也會(huì)受到影響饵史。
這種拷貝分為兩種情況：拷貝引用和拷貝實(shí)例，也就是我們說的淺拷貝和深拷貝
?
2.知識(shí)剖析
基本類型：
5種基本數(shù)據(jù)類型Undefined胜榔、Null胳喷、Boolean、Number 和 String夭织，變量是直接按值存放的吭露，存放在棧內(nèi)存中的簡單數(shù)據(jù)段，可以直接訪問尊惰。
引用類型：
存放在堆內(nèi)存中的對(duì)象讲竿，變量保存的是一個(gè)指針，這個(gè)指針指向另一個(gè)位置弄屡。當(dāng)需要訪問引用類型（如對(duì)象题禀，數(shù)組等）的值時(shí)，首先從棧中獲得該對(duì)象的地址指針膀捷，然后再從堆內(nèi)存中取得所需的數(shù)據(jù)迈嘹。
JavaScript存儲(chǔ)對(duì)象都是存地址的，所以淺拷貝會(huì)導(dǎo)致 obj1 和obj2
??指向同一塊內(nèi)存地址全庸。改變了其中一方的內(nèi)容秀仲，都是在原來的內(nèi)存上做修改會(huì)導(dǎo)致拷貝對(duì)象和源對(duì)象都發(fā)生改變，而深拷貝是開辟一塊新的內(nèi)存地址壶笼，將原對(duì)象的各個(gè)屬性逐個(gè)復(fù)制進(jìn)去神僵。對(duì)拷貝對(duì)象和源對(duì)象各自的操作互不影響。
JS數(shù)組的淺拷貝
簡單的賦值就是淺拷貝覆劈。因?yàn)閷?duì)象和數(shù)組在賦值的時(shí)候都是引用傳遞保礼。賦值的時(shí)候只是傳遞一個(gè)指針。
var a = [1,2,3];
var b =a ;
console.log(a,b);
b[0]="a";
console.log(a);
console.log(b);
淺拷貝很容易墩崩，但是很多時(shí)候我們需要原樣的把數(shù)組或者對(duì)象復(fù)制一份氓英，在修改值的時(shí)候，不改變初始對(duì)象的值鹦筹。這個(gè)時(shí)候就需要使用深拷貝铝阐。
JS數(shù)組的深拷貝
方法一：js的slice函數(shù)
slice() 方法可從已有的數(shù)組中返回選定的元素。
【語法】arrayObject.slice(start,end)
【參數(shù)】arrayObj--必選項(xiàng)：一個(gè)Array對(duì)象铐拐。start--必選項(xiàng)：arrayObj中所指定的部分的開始元素是從零開始計(jì)算的下標(biāo)徘键。end--可選項(xiàng)：arrayObj中所指定的部分的結(jié)束元素是從零開始計(jì)算的下標(biāo)练对。
【說明】
slice 方法返回一個(gè)Array對(duì)象，其中包含了arrayObj的指定部分吹害。slice方法一直復(fù)制到end所指定的元素螟凭，但是不包括該元素。如果start為負(fù)它呀，將它作為length +
start處理螺男，此處length為數(shù)組的長度。如果end為負(fù)纵穿，就將它作為length + end處理下隧，此處length為數(shù)組的長度。如果省略end 谓媒，那么slice方法將一直復(fù)制到 arrayObj
的結(jié)尾淆院。如果end出現(xiàn)在start之前，不復(fù)制任何元素到新數(shù)組中句惯。
實(shí)例：
var a = [1,2,3,4,5];
var b = a.slice(0,2);
var c = a.slice(-3,-1);
var d = a.slice(-1,-3);
console.log(b,c,d);
方法二：js的concat函數(shù)
concat() 方法用于連接兩個(gè)或多個(gè)數(shù)組土辩。該方法不會(huì)改變現(xiàn)有的數(shù)組，而僅僅會(huì)返回被連接數(shù)組的一個(gè)副本抢野。
【語法】arrayObject.concat(arrayX,arrayy,......,arrayN)
【參數(shù)】arrayX--必需：該參數(shù)可以是具體的值拷淘，也可以是數(shù)組對(duì)象∶杀＃可以是空值辕棚，可以是任意多個(gè)。
【說明】
返回一個(gè)新的數(shù)組邓厕。該數(shù)組是通過把所有 arrayX 參數(shù)添加到 arrayObject 中生成的逝嚎。如果要進(jìn)行 concat()操作的參數(shù)是數(shù)組，那么添加的是數(shù)組中的元素详恼，而不是數(shù)組补君。
實(shí)例：
var a = [1,2,3];
var b = a.concat(4,5);
console.log(b);
var c = [6,7];
var d = a.concat(c);
console.log(d);
?
3.常見問題
除了上述兩個(gè)方法外，還有沒有其他的深拷貝方法昧互？
?
4.解決方案
js遍歷數(shù)組的方法：
var arr1=[1,2,3,4,5],arr2=[];
arr1.forEach(function(val,i){
arr2[i]=val;
})
console.log(arr1,arr2);
arr2[0]="a";
console.log(arr1,arr2);
利用JSON格式
var a=[[1,2,3],4,5,6];
var b=JSON.parse(JSON.stringify(a));
console.log(a,b);
a[0][0]="a";
console.log(a,b);
這種方法使用較為簡單挽铁，可以滿足基本的深拷貝需求，而且能夠處理JSON格式能表示的所有數(shù)據(jù)類型敞掘，但是對(duì)于正則表達(dá)式類型叽掘、函數(shù)類型等無法進(jìn)行深拷貝(而且會(huì)直接丟失相應(yīng)的值)。
?
5.編碼實(shí)戰(zhàn)
?
6.擴(kuò)展思考
slice()玖雁、concat()的局限性在哪里更扁？
var arr1=[[1,2,3],4,5,6];
var arr2=arr1.slice();
console.log(arr1,arr2);
arr2[0][0]="a";
console.log(arr1,arr2);
var arr1=[[1,2,3],4,5,6];
var arr2=arr1.concat();
console.log(arr1,arr2);
arr2[0][0]="a";
console.log(arr1,arr2);
由上面的例子可以看出，slice和concat這兩個(gè)方法，僅適用于對(duì)不包含引用對(duì)象的一維數(shù)組的深拷貝
?
7.參考文獻(xiàn)
參考1：JavaScript中的淺拷貝和深拷貝
參考2：javaScript中淺拷貝和深拷貝的實(shí)現(xiàn)
8.更多討論
還有什么方法實(shí)現(xiàn)多維數(shù)組的深拷貝浓镜？
咱們可以對(duì)剛才的數(shù)組循環(huán)改寫一下：
function deepCopy(arr1,arr2){
arr1.forEach(function(val,i){
if(val instanceof Array){
arr2[i]=[];
val.forEach(function(val2,j){
if(val2 instanceof Array){
deepCopy(arr1[j],arr2[j]);
}else{
arr2[i][j]=val2
}
})
}else{
arr2[i]=val;
}
})
}
var a=[[[1],2,3],4,5,6],b=[];
deepCopy(a,b);
console.log(a,b);
b[0][0][0]="a";
console.log(a,b);
