大家好，我是IT修真院武漢分院第5期的學(xué)員朱英杰咳燕，一枚正直純潔善良的WEB前端程序員勿决。
1.背景介紹
在使用JavaScript對數(shù)組進(jìn)行操作的時(shí)候，我們經(jīng)常需要將數(shù)組進(jìn)行備份招盲，也就是復(fù)制低缩、克隆或者說做拷貝
要弄明白拷貝，首先要明白js中對象的組成曹货。在js中一切實(shí)例皆是對象咆繁，具體分為原始類型和合成類型。原始類型對象指的是number顶籽、string玩般、boolean等，合成類型對象指的是array礼饱、object以及function坏为。
數(shù)組的拷貝有深有淺。
2.知識剖析
淺拷貝
淺拷貝可以理解為就是復(fù)制一份來引用慨仿，所有引用對象都指向一份數(shù)據(jù)久脯，并且都可以修改這份數(shù)據(jù)。
對于字符串類型镰吆，淺拷貝是對值的拷貝，對于對象來說跑慕，淺拷貝是對對象地址的拷貝万皿，也就是復(fù)制
的結(jié)果是兩個(gè)對象指向同一個(gè)內(nèi)存地址，修改其中一個(gè)對象的屬性核行，則另一個(gè)對象的屬性也會改變
深拷貝
深拷貝則是復(fù)制變量值牢硅，對于非基本類型的變量，則遞歸至基本類型變量后芝雪，再復(fù)制减余。
深復(fù)制不同于淺復(fù)制，它會開辟新的內(nèi)存地址惩系，兩個(gè)對象對應(yīng)兩個(gè)不同的地址位岔，修改
一個(gè)對象的屬性如筛，不會改變另一個(gè)對象的屬性.，深復(fù)制會帶來性能上的問題抒抬。在遇到需要采用深拷貝的場景時(shí)杨刨，可以考慮有沒有其他替代的方案。在實(shí)際的應(yīng)用場景中擦剑，也是淺拷貝更為常用
方法一： 用js的slice函數(shù)來實(shí)現(xiàn)
var arr = ["One","Two","Three"];
var arrtoo = arr.slice(0);
arrtoo[1] = "set Map";
document.writeln("數(shù)組的原始值：" + arr + "
");//Export:數(shù)組的原始值：One,Two,Three
document.writeln("數(shù)組的新值：" + arrtoo + "
");//Export:數(shù)組的新值：One,set Map,Three
方法二：用js的concat方法
var arrtooo = arr.concat();
arrtooo[1] = "set Map To";
document.writeln("數(shù)組的原始值：" + arr + "
");//Export:數(shù)組的原始值：One,Two,Three
document.writeln("數(shù)組的新值：" + arrtooo + "
");//Export:數(shù)組的新值：One,set Map To,Three
3.常見問題
如何實(shí)現(xiàn)深拷貝和淺拷貝
4.解決方案
淺拷貝
var arr = ["One","Two","Three"];
var arrto = arr;
arrto[1] = "test";
document.writeln("數(shù)組的原始值：" + arr + "
");//Export:數(shù)組的原始值：One,test,Three
document.writeln("數(shù)組的新值：" + arrto + "
");//Export:數(shù)組的新值：One,test,Three
深拷貝
方法一： 用js的slice函數(shù)來實(shí)現(xiàn)
var arr = ["One","Two","Three"];
var arrtoo = arr.slice(0);
arrtoo[1] = "set Map";
document.writeln("數(shù)組的原始值：" + arr + "
");//Export:數(shù)組的原始值：One,Two,Three
document.writeln("數(shù)組的新值：" + arrtoo + "
");//Export:數(shù)組的新值：One,set Map,Three
方法二：用js的concat方法
var arrtooo = arr.concat();
arrtooo[1] = "set Map To";
document.writeln("數(shù)組的原始值：" + arr + "
");//Export:數(shù)組的原始值：One,Two,Three
document.writeln("數(shù)組的新值：" + arrtooo + "
");//Export:數(shù)組的新值：One,set Map To,Three
5.編碼實(shí)戰(zhàn)
6.擴(kuò)展思考
angular如何實(shí)現(xiàn)數(shù)組的淺拷貝和深拷貝
使用AngularJS開發(fā)項(xiàng)目的我們妖胀，往往忽視了angularjs封裝好的一系列方法，比如angular.isString(),angular.isNumber(),angular.isArray(),angular.isFunction()來判斷各種類型惠勒，在這些angular封裝好的方法中赚抡，其中有一個(gè)叫做angular.copy()
它是用來實(shí)現(xiàn)深拷貝的一個(gè)方法，可以直接用這個(gè)方法深拷貝
對象纠屋，數(shù)組涂臣，undefined，null等類型巾遭，很強(qiáng)大肉康，
var a=[1,2,3];
var b=angular.copy(a);
var c={
? ? name:"Jill",
? ? ?age:20
};
var d=angular.copy(c);
7.參考文獻(xiàn)
參考：數(shù)組的拷貝
參考：原始數(shù)據(jù)類型和對象類型的區(qū)別及深度拷貝解析
問題：還有哪些方法實(shí)現(xiàn)深拷貝
對象的深淺拷貝,就是把對象的屬性遍歷一遍，賦給一個(gè)新的對象灼舍。
vardeepCopy=function(source) {
var result={};
for(varkeyinsource) {
result[key]= typeof source[key]===’object’? deepCoyp(source[key]):source[key];
}returnresult;
}
