快捷導(dǎo)航

javascript二維數(shù)組和對(duì)象的深拷貝與淺拷貝實(shí)例分析

更新時(shí)間：2019年10月26日 09:54:51 作者：那誰(shuí)家的，小誰(shuí)

這篇文章主要介紹了javascript二維數(shù)組和對(duì)象的深拷貝與淺拷貝,結(jié)合實(shí)例形式分析了JavaScript針對(duì)數(shù)組與對(duì)象的深拷貝及淺拷貝相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了javascript二維數(shù)組和對(duì)象的深拷貝與淺拷貝。分享給大家供大家參考，具體如下：

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)數(shù)組和對(duì)象的深淺拷貝，

1.淺拷貝：將原對(duì)象或原數(shù)組的引用直接賦給新對(duì)象，新數(shù)組，新對(duì)象／數(shù)組只是原對(duì)象的一個(gè)引用

2.深拷貝：創(chuàng)建一個(gè)新的對(duì)象和數(shù)組，將原對(duì)象的各項(xiàng)屬性的“值”（數(shù)組的所有元素）拷貝過(guò)來(lái)，是“值”而不是“引用”

JavaScript的數(shù)據(jù)類(lèi)型分為原始數(shù)據(jù)類(lèi)型和對(duì)象類(lèi)型。二者在內(nèi)存中存放的方式不同，導(dǎo)致了其賦值時(shí)差異。分別舉個(gè)栗子

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

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

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

原始數(shù)據(jù)類(lèi)型賦值時(shí)，不會(huì)相互影響；而對(duì)象類(lèi)型，給的是原數(shù)據(jù)的引用地址，所以新舊數(shù)據(jù)會(huì)互相影響，

什么是深拷貝？

顧名思義，淺拷貝就是流于表面的拷貝方式；當(dāng)屬性值為對(duì)象類(lèi)型時(shí)，只拷貝了對(duì)象數(shù)據(jù)的引用，導(dǎo)致新舊數(shù)據(jù)沒(méi)有完全分離，還會(huì)互相影響。eg:

//測(cè)試數(shù)據(jù)
var array1 = ['a',1,true,{name:'lei',age:18}];
//concat() slice() 實(shí)現(xiàn)深拷貝
var array2 = array1.concat()
//修改拷貝后的數(shù)據(jù)
array2[0] = 'b';   //array1[0]是原始數(shù)據(jù)類(lèi)型 所以是直接賦值的
array2[3].name = 'zhang'; //array1[3]是對(duì)象數(shù)據(jù)類(lèi)型 所以拷貝的是對(duì)象的引用，其實(shí)還是和原數(shù)組使用同一對(duì)象
console.log(array1); // ['a',1,true,{name:'zhang',age:18}]

什么是淺拷貝

上面的 array.concat()或者array.slice() 是特殊的實(shí)現(xiàn)數(shù)組深拷貝的方式。直接復(fù)制也是淺烤貝

var array1 = ['a',1,true,{name:'lei',age:18}];
var temp = array1;
temp[3].name = "hanmeimei";
console.log(array1[3].name)//hanmeimie

深拷貝及其實(shí)現(xiàn)

從淺拷貝解釋可以明白，深拷貝就是 ‘完全'拷貝，拷貝之后新舊數(shù)據(jù)完全分離，不共用對(duì)象類(lèi)型的屬性值，不互相影響。

實(shí)現(xiàn)方式：

取巧方式 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}] 未受到影響

注意：這種方式不能深拷貝有屬性值為函數(shù)的對(duì)象，

實(shí)現(xiàn)深拷貝

已經(jīng)實(shí)現(xiàn)了淺拷貝，思考下應(yīng)該是對(duì) 對(duì)象類(lèi)型屬性值賦值時(shí)，導(dǎo)致的沒(méi)有完全分離，所以要修改下拷貝對(duì)象類(lèi)型屬性值的方式，對(duì)它再調(diào)用一次深拷貝，這樣就實(shí)現(xiàn)了深拷貝，如下：

//實(shí)現(xiàn)深拷貝
function deepCopy( target ){
   if(typeof target !== 'object') return ;//判斷目標(biāo)類(lèi)型，來(lái)創(chuàng)建返回值
   var newObj = target instanceof Array ? [] : {};
   for(var item in target){ //只復(fù)制元素自身的屬性，不復(fù)制原型鏈上的
     if(target.hasOwnProperty(item)){
      newObj[item] = typeof target[item] == 'object' ? deepCopy(target[item]) : target[item] //遍歷判斷屬性值類(lèi)型
     }
   }
   return newObj
}
//測(cè)試------------------------------------------------------
var test = [1,'a',{name:'hanmeimei',age:18}];
var copy2 = deepCopy(test);
copy2[2].name = 'lilei'
console.log(test); ////[1,'a',{name:'hanmeimei',age:18}] 未受到影響

二維數(shù)組深度拷貝簡(jiǎn)單實(shí)現(xiàn)

function deepcopyArr(arr) {
   var outarr = [],len = arr.length;
   for (var i=0; i < len; i++) {
      outarr[i]=new Array();
      for(var j=0;j<arr[i].length;j++){
       outarr[i][j]=arr[i][j];
      }
   }
   return outarr;
}
function deepClone (obj) {
  if (typeof obj !== 'object') {
    return obj;
  }
  if (!obj) { // obj 是 null的情況
    return obj;
  }
  if (obj instanceof Date) {
    return new Date(obj);
  }
  if (obj instanceof RegExp) {
    return new RegExp(obj);
  }
  if (obj instanceof Function) {
    return obj;
  }
  let newObj；
  if (obj instanceof Array) {
    newObj = [];
    for(let i = 0, len = obj.length; i < len; i++){
        newObj.push(deepClone(obj[i]));//遞歸操作嵌套對(duì)象
     }
     return newObj;
  }
  newObj = {};
  for（let key in obj) {
    if (obj.hasOwnProperty(key)) {
      if (typeof obj[key] !== 'object') {
        newObj[key] = obj[key];
      } else {
        newObj[key] = deepClone(obj[key]);//遞歸操作嵌套對(duì)象
      }
    }
  }
  return newObj;
}
//基本數(shù)據(jù)類(lèi)型/引用數(shù)據(jù)類(lèi)型深度克隆完整代碼

后續(xù)完善。。。

感興趣的朋友可以使用在線(xiàn)HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《JavaScript數(shù)組操作技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: