JavaScript基于遍歷操作實(shí)現(xiàn)對(duì)象深拷貝功能示例

更新時(shí)間：2019年03月05日 10:33:07 作者：白楊-M

這篇文章主要介紹了JavaScript基于遍歷操作實(shí)現(xiàn)對(duì)象深拷貝功能,涉及javascript元素遍歷與屬性操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例講述了JavaScript基于遍歷操作實(shí)現(xiàn)對(duì)象深拷貝功能。分享給大家供大家參考，具體如下：

function getType(o){
  var _t;
  return ((_t = typeof(o)) == "object" ? o==null && "null" || Object.prototype.toString.call(o).slice(8,-1):_t).toLowerCase();
}
function extend(destination,source){
  for(var p in source){
    if(getType(source[p])=="array"||getType(source[p])=="object"){
      destination[p]=getType(source[p])=="array"?[]:{};
      arguments.callee(destination[p],source[p]);
    }else{
      destination[p]=source[p];
    }
  }
}
var test={
  a:"ss",
  b:"dd",
  c:[
    {d:"css",e:"cdd"},
    {
      m:"ff",
      n:[
        {kk:"11",jj:"22"},
        {ll:"44"}
      ]
    }
  ]
};
var test1={};
extend(test1,test);
console.log(test);
console.log(test1);
test1.c[1].n[0].kk="change"; //改變test1的c屬性對(duì)象的d屬性
console.log(test);
console.log(test1);
console.log(test.c[1].n[0]);
console.log(test1.c[1].n[0]);

測(cè)試結(jié)果

從測(cè)試結(jié)果可以看到，通過使用這個(gè)遍歷的方法，成功將對(duì)象test深拷貝復(fù)制一份，得到test1。并且更改test1對(duì)象的屬性，并不會(huì)對(duì)test對(duì)象產(chǎn)生影響。

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

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

您可能感興趣的文章:

相關(guān)文章

JS基于ocanvas插件實(shí)現(xiàn)的簡(jiǎn)單畫板效果代碼(附demo源碼下載)
這篇文章主要介紹了JS基于ocanvas插件實(shí)現(xiàn)的簡(jiǎn)單畫板效果,結(jié)合實(shí)例形式分析了ocanvas插件實(shí)現(xiàn)畫板的相關(guān)技巧,并附代碼demo源碼供讀者下載參考,需要的朋友可以參考下
2016-04-04
JS promise 的回調(diào)和 setTimeout 的回調(diào)到底誰先執(zhí)行
本文主要介紹了JS promise 的回調(diào)和 setTimeout 的回調(diào)到底誰先執(zhí)行，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-01-01
原生js實(shí)現(xiàn)頁面滾動(dòng)動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)頁面滾動(dòng)動(dòng)畫，使用了requestAnimationFrame，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感為興趣的小伙伴們可以參考一下
2022-01-01
js對(duì)圖片base64編碼字符串進(jìn)行解碼并輸出圖像示例
這篇文章主要介紹了js對(duì)圖片base64編碼字符串進(jìn)行解碼并輸出圖像的具體實(shí)現(xiàn)，大家可以參考下面的示例
2014-03-03
淺析Bootstrap表格的使用
Bootstrap - 簡(jiǎn)潔、直觀、強(qiáng)悍、移動(dòng)設(shè)備優(yōu)先的前端開發(fā)框架,讓web開發(fā)更迅速、簡(jiǎn)單。下面給大家介紹Bootstrap表格的使用的相關(guān)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧
2016-06-06
js實(shí)現(xiàn)統(tǒng)計(jì)字符串中特定字符出現(xiàn)個(gè)數(shù)的方法
這篇文章主要介紹了js實(shí)現(xiàn)統(tǒng)計(jì)字符串中特定字符出現(xiàn)個(gè)數(shù)的方法,涉及javascript針對(duì)字符串中字符運(yùn)算操作相關(guān)技巧,需要的朋友可以參考下
2016-08-08
KnockoutJS數(shù)組比較算法實(shí)例詳解
這篇文章主要介紹了KnockoutJS數(shù)組比較算法實(shí)例詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-11-11
JavaScript中好用的數(shù)組對(duì)象排序方法分享
在日常工作中，我們經(jīng)常需要對(duì)數(shù)組對(duì)象進(jìn)行排序，尤其是在處理數(shù)據(jù)可視化需求中。本文將介紹一些簡(jiǎn)單而又實(shí)用的方法，幫助你實(shí)現(xiàn)對(duì)數(shù)組對(duì)象的某幾個(gè) key 進(jìn)行排序
2023-05-05
javascript實(shí)現(xiàn)隨機(jī)顯示星星特效
這篇文章主要介紹了javascript實(shí)現(xiàn)隨機(jī)顯示星星特效的相關(guān)資料,以一個(gè)完整實(shí)例形式較為詳細(xì)的分析了js實(shí)現(xiàn)隨機(jī)顯示星星特效的實(shí)現(xiàn)技巧，需要的朋友可以參考下
2016-01-01
Bootstrap基本插件學(xué)習(xí)筆記之Popover提示框(19)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本插件學(xué)習(xí)筆記之Popover提示框的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12