js深復制和淺復制

javaScript的變量類型

  • 基本類型:
    5種基本數據類型UndefinedNullBooleanNumberString,變量是直接按值存放的,存放在棧內存中的簡單數據段,可以直接訪問。

  • 引用類型:
    存放在堆內存中的對象,變量保存的是一個指針,這個指針指向另一個位置。當需要訪問引用類型(如對象,數組等)的值時,首先從棧中獲得該對象的地址指針,然后再從堆內存中取得所需的數據。

JavaScript存儲對象都是存地址的,所以淺拷貝會導致obj1obj2 指向同一塊內存地址。改變了其中一方的內容,都是在原來的內存上做修改會導致拷貝對象和源對象都發生改變;而深拷貝是開辟一塊新的內存地址,將原對象的各個屬性逐個復制進去。對拷貝對象和源對象各自的操作互不影響。

淺復制的實現

  • 簡單的引用復制
   var data = {a: 1, b: 2};
   var c = data;
  • Object.assign()
    只會對第一層變量實現深復制;
    var data =  {
      a: 1,
      b: { f: { g: 1 } },
      c: [ 1, 2, 3 ]
    };
    
    var objData = Object.assign({}, data);
    
    console.log(objData === data); //false
    console.log(objData.b.f === data.b.f); //true
    
  • Array的slice和concat方法(與Object.assign()方法是一樣的)

    Arraysliceconcat方法不修改原數組,只會返回一個淺復制了原數組中的元素的一個新數組。它看起來像是深拷貝,而實際上它是淺拷貝。
    例子如下:

    var array = [1,2,3]; 
    var array_shallow = array; 
    var array_concat = array.concat(); 
    var array_slice = array.slice(0); 
    console.log(array === array_shallow); //true 
    console.log(array === array_slice); //false,“看起來”像深拷貝
    console.log(array === array_concat); //false,“看起來”像深拷貝
    

    可以看出,concatslice返回的不同的數組實例,這與直接的引用復制是不同的。

原數組的元素會按照下述規則拷貝:

  • 如果該元素是個對象引用 (不是實際的對象),slice 會拷貝這個對象引用到新的數組里。兩個對象引用都引用了同一個對象。如果被引用的對象發生改變,則新的和原來的數組中的這個元素也會發生改變。

     var array = [1, [1,2,3], {name:"array"}]; 
     var array_concat = array.concat();
     var array_slice = array.slice(0);
    
     array_concat[1][0] = 5;  //改變array_concat中數組元素的值 
    
     console.log(array[1]); //[5,2,3] 
     console.log(array_slice[1]); //[5,2,3] 
    
     array_slice[2].name = "array_slice"; //改變array_slice中對象元素的值 
    
     console.log(array[2].name); //array_slice
     console.log(array_concat[2].name); //array_slice
    

    可以看出Array的concatslice并不是真正的深復制,數組中的對象元素(Object,Array等)只是復制了引用。

  • 對于字符串、數字及布爾值來說(不是 StringNumber 或者 Boolean 對象),slice 會拷貝這些值到新的數組里。在別的數組里修改這些字符串或數字或是布爾值,將不會影響另一個數組。

  • 如果向兩個數組任一中添加了新元素,則另一個不會受到影響。

    var array = [1, 2, 3];
    
    var array_shallow = array;
    var array_concat = array.concat();
    var array_slice = array.slice(0);
    
    array.push(4);
    
    console.log(array_concat); //[1, 2, 3]
    

深復制的實現

JSON對象的parse和stringify

JSON對象是ES5中引入的新的類型(支持的瀏覽器為IE8+),JSON對象parse方法可以將JSON字符串反序列化成JS對象,stringify方法可以將JS對象序列化成JSON字符串,借助這兩個方法,也可以實現對象的深拷貝。

var source = { name:"source", child:{ name:"child" } } 
var target = JSON.parse(JSON.stringify(source));
target.name = "target";  //改變target的name屬性

console.log(source.name); //source 
console.log(target.name); //target

target.child.name = "target child"; //改變target的child 
console.log(source.child.name); //child 
console.log(target.child.name); //target child
var source = { name:function(){console.log(1);}, child:{ name:"child" } } 
var target = JSON.parse(JSON.stringify(source));

console.log(target.name); //undefined
var source = { name:function(){console.log(1);}, child:new RegExp("e") }
var target = JSON.parse(JSON.stringify(source));

console.log(target.name); //undefined
console.log(target.child); //Object {}

這種方法使用較為簡單,可以滿足基本的深拷貝需求,而且能夠處理JSON格式能表示的所有數據類型,但是對于正則表達式類型、函數類型等無法進行深拷貝(而且會直接丟失相應的值)。

還有一點不好的地方是它會拋棄對象的constructor。也就是深拷貝之后,不管這個對象原來的構造函數是什么,在深拷貝之后都會變成Object

如果對象中存在循環引用的情況也無法正確處理。

自定義方法實現深拷貝

function clone(data) {
    if (Array.isArray(data)) {
        let newArr = [];
        for (let i = 0; i < data.length; i++) {
            newArr[i] = clone(data[i]);
        }

        return newArr;
    } else if (data instanceof Object) {
        let obj = {};
        for (let key in data) {
            obj[key] = clone(data[[key]]);
        }
        return obj;
    }else {
        return data;
    }
}

var data =  {
    a: 1,
    b: { f: { g: 1 } },
    c: [ 1, 2, 3 ]
};

var objData = clone(data);
console.log(objData === data);  //false
console.log(objdata.b.f === data.b.f); //false
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,119評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,382評論 3 415
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,038評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,853評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,616評論 6 408
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,112評論 1 323
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,192評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,355評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,869評論 1 334
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,727評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,928評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,467評論 5 358
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,165評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,570評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,813評論 1 282
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,585評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,892評論 2 372

推薦閱讀更多精彩內容

  • js簡介 Js是一種基于事件和對象驅動的解釋性、松散性的語言。 一切皆對象 javascript 布蘭登艾奇 ...
    塔庫納瑪哈哈閱讀 1,230評論 0 2
  • underscore 的源碼中,有很多地方用到了 Array.prototype.slice() 方法,但是并沒有...
    theCoder閱讀 604評論 0 1
  • 單例模式 適用場景:可能會在場景中使用到對象,但只有一個實例,加載時并不主動創建,需要時才創建 最常見的單例模式,...
    Obeing閱讀 2,085評論 1 10
  • 國慶節當天我背起帆布包去往寧波,看望剛在那邊安家的發小,從小愛喚她“橘子”。 我是一個熱愛四處游走且懶的人,促使我...
    z大雁閱讀 297評論 0 1
  • React Native 官方文檔 React Native 開源社區 【環境、組件、入門、進價等】 JavaSc...
    小黑Swift閱讀 313評論 0 2