1.背景介紹
在JavaScript中，對于Object和Array這類引用類型值，當(dāng)從一個(gè)變量向另一個(gè)變量復(fù)制引用類型值時(shí)，這個(gè)值的副本其實(shí)是一個(gè)指針，兩個(gè)變量指向同一個(gè)堆對象，改變其中一個(gè)變量，另一個(gè)也會受到影響。
這種拷貝分為兩種情況：拷貝引用和拷貝實(shí)例，也就是我們說的淺拷貝和深拷貝
?
2.知識剖析
基本類型：
5種基本數(shù)據(jù)類型Undefined、Null、Boolean、Number 和 String，變量是直接按值存放的，存放在棧內(nèi)存中的簡單數(shù)據(jù)段，可以直接訪問。
引用類型：
存放在堆內(nèi)存中的對象，變量保存的是一個(gè)指針，這個(gè)指針指向另一個(gè)位置。當(dāng)需要訪問引用類型（如對象，數(shù)組等）的值時(shí)，首先從棧中獲得該對象的地址指針，然后再從堆內(nèi)存中取得所需的數(shù)據(jù)。
JavaScript存儲對象都是存地址的，所以淺拷貝會導(dǎo)致 obj1 和obj2
??指向同一塊內(nèi)存地址。改變了其中一方的內(nèi)容，都是在原來的內(nèi)存上做修改會導(dǎo)致拷貝對象和源對象都發(fā)生改變，而深拷貝是開辟一塊新的內(nèi)存地址，將原對象的各個(gè)屬性逐個(gè)復(fù)制進(jìn)去。對拷貝對象和源對象各自的操作互不影響。
JS數(shù)組的淺拷貝
簡單的賦值就是淺拷貝。因?yàn)閷ο蠛蛿?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ù)組或者對象復(fù)制一份，在修改值的時(shí)候，不改變初始對象的值。這個(gè)時(shí)候就需要使用深拷貝。
JS數(shù)組的深拷貝
方法一：js的slice函數(shù)
slice() 方法可從已有的數(shù)組中返回選定的元素。
【語法】arrayObject.slice(start,end)
【參數(shù)】arrayObj--必選項(xiàng)：一個(gè)Array對象。start--必選項(xiàng)：arrayObj中所指定的部分的開始元素是從零開始計(jì)算的下標(biāo)。end--可選項(xiàng)：arrayObj中所指定的部分的結(jié)束元素是從零開始計(jì)算的下標(biāo)。
【說明】
slice 方法返回一個(gè)Array對象，其中包含了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ù)組。該方法不會改變現(xiàn)有的數(shù)組，而僅僅會返回被連接數(shù)組的一個(gè)副本。
【語法】arrayObject.concat(arrayX,arrayy,......,arrayN)
【參數(shù)】arrayX--必需：該參數(shù)可以是具體的值，也可以是數(shù)組對象。可以是空值，可以是任意多個(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ù)類型，但是對于正則表達(dá)式類型、函數(shù)類型等無法進(jìn)行深拷貝(而且會直接丟失相應(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è)方法，僅適用于對不包含引用對象的一維數(shù)組的深拷貝
?
7.參考文獻(xiàn)
參考1：JavaScript中的淺拷貝和深拷貝
參考2：javaScript中淺拷貝和深拷貝的實(shí)現(xiàn)
8.更多討論
還有什么方法實(shí)現(xiàn)多維數(shù)組的深拷貝？
咱們可以對剛才的數(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);
