深淺拷貝

yck 發布于2019-08-21 17:42 / 2048人閱讀

摘要：好像栗子不是那么好吃，那我們來看看下面的解釋吧深淺拷貝深拷貝和淺拷貝只針對像這樣的引用類型數據。深拷貝則是開啟一個新的棧，兩個對象對應兩個不同的引用地址，修改一個對象的屬性，不會改變另一個對象的屬性。

拷貝顧名思義就是復制，但是它并不簡單哦，拷貝分為深淺拷貝，那么啥是深拷貝啥是淺拷貝呢，讓我們來舉個栗子，淺拷貝就是當你拷貝別人的U盤里東西時，卻沒有新建文件存放在自己的電腦里，直接在里面修改，那么我們就更改了U盤里的內容，深拷貝就是在自己的電腦里新建了文件進行修改，而不會影響到原來的內容。好像栗子不是那么好吃，那我們來看看下面的解釋吧?。?！

深淺拷貝

1.深拷貝和淺拷貝只針對像Object, Array這樣的引用類型數據。

2.淺拷貝是對對象引用地址進行拷貝，并沒有開辟新的棧，也就是拷貝后的結果是兩個對象指向同一個引用地址，修改其中一個對象的屬性，則另一個對象的屬性也會改變。

3.深拷貝則是開啟一個新的棧，兩個對象對應兩個不同的引用地址，修改一個對象的屬性，不會改變另一個對象的屬性。

淺拷貝

直接上栗子吧

var myInfo = {name:"liu",sex:"女"};
var newInfo = myInfo;
console.log(myInfo); //{name:"liu",sex:"女"}
newInfo.sex = "小仙女"；
console.log(myInfo); //{name:"liu",sex:"小仙女"}

可以看到newInfo復制了myInfo里的內容，本應他們之間沒有聯系的，可是為什么當newInfo更改時同時也影響了myInfo？那是因為這只是淺拷貝，newInfo的地址并沒有更改，指向同一個棧。

深拷貝

讓我們先對比一下下面的兩個栗子吧！

var array = [{a:1,b:2},{a:3,b:4}];
var newArray = Object.assign([],array);
newArray.length = 1;
console.log(newArray);  
console.log(array);  
newArray[0].a = 123;
console.log(array[0]);

function deepClone(obj){    
  if(!obj&& typeof obj!== "object"){      
    return;    
  }    
  var newObj= obj.constructor === Array ? [] : {};    
  for(var key in obj){       
    if(obj[key]){          
      if(obj[key] && typeof obj[key] === "object"){  
        newObj[key] = obj[key].constructor === Array ? [] : {}; 
        //遞歸
        newObj[key] = deepClone(obj[key]);          
      }else{            
        newObj[key] = obj[key];         
      }       
    }    
  }    
  return newObj; 
}
var array = [{a:1,b:2},{a:3,b:4}];
var newArray = deepClone(array);
console.log(array[0]);
newArray[0].a = 123;
console.log(array[0]);

大家思考一下，這兩個栗子會是一樣嗎？

來公布一下正確答案：
先看第一個栗子
[{a:1,b:2},{a:3,b:4}]
{a: 123, b: 2}
（問號臉）我明明沒有更改myInfo的數據啊，這么回事？
因為Object.assign并不是深拷貝，是披著深拷貝外衣的淺拷貝。最多也是Object.assign會拷貝第一層的值，對于第一層的值都是深拷貝，而到第二層的時候就是復制引用。類似的情況還有，slice方法和concat方法等。

來看看第二個
{a:1,b:2}
{a:1,b:2}
兩個結果都是一樣的，為什么呢？
因為這才是深拷貝啊，newInfo開啟了一個新的棧，雖然內容相同，可是他們已經在不同地點了，互不影響。這里我們采用了封裝和遞歸，如果對象屬性的值是引用類型（Array,Object），那么對該屬性進行深拷貝，直到遍歷到屬性的值是基本類型為止。好像有點復雜誒，沒事，我們還有個簡單粗暴的方法?。?！

var newArray = JSON.parse(JSON.stringify(array));
console.log(array[0])//{a:1,b:2}
newArray[0].a = 123
console.log(array[0])//{a:1,b:2}

利用JSON解析函數把對象轉成字符串，再把字符串轉成對象！四不四很簡單呀！?

這就是我對于深淺拷貝的了解了，如果有更好的見解要告訴我哦！?

云服務器 GPU云服務器深淺拷貝深淺后拷貝預拷貝深拷貝和淺拷貝

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89894.html

JS專題之深淺拷貝

摘要：在之前的文章專題之數據類型和類型檢測中我有講過，中的數據類型分為兩種，基本數據類型和引用數據類型，基本數據類型是保存在棧的數據結構中的是按值訪問，所以不存在深淺拷貝問題。前言在開發過程中，偶爾會遇到這種場景，拿到一個數據后，你打算對它進行處理，但是你又希望拷貝一份副本出來，方便數據對比和以后恢復數據。那么這就涉及到了 JS 中對數據的深淺拷貝問題，所謂深淺拷貝，淺拷貝的意思就是，...

ASCH 2019-08-23 15:07 評論0 收藏0
深入理解JS深淺拷貝

摘要：深拷貝相比于淺拷貝速度較慢并且花銷較大。所以在賦值完成后，在棧內存就有兩個指針指向堆內存同一個數據。結果如下擴展運算符只能對一層進行深拷貝如果拷貝的層數超過了一層的話，那么就會進行淺拷貝那么我們可以看到和展開原算符對于深淺拷貝的結果是一樣。 JS中數據類型基本數據類型： undefined、null、Boolean、Number、String和Symbol(ES6) 引用數據類型：...

JackJiang 2019-08-23 14:31 評論0 收藏0
深淺拷貝

摘要：深復制實現代碼如下第一種方法通過遞歸解析解決第二種方法通過解析解決作者六師兄鏈接原生深拷貝的實現處理未輸入新對象的情況通過方法構造新的對象深淺拷貝針對的是對象類型，如果是字符串的數組用[...arr]，還是不會影響要區分針對數組的深淺拷貝(默認情況為里面沒有對象的數組)，與針對對象的深淺拷貝 JavaScript數組深拷貝和淺拷貝的兩種方法 let a1 = [1, 2]; ...

Karrdy 2019-08-23 15:42 評論0 收藏0
Javascript對象的深淺拷貝

摘要：開門見山，有人叫對象的復制為深復制淺復制，也有人叫深拷貝淺拷貝。高級屬性修改深拷貝滿足對象的復制，淺拷貝影響原數組。關于對象的深淺拷貝，暫且探索到這里，后續有新發現再進行補充。 showImg(https://segmentfault.com/img/remote/1460000014305581); 開門見山，有人叫對象的復制為深復制淺復制，也有人叫深拷貝淺拷貝。其實都是copy。 ...

qieangel2013 2019-08-22 16:12 評論0 收藏0
9012年，當我們討論js深淺拷貝時我們在說些什么？

摘要：正文討論深淺拷貝，首先要從的基本數據類型說起根據中的變量類型傳遞方式，分為值類型和引用類型，值類型變量包括。當你拷貝的對象有多級的時候，就是深拷貝。數據不存在則對其拷貝。前言：本文主要閱讀對象：對深淺拷貝印象模糊對初級前端，想對js深淺拷貝聊一聊的中級前端。如果是對這些有完整對認知體系和解決方法的大佬，可以選擇略過。正文：討論深淺拷貝，首先要從js的基本數據類型說起：根據 J...

xeblog 2019-05-21 19:19 評論0 收藏0