快捷導(dǎo)航

js實(shí)現(xiàn)數(shù)組和對(duì)象的深淺拷貝

更新時(shí)間：2017年09月30日 11:18:22 作者：Shapeying

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)數(shù)組和對(duì)象的深淺拷貝，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

前提：原始數(shù)據(jù)類(lèi)型和對(duì)象類(lèi)型賦值時(shí)的差異

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]

由上栗子可以看出：原始數(shù)據(jù)類(lèi)型賦值時(shí)，給的是實(shí)實(shí)在在的數(shù)據(jù)值，賦值后二者只是值一樣而已，不會(huì)相互影響；而對(duì)象類(lèi)型，給的是原數(shù)據(jù)的引用地址，所以新舊數(shù)據(jù)會(huì)互相影響，因?yàn)楸举|(zhì)上還是同一個(gè)數(shù)據(jù)對(duì)象，如上栗中的數(shù)組

什么是淺拷貝？

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

//測(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}]

　　栗子中 array2是array1的淺拷貝對(duì)象，數(shù)組元素是原始數(shù)據(jù)類(lèi)型的不會(huì)相互影響了（array1[0]），但是array1[3]是對(duì)象類(lèi)型，還是會(huì)互相影響。

如何實(shí)現(xiàn)淺拷貝

上栗中的 array.concat()或者array.slice() 是特殊的實(shí)現(xiàn)數(shù)組淺拷貝的方式。

如何自己實(shí)現(xiàn)呢？遍歷對(duì)象/數(shù)組的每個(gè)屬性，然后賦值給一個(gè)新的對(duì)象不就行了么，如下實(shí)現(xiàn)

 //實(shí)現(xiàn)淺拷貝
 function shallowCopy( 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] = target[item]
   }
  }
 
  return newObj
 }</strong>
 
 //測(cè)試
 
 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  原數(shù)據(jù)也被修改

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

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

實(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ì)象，可自行嘗試

2. 實(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] = <strong>typeof target[item] == 'object' ? deepCopy(target[item]) : target[item] //判斷屬性值類(lèi)型
</strong>  }
 }
 
 return newObj
}
 
//測(cè)試
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}] 未受到影響

總結(jié)

一定要理解造成淺拷貝的原因：對(duì)象類(lèi)型數(shù)據(jù)復(fù)制時(shí)，復(fù)制了引用地址，用的還是同一個(gè)數(shù)據(jù)對(duì)象；所以實(shí)現(xiàn)深拷貝的方式就是要對(duì) 對(duì)象類(lèi)型屬性值遞歸進(jìn)行深拷貝，避免直接賦值。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: