JS對象深度克隆實(shí)例分析
本文實(shí)例講述了JS對象深度克隆。分享給大家供大家參考，具體如下：
首先看一個例子：
var student = {
name:"yxz",
age:25
}
var newStudent = student;
newStudent.sex = "male";
console.log(student); //{name:"yxz",age:25,sex:"male"}
由此可見，將一個對象通過簡單的傳遞賦值傳遞給一個新的變量時，僅僅是給該對象增添了一個別名。所以，對該別名的操作也會作用到原對象上去，所以通過newStudent.sex給對象student添加屬性可以實(shí)現(xiàn)。然而，更多的時候我們希望newStudent和student對象是獨(dú)立的，那么就需要生成一個原對象的副本，請看下面的例子：
var cloneObj = function(obj){
var str, newobj = obj.constructor === Array ? [] : {};
if(typeof obj !== 'object'){
return;
} else if(window.JSON){
str = JSON.stringify(obj), //序列化對象
newobj = JSON.parse(str); //還原
} else {
for(var i in obj){
newobj[i] = typeof obj[i] === 'object' ? cloneObj(obj[i]) : obj[i];
}
}
return newobj;
};
//測試
var student = {
name:"yxz",
age:25,
sex:"male"
};
//執(zhí)行深度克隆
var newStudent = cloneObj(student);
delete newStudent.sex;
console.log(newStudent); //{name:"yxz",age:25}
console.log(student); //{name:"yxz",age:25,sex:"male"}
通過執(zhí)行結(jié)果可以看出newStudent已經(jīng)成為了一個克隆出來的副本，對newStudent的任何操作將不再影響student對象。
備注：JSON.stringify和parse分別為JSON對象的序列化和反序列化函數(shù)，即分別負(fù)責(zé)將對象序列化成字符串和將json字符串反序列化成對象，因?yàn)檫@個是屬于ECMAScript5規(guī)范，所以上面程序標(biāo)注部分做了一個兼容處理。
更多關(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è)計(jì)有所幫助。
相關(guān)文章
這篇文章主要介紹了JavaScript頁面回流與重繪,一個html頁面是一個整體，當(dāng)這個整體中的某一個部分發(fā)生改變，那么這個頁面整體會重新進(jìn)行渲染，而如果我們采用添加標(biāo)簽的方式，每次添加一個標(biāo)簽，就會讓每一次頁面都重新渲染，性能急劇下降,下面來看看具體內(nèi)容吧2022-01-01
微信小程序 扭蛋抽獎機(jī)css3動畫實(shí)現(xiàn)詳解
這篇文章主要介紹了微信小程序 扭蛋抽獎機(jī)css3動畫實(shí)現(xiàn)詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-07-07
js實(shí)現(xiàn)按鈕控制圖片360度翻轉(zhuǎn)特效的方法
這篇文章主要介紹了js實(shí)現(xiàn)按鈕控制圖片360度翻轉(zhuǎn)特效的方法,涉及HTML5中canvas方法的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
用javascript對一個json數(shù)組深度賦值示例
本節(jié)主要介紹了用javascript對一個json數(shù)組深度賦值的具體實(shí)現(xiàn)，需要的朋友可以參考下2014-07-07
一個alert出數(shù)組中的隨即值代碼，隨即的到min和max之間的值，經(jīng)測試，比較實(shí)用2014-09-09
一文帶你搞懂JavaScript中的進(jìn)制與進(jìn)制轉(zhuǎn)換
JavaScript 中提供的進(jìn)制表示方法有四種：十進(jìn)制、二進(jìn)制、十六進(jìn)制、八進(jìn)制。本文主要講介紹一下JS中這些進(jìn)制的互相轉(zhuǎn)換，感興趣的可以了解一下2023-02-02
JS實(shí)現(xiàn)轉(zhuǎn)動隨機(jī)數(shù)抽獎特效代碼
這篇文章主要為大家詳細(xì)介紹了一款轉(zhuǎn)動隨機(jī)數(shù)抽獎的JS特效代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-08-08
微信小程序tab左右滑動切換功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序tab左右滑動切換功能的實(shí)現(xiàn)代碼,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-02-02
這篇文章主要為大家詳細(xì)介紹了原生js生成圖片驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
JavaScript圓形虛幻效果，跟PS里面的羽化效果有點(diǎn)像，需要的朋友可以參考下。2011-12-12