一行代碼實(shí)現(xiàn)純數(shù)據(jù)json對(duì)象的深度克隆實(shí)現(xiàn)思路
更新時(shí)間:2013年01月09日 09:09:24 作者:
今天整理了下資料,分析下為什么一句話可以實(shí)現(xiàn)純數(shù)據(jù)json對(duì)象的深度克隆,感興趣的朋友可以了解下哦
復(fù)制代碼 代碼如下:
var dataObjCloned=JSON.parse(JSON.stringify( dataObj ))
這是昨天晚上從大城小胖的微博上看到的,當(dāng)時(shí)很感興趣,就mark了下。
今天整理了下資料,分析下為什么一句話可以實(shí)現(xiàn)純數(shù)據(jù)json對(duì)象的深度克隆。
1.JSON.stringify函數(shù)
復(fù)制代碼 代碼如下:
將 JavaScript 值轉(zhuǎn)換為 JavaScript 對(duì)象表示法 (Json) 字符串。
JSON.stringify(value [, replacer] [, space])
參數(shù)
value
必需。 要轉(zhuǎn)換的 JavaScript 值(通常為對(duì)象或數(shù)組)。
replacer
可選。 轉(zhuǎn)換結(jié)果的函數(shù)或數(shù)組。
如果 replacer 為一個(gè)函數(shù),則 JSON.stringify 會(huì)調(diào)用該函數(shù),并傳入每個(gè)成員的鍵和值。 使用返回值而不是原始值。 如果此函數(shù)返回 undefined,則排除成員。 根對(duì)象的鍵是一個(gè)空字符串:""。
如果 replacer 為一個(gè)數(shù)組,則僅轉(zhuǎn)換該數(shù)組中具有鍵值的成員。 成員的轉(zhuǎn)換順序與鍵在數(shù)組中的順序一樣。 當(dāng) value 參數(shù)也為數(shù)組時(shí),將忽略 replacer 數(shù)組。
space
可選。 向返回值 JSON 文本添加縮進(jìn)、空白和換行符以使其更易于讀取。
如果省略 space,則將生成返回值文本,而沒有任何額外空白。
如果 space 為一個(gè)數(shù)字,則返回值文本在每個(gè)級(jí)別縮進(jìn)指定數(shù)目的空格。 如果 space 大于 10,則文本縮進(jìn) 10 個(gè)空格。
如果 space 是非空字符串(例如“\t”),則返回值文本在每個(gè)級(jí)別中縮進(jìn)字符串中的字符數(shù)。
如果 space 是長(zhǎng)度大于 10 個(gè)字符的字符串,則使用前 10 個(gè)字符。
返回值
一個(gè)包含 JSON 文本的字符串。
從上面的介紹可以看出這個(gè)函數(shù)把一個(gè)對(duì)象或數(shù)組轉(zhuǎn)換成了一個(gè)json字符串。
2.JSON.parse函數(shù)
復(fù)制代碼 代碼如下:
將 JavaScript 對(duì)象表示法 (Json) 字符串轉(zhuǎn)換為對(duì)象。
JSON.parse(text [, reviver])
參數(shù)
text
必需。 一個(gè)有效的 JSON 字符串。
reviver
可選。 一個(gè)轉(zhuǎn)換結(jié)果的函數(shù)。 將為對(duì)象的每個(gè)成員調(diào)用此函數(shù)。 如果成員包含嵌套對(duì)象,則先于父對(duì)象轉(zhuǎn)換嵌套對(duì)象。 對(duì)于每個(gè)成員,會(huì)發(fā)生以下情況:
•如果 reviver 返回一個(gè)有效值,則成員值將替換為轉(zhuǎn)換后的值。
•如果 reviver 返回它接收的相同值,則不修改成員值。
•如果 reviver 返回 null 或 undefined,則刪除成員。
返回值
一個(gè)對(duì)象或數(shù)組。
從上面的介紹可以看出這個(gè)函數(shù)把一個(gè)json字符串轉(zhuǎn)換成了一個(gè)對(duì)象或數(shù)組。
3.示例
數(shù)組的克?。?
復(fù)制代碼 代碼如下:
var obj = [1,2,[3,4,5]];
var objCloned = JSON.parse(JSON.stringify(obj));
console.log(obj);
console.log(JSON.stringify(obj));
console.log(objCloned);
objCloned[0] = 6;
console.log(obj);
console.log(objCloned);
實(shí)驗(yàn)結(jié)果:

從上面的結(jié)果中我們發(fā)現(xiàn),確實(shí)深度克隆了一個(gè)數(shù)組。
對(duì)象的克隆:
復(fù)制代碼 代碼如下:
var obj = {name:'rey',info:{location:'beijing',age:'28'}};
var objCloned = JSON.parse(JSON.stringify(obj));
console.log(obj);
console.log(JSON.stringify(obj));
console.log(objCloned);
console.log(JSON.stringify(objCloned));
objCloned.name = 'luopan';
console.log(obj);
console.log(JSON.stringify(obj));
console.log(objCloned);
console.log(JSON.stringify(objCloned));
實(shí)驗(yàn)結(jié)果:

從上面的實(shí)驗(yàn)我們發(fā)現(xiàn),這樣的方法也可以克隆對(duì)象。
4.但是上面所有的實(shí)驗(yàn)都是針對(duì)純數(shù)據(jù)的,就是說,這種方法只在純數(shù)據(jù)的數(shù)組或者對(duì)象克隆中有效。
非純數(shù)據(jù)的實(shí)驗(yàn):
復(fù)制代碼 代碼如下:
var obj = {name:'rey',info:{location:'beijing',age:'28'},hello:function(){console.log('hello world!');}};
var objCloned = JSON.parse(JSON.stringify(obj));
console.log(obj);
console.log(JSON.stringify(obj));
console.log(objCloned);
console.log(JSON.stringify(objCloned));
objCloned.name = 'luopan';
console.log(obj);
console.log(JSON.stringify(obj));
console.log(objCloned);
console.log(JSON.stringify(objCloned));
實(shí)驗(yàn)結(jié)果:

從上面的實(shí)驗(yàn)結(jié)果中可以看出,非純數(shù)據(jù)的函數(shù)不能參與到轉(zhuǎn)換中,它被“鄙視”了。
所以,這種一句話深度克隆的方法只針對(duì)于純數(shù)據(jù),這個(gè)是開發(fā)中需要注意的地方。
相關(guān)文章
JavaScript 中調(diào)用 Kotlin 方法實(shí)例詳解
這篇文章主要介紹了JavaScript 中調(diào)用 Kotlin 方法實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-06-06左右懸浮可分組的網(wǎng)站QQ在線客服代碼(可謂經(jīng)典)
QQ在線客服在每一個(gè)web開發(fā)人員的記憶里都是一個(gè)經(jīng)典,既然是經(jīng)典,也就是必不可少,那就應(yīng)該很好的呈現(xiàn)出來,本文整理了一些左右懸浮可分組的網(wǎng)站QQ在線客服代碼,需要的朋友可以了解下2012-12-12用JS實(shí)現(xiàn)的一個(gè)include函數(shù)
用JS實(shí)現(xiàn)的一個(gè)include函數(shù)...2007-07-07javascript感應(yīng)鼠標(biāo)圖片透明度顯示的方法
這篇文章主要介紹了javascript感應(yīng)鼠標(biāo)圖片透明度顯示的方法,涉及javascript針對(duì)鼠標(biāo)事件及圖片透明度操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02