二. JavaScript 數組 和 對象 的深淺拷貝

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

  JavaScript的數據類型分爲:原始數據類型和對象類型。兩者在內存中存放的方式不一樣,致使了其賦值時差別。分別舉個栗子 數組

1.原始數據類型:Undefined、Null、Boolean、Number以及String。測試

2.對象類型spa

  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] 

淺拷貝?

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

var array1 = ['a',1,true,{name:'lei',age:18}];
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}]

如何實現淺拷貝

  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[0] = 0;
  copy[2].name = 'zhang';
  console.log(test[0]);        //1       原數據不變
  console.log(test[2].name);   //zhang   原數據也被修改

深拷貝及其實現

  從淺拷貝解釋基本能夠明白,深拷貝就是 ‘徹底’拷貝,拷貝以後新舊數據徹底分離,再也不共用對象類型的屬性值,不會互相影響。對象

//實現深拷貝
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);
copy[0] = 0;
copy2[2].name = 'zhang'
console.log(test);         //[1,'a',{name:'lei',age:18}]  未受到影響
相關文章
相關標籤/搜索