小猿圈JavaScript深拷貝和淺拷貝

js中的深拷貝和淺拷貝是常考的一個點，學習前端的對這個點掌握了嗎?沒有話能夠跟隨小猿圈老師學習一下，掌握一下這個知識點。

思想：涉及到了JS中對數據的深淺拷貝問題，所謂深淺拷貝，淺拷貝的意思就是，你只是複製了對象數據的引用，並無把內存裏的值另外複製一份，那麼深拷貝就是把值完整地複製一份新的值。操做拷貝以後的數據不會影響到原數據的值拷貝，就是深拷貝，反正，有影響則爲淺拷貝。

1、應用場景

平常開發中，JS拷貝大多會在數據保存，數據比對，數據同步時出現，因此，當你在這些場景的時候，要記得裏面隱藏有一個數據深淺拷貝的問題。

2、淺拷貝

functionclone(origin){
varresult={};
for(varpropinorigin){
if(origin.hasOwnProperty(prop)){
result[prop]=origin[prop];
}
}
returnresult;
}
varjay={
name:"jayChou",
age:40,
family:{
wife:"Quinlivan"
}
}
varotherJay=clone(jay);
otherJay.age=18;
otherJay.family.wife="otherGirl";
console.log(jay);
//
//{
//name:"jayChou",
//age:40,//沒被改變
//family:{
//wife:"otherGirl"//同時被改變，說明是同一個引用
//}
//}
console.log(otherJay);
//
//{
//name:"jayChou",
//age:18,
//family:{
//wife:"otherGirl"//被改變了
//}
//}
複製代碼

咱們發現，首先，淺拷貝不是直接賦值，淺拷貝新建了一個對象，而後將源對象的屬性都一一複製過來,複製的是值，而不是引用。

咱們知道，對象都是按地址引用進行訪問的，淺拷貝的複製只複製了第一層的屬性，並無遞歸將全部的值複製過來，因此，操做拷貝數據，對原數據產生了影響，故而爲淺拷貝。進而，那些能夠直接返回原數組的方法就能夠簡單實現數組和對象淺拷貝。

//一、數組淺拷貝-slice
functionshallowCopy1(origin){
returnorigin.slice();
}
//二、數組淺拷貝-concat
functionshallowCopy2(origin){
returnorigin.concat();
}
//三、數組淺拷貝-遍歷
functionshallowCopy3(origin){
varresult=[];
for(vari=0;i<origin.length;i++){
result.push(origin[i]);
}
returnresult;
}
//四、對象淺拷貝-Object.assign
functionshallowCopy4(origin){
returnObject.assign({},origin)
}
//五、對象淺拷貝-擴展運算符
//擴展運算符（...）用於取出參數對象的全部可遍歷屬性，拷貝到當前對象之中
functionshallowCopy5(origin){
return{
...origin
}
}
複製代碼

Object.assign的拷貝，假如源對象的屬性值是一個指向對象的引用，它也只拷貝那個引用值。MDN有相應的實例和解釋。

3、深拷貝

深拷貝就完整複製數據的值（而非引用），目的在於避免拷貝後數據對原數據產生影響。

//1.深拷貝-JSON正反序列化
//缺點就是沒法拷貝undefined、function、symbol這類特殊的屬性值。
functiondeepClone1(origin){
returnJSON.parse(JSON.stringify(arr));
}
//2.深拷貝-遞歸;
functiondeepClone2(origin){
constresult=origin.constructor===Array?[]:{};
for(letkeysinorigin){
//不遍歷原型鏈上的屬性
if(origin.hasOwnProperty(keys)){
if(origin[keys]&&typeoforigin[keys]==="object"){
//若是值是對象，就遞歸一下,區分是通常對象仍是數組對象
result[keys]=origin[keys].constructor===Array?[]:{};
//若是是引用數據類型，會遞歸調用
result[keys]=deepClone(origin[keys]);
}else{
//若是不是，就直接賦值
result[keys]=origin[keys];
}
}
}
returnresult;
}
複製代碼

JS的深拷貝的應用，須要根據你的使用場景進行使用，首先是有無必要深拷貝，其次是數據類型，是否直接使用JSON的API其實就能夠。

通過小猿圈老師的介紹相信不少同窗對於JavaScript深拷貝和淺拷貝有了必定的瞭解，你們學會了吧，若是想要充實本身更多的知識，能夠去小猿圈看看，都是免費的平臺，感受真心不錯。