JS對(duì)象深度克隆實(shí)例分析

更新時(shí)間：2017年03月16日 11:59:55 作者：yxz_turing

這篇文章主要介紹了JS對(duì)象深度克隆,結(jié)合實(shí)例形式分析了JavaScript對(duì)象深度克隆的實(shí)現(xiàn)方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了JS對(duì)象深度克隆。分享給大家供大家參考，具體如下：

首先看一個(gè)例子：

var student = {
  name:"yxz",
  age:25
}
var newStudent = student;
newStudent.sex = "male";
console.log(student); //{name:"yxz",age:25,sex:"male"}

由此可見(jiàn)，將一個(gè)對(duì)象通過(guò)簡(jiǎn)單的傳遞賦值傳遞給一個(gè)新的變量時(shí)，僅僅是給該對(duì)象增添了一個(gè)別名。所以，對(duì)該別名的操作也會(huì)作用到原對(duì)象上去，所以通過(guò)newStudent.sex給對(duì)象student添加屬性可以實(shí)現(xiàn)。然而，更多的時(shí)候我們希望newStudent和student對(duì)象是獨(dú)立的，那么就需要生成一個(gè)原對(duì)象的副本，請(qǐng)看下面的例子：

var cloneObj = function(obj){
  var str, newobj = obj.constructor === Array ? [] : {};
  if(typeof obj !== 'object'){
    return;
  } else if(window.JSON){
    str = JSON.stringify(obj), //序列化對(duì)象
    newobj = JSON.parse(str); //還原
  } else {
    for(var i in obj){
      newobj[i] = typeof obj[i] === 'object' ? cloneObj(obj[i]) : obj[i]; 
    }
  }
  return newobj;
};
//測(cè)試
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"}

通過(guò)執(zhí)行結(jié)果可以看出newStudent已經(jīng)成為了一個(gè)克隆出來(lái)的副本，對(duì)newStudent的任何操作將不再影響student對(duì)象。

備注：JSON.stringify和parse分別為JSON對(duì)象的序列化和反序列化函數(shù)，即分別負(fù)責(zé)將對(duì)象序列化成字符串和將json字符串反序列化成對(duì)象，因?yàn)檫@個(gè)是屬于ECMAScript5規(guī)范，所以上面程序標(biāo)注部分做了一個(gè)兼容處理。

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

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

您可能感興趣的文章:

相關(guān)文章

JavaScript頁(yè)面回流與重繪
這篇文章主要介紹了JavaScript頁(yè)面回流與重繪,一個(gè)html頁(yè)面是一個(gè)整體，當(dāng)這個(gè)整體中的某一個(gè)部分發(fā)生改變，那么這個(gè)頁(yè)面整體會(huì)重新進(jìn)行渲染，而如果我們采用添加標(biāo)簽的方式，每次添加一個(gè)標(biāo)簽，就會(huì)讓每一次頁(yè)面都重新渲染，性能急劇下降,下面來(lái)看看具體內(nèi)容吧
2022-01-01
微信小程序扭蛋抽獎(jiǎng)機(jī)css3動(dòng)畫實(shí)現(xiàn)詳解
這篇文章主要介紹了微信小程序扭蛋抽獎(jiǎng)機(jī)css3動(dòng)畫實(shí)現(xiàn)詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-07-07
js實(shí)現(xiàn)按鈕控制圖片360度翻轉(zhuǎn)特效的方法
這篇文章主要介紹了js實(shí)現(xiàn)按鈕控制圖片360度翻轉(zhuǎn)特效的方法,涉及HTML5中canvas方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-02-02
用javascript對(duì)一個(gè)json數(shù)組深度賦值示例
本節(jié)主要介紹了用javascript對(duì)一個(gè)json數(shù)組深度賦值的具體實(shí)現(xiàn)，需要的朋友可以參考下
2014-07-07
alert出數(shù)組中的隨即值代碼
一個(gè)alert出數(shù)組中的隨即值代碼，隨即的到min和max之間的值，經(jīng)測(cè)試，比較實(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)動(dòng)隨機(jī)數(shù)抽獎(jiǎng)特效代碼
這篇文章主要為大家詳細(xì)介紹了一款轉(zhuǎn)動(dòng)隨機(jī)數(shù)抽獎(jiǎng)的JS特效代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2015-08-08
微信小程序tab左右滑動(dòng)切換功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序tab左右滑動(dòng)切換功能的實(shí)現(xiàn)代碼,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-02-02
原生js生成圖片驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了原生js生成圖片驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-10-10
用JavaScript仿PS里的羽化效果代碼
JavaScript圓形虛幻效果，跟PS里面的羽化效果有點(diǎn)像，需要的朋友可以參考下。
2011-12-12