實現數組和對象的深淺拷貝


前提:原始數據類型和對象類型賦值時的差異

  JavaScript的數據類型分為原始數據類型和對象類型。二者在內存中存放的方式不同,導致了其賦值時差異。分別舉個栗子 

  var x = 1;
  var y = x;  //y獲得了和x同樣的值
  y = 2;
  console.log(x);  // 1

  var m = [1,2]; //m存放的是指向[1,2]這個數組對象的引用地址
  var n = m; //n也獲得 [1,2]數組對象的引用地址
  n[0] = 3;
  console.log(m);  //[3,2] 

  由上栗子可以看出 :原始數據類型賦值時,給的是實實在在的數據值 ,賦值后二者只是值一樣而已,不會相互影響; 而對象類型,給的是 原數據的引用地址,所以新舊數據會互相影響,因為本質上還是同一個數據對象,如上栗中的數組

 

什么是淺拷貝?

  顧名思義,淺拷貝就是流於表面的拷貝方式;當屬性值為對象類型時,只拷貝了對象數據的引用,導致新舊數據沒有完全分離,還會互相影響。再舉個栗子···

  //測試數據
  var array1 = ['a',1,true,{name:'lei',age:18}];

  //concat()  slice() 實現淺拷貝
  var array2 = array1.concat()

  //修改拷貝后的數據
  array2[0] = 'b';            //array1[0]是原始數據類型 所以是直接賦值的
  array2[3].name = 'zhang';   //array1[3]是對象數據類型 所以拷貝的是對象的引用,其實還是和原數組使用同一對象

  console.log(array1);   //  ['a',1,true,{name:'zhang',age:18}]

  栗子中 array2是array1的淺拷貝對象,數組元素是原始數據類型的不會相互影響了(array1[0]),但是array1[3]是對象類型,還是會互相影響。

如何實現淺拷貝

  1. 上栗中的  array.concat()或者array.slice() 是特殊的實現數組淺拷貝的方式。
  2. 如何自己實現呢?遍歷對象/數組的每個屬性,然后賦值給一個新的對象不就行了么,如下實現
  //實現淺拷貝
  function shallowCopy( target ){
    if(typeof target !== 'object') return ;
    //判斷目標類型,來創建返回值
    var newObj = target instanceof Array ? [] : {};

    for(var item in target){
      //只復制元素自身的屬性,不復制原型鏈上的
      if(target.hasOwnProperty(item)){
        newObj[item] = target[item]
      }
    }

    return newObj
  }

  //測試

  var test = [1,'a',{name:'lei',age:18}];

  var copy = shallowCopy(test);
  console.log(copy[2].name);   //lei

  copy[2].name = 'zhang';
  console.log(test[2].name);   //zhang   原數據也被修改

 

深拷貝及其實現

  從淺拷貝解釋基本可以明白,深拷貝就是 ‘完全’拷貝,拷貝之后新舊數據完全分離,不再共用對象類型的屬性值,不會互相影響。

  實現方式:

  1.  取巧方式 JSON.parse(JSON.stringify(Obj))   
var test = [1,'a',{name:'lei',age:18}];

var copy1 = JSON.parse(JSON.stringify(test));  //特殊方式

console.log(copy1);

copy1[2].name = 'zhang'
console.log(test);   //[1,'a',{name:'lei',age:18}]  未受到影響

  注意:這種方式不能深拷貝有屬性值為函數的對象,  可自行嘗試

  

  2. 實現深拷貝

    已經實現了淺拷貝,思考下應該是對 對象類型屬性值賦值時,導致的沒有完全分離,所以要修改下 拷貝對象類型屬性值的方式,對它再調用一次深拷貝,這樣就實現了深拷貝,如下:

 

//實現深拷貝
function deepCopy( target ){
  if(typeof target !== 'object') return ;
  //判斷目標類型,來創建返回值
  var newObj = target instanceof Array ? [] : {};

  for(var item in target){
    //只復制元素自身的屬性,不復制原型鏈上的
    if(target.hasOwnProperty(item)){
      newObj[item] = typeof target[item] == 'object' ? deepCopy(target[item]) : target[item]  //判斷屬性值類型
    }
  }

  return newObj
}

//測試
var test = [1,'a',{name:'lei',age:18}];

var copy2 = deepCopy(test);
copy2[2].name = 'zhang'

console.log(test);  ////[1,'a',{name:'lei',age:18}]  未受到影響

 

總結

  一定要理解造成淺拷貝的原因:對象類型數據復制時,復制了引用地址,用的還是同一個數據對象;所以實現深拷貝的方式就是要對 對象類型屬性值遞歸進行深拷貝,避免直接賦值。

  

 

 

  

 

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM