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

從上面的結(jié)果中我們發(fā)現(xiàn),確實深度克隆了一個數(shù)組。
對象的克隆:
復(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));
實驗結(jié)果:

從上面的實驗我們發(fā)現(xiàn),這樣的方法也可以克隆對象。
4.但是上面所有的實驗都是針對純數(shù)據(jù)的,就是說,這種方法只在純數(shù)據(jù)的數(shù)組或者對象克隆中有效。
非純數(shù)據(jù)的實驗:
復(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));
實驗結(jié)果:

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