JS對(duì)象深度克隆實(shí)例分析
本文實(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"}
由此可見,將一個(gè)對(duì)象通過簡(jiǎn)單的傳遞賦值傳遞給一個(gè)新的變量時(shí),僅僅是給該對(duì)象增添了一個(gè)別名。所以,對(duì)該別名的操作也會(huì)作用到原對(duì)象上去,所以通過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"}
通過執(zhí)行結(jié)果可以看出newStudent已經(jīng)成為了一個(gè)克隆出來的副本,對(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)文章
js中setTimeout的妙用--防止循環(huán)超時(shí)
本文主要介紹了使用setTimeout實(shí)現(xiàn)防止循環(huán)超時(shí)的方法,具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03jquery中l(wèi)ive()方法和bind()方法區(qū)別分析
這篇文章主要介紹了jquery中l(wèi)ive()方法和bind()方法區(qū)別,結(jié)合實(shí)例形式簡(jiǎn)單分析了live()方法和bind()方法的功能、使用方法與用法區(qū)別,需要的朋友可以參考下2016-06-06JS與jQuery遍歷Table所有單元格內(nèi)容的方法
這篇文章主要介紹了JS與jQuery遍歷Table所有單元格內(nèi)容的方法,結(jié)合實(shí)例形式分別描述了JavaScript與jQuery實(shí)現(xiàn)遍歷table單元格的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-12-12layui下拉列表select實(shí)現(xiàn)可輸入查找的方法
今天小編就為大家分享一篇layui下拉列表select實(shí)現(xiàn)可輸入查找的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09javascript獲取以及設(shè)置光標(biāo)位置
本文介紹了javascript獲取以及設(shè)置光標(biāo)位置的方法,具有很好的參考價(jià)值,下面跟著小編一起來看下吧2017-02-02JS中的兩種數(shù)據(jù)類型及實(shí)現(xiàn)引用類型的深拷貝的方法
大家都知道在JS中數(shù)據(jù)類型按照訪問方式和存儲(chǔ)方式的不同可分為基本類型和引用類型。這篇文章主要介紹了JS中的兩種數(shù)據(jù)類型以及實(shí)現(xiàn)引用類型的深拷貝 ,需要的朋友可以參考下2018-08-08基于js實(shí)現(xiàn)復(fù)制內(nèi)容到操作系統(tǒng)粘貼板過程解析
這篇文章主要介紹了基于js實(shí)現(xiàn)復(fù)制內(nèi)容到操作系統(tǒng)粘貼板過程解析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10