JS對象的深度克隆方法示例
本文實例講述了JS對象的深度克隆方法。分享給大家供大家參考，具體如下：
js中創(chuàng)建的對象指向內(nèi)存，所以在開發(fā)過程中，往往修改了一個對象的屬性，會影響另外一個對象。
尤其是在angular框架中，dom是由數(shù)據(jù)驅(qū)動的，在增刪改查對象的操作中，對象屬性的繼承關(guān)系是很讓人頭痛的！
我之前遇到的問題就是，在編輯頁面，操作了對象數(shù)據(jù)，影響到了展示數(shù)據(jù)的展現(xiàn)！
我整理了兩種深度克隆對象的方法，供大家參考！
首先var 一個假數(shù)據(jù)
方法1：
遍歷自身，判斷當(dāng)前對象是obj還是list，克隆出新對象
function deepClone(obj)
{
var o,i,j,k;
if(typeof(obj)!="object" || obj===null)return obj;
if(obj instanceof(Array))
{
o=[];
i=0;j=obj.length;
for(;i<j;i++)
{
if(typeof(obj[i])=="object" && obj[i]!=null)
{
o[i]=arguments.callee(obj[i]);
}
else
{
o[i]=obj[i];
}
}
}
else
{
o={};
for(i in obj)
{
if(typeof(obj[i])=="object" && obj[i]!=null)
{
o[i]=arguments.callee(obj[i]);
}
else
{
o[i]=obj[i];
}
}
}
return o;
}
var scheduleClone = deepClone(schedule)
scheduleClone.data[0].contactList.phone[0] = 99999999999
console.log('方法1 深度克隆')
console.log(scheduleClone)
console.log(JSON.stringify(schedule))
console.log(JSON.stringify(scheduleClone))
方法2：
用js原生的json序列化的方式，簡單粗暴！
var scheduleClone2 = JSON.parse(JSON.stringify(schedule));
console.log('方法2 深度克隆')
console.log(scheduleClone2)
scheduleClone2.data[0].contactList.phone[0] = 8888888
console.log(JSON.stringify(schedule))
console.log(JSON.stringify(scheduleClone2))
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
js 關(guān)于=+與+=日期函數(shù)使用說明(賦值運(yùn)算符)
js 關(guān)于=+與+=日期函數(shù)使用說明(賦值運(yùn)算符)，可以看下，就是一些運(yùn)算符的使用，看哪個更適合你。2011-11-11
該如何加載google-analytics(或其他第三方)的JS
很多網(wǎng)站為了獲取用戶訪問網(wǎng)站的統(tǒng)計信息，使用了google-analytics或其他分析網(wǎng)站(下面的討論中只提google-analytics,簡稱ga)。2010-05-05
這篇文章主要介紹了javascript中鍵盤事件用法,實例分析了鍵盤事件包含的方法及具體使用技巧,需要的朋友可以參考下2015-01-01
本文主要介紹了JavaScript 對象合并的幾種方法小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
JavaScript輸出當(dāng)前時間Unix時間戳的方法
這篇文章主要介紹了JavaScript輸出當(dāng)前時間Unix時間戳的方法,涉及javascript中Date及getTime等函數(shù)操作時間的使用技巧,需要的朋友可以參考下2015-04-04
這篇文章主要為大家詳細(xì)介紹了JavaScript純色二維碼變成彩色二維碼的方案，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
微信小程序云開發(fā)實現(xiàn)微信支付功能業(yè)務(wù)邏輯可靠
這篇文章主要介紹了微信小程序云開發(fā)實現(xiàn)微信支付功能，云開發(fā)來開發(fā)微信小程序時，如何實現(xiàn)微信支付，并且保證業(yè)務(wù)邏輯可靠，本文通過實例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2022-05-05
UniApp與WebView雙向通信及數(shù)據(jù)傳輸超詳細(xì)講解
這篇文章主要介紹了UniApp與WebView雙向通信及數(shù)據(jù)傳輸?shù)南嚓P(guān)資料,詳細(xì)講解了UniApp與WebView的通信原理、方法對比、數(shù)據(jù)傳輸實戰(zhàn)、調(diào)試技巧、性能優(yōu)化策略及技術(shù)風(fēng)險控制,通過合理選型和優(yōu)化,需要的朋友可以參考下2025-04-04
微信小程序自定義navigationBar頂部導(dǎo)航欄適配所有機(jī)型（附完整案例）
這篇文章主要介紹了微信小程序自定義navigationBar頂部導(dǎo)航欄適配所有機(jī)型（附完整案例），文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
本文給大家分析20行JS代碼實現(xiàn)粘貼板功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-02-02