一行代碼實現純數據json對象的深度克隆實現思路
更新時間：2013年01月09日 09:09:24 作者：
今天整理了下資料，分析下為什么一句話可以實現純數據json對象的深度克隆,感興趣的朋友可以了解下哦
復制代碼 代碼如下:
var dataObjCloned=JSON.parse(JSON.stringify( dataObj ))
這是昨天晚上從大城小胖的微博上看到的，當時很感興趣，就mark了下。
今天整理了下資料，分析下為什么一句話可以實現純數據json對象的深度克隆。
1.JSON.stringify函數
復制代碼 代碼如下:
將 JavaScript 值轉換為 JavaScript 對象表示法 (Json) 字符串。
JSON.stringify(value [, replacer] [, space])
參數
value
必需。 要轉換的 JavaScript 值（通常為對象或數組）。
replacer
可選。 轉換結果的函數或數組。
如果 replacer 為一個函數，則 JSON.stringify 會調用該函數，并傳入每個成員的鍵和值。 使用返回值而不是原始值。 如果此函數返回 undefined，則排除成員。 根對象的鍵是一個空字符串：""。
如果 replacer 為一個數組，則僅轉換該數組中具有鍵值的成員。 成員的轉換順序與鍵在數組中的順序一樣。 當 value 參數也為數組時，將忽略 replacer 數組。
space
可選。 向返回值 JSON 文本添加縮進、空白和換行符以使其更易于讀取。
如果省略 space，則將生成返回值文本，而沒有任何額外空白。
如果 space 為一個數字，則返回值文本在每個級別縮進指定數目的空格。 如果 space 大于 10，則文本縮進 10 個空格。
如果 space 是非空字符串（例如“\t”），則返回值文本在每個級別中縮進字符串中的字符數。
如果 space 是長度大于 10 個字符的字符串，則使用前 10 個字符。
返回值
一個包含 JSON 文本的字符串。
從上面的介紹可以看出這個函數把一個對象或數組轉換成了一個json字符串。
2.JSON.parse函數
復制代碼 代碼如下:
將 JavaScript 對象表示法 (Json) 字符串轉換為對象。
JSON.parse(text [, reviver])
參數
text
必需。 一個有效的 JSON 字符串。
reviver
可選。 一個轉換結果的函數。 將為對象的每個成員調用此函數。 如果成員包含嵌套對象，則先于父對象轉換嵌套對象。 對于每個成員，會發(fā)生以下情況：
•如果 reviver 返回一個有效值，則成員值將替換為轉換后的值。
•如果 reviver 返回它接收的相同值，則不修改成員值。
•如果 reviver 返回 null 或 undefined，則刪除成員。
返回值
一個對象或數組。
從上面的介紹可以看出這個函數把一個json字符串轉換成了一個對象或數組。
3.示例
數組的克?。?
復制代碼 代碼如下:
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);
實驗結果：
從上面的結果中我們發(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));
實驗結果：
從上面的實驗我們發(fā)現，這樣的方法也可以克隆對象。
4.但是上面所有的實驗都是針對純數據的，就是說，這種方法只在純數據的數組或者對象克隆中有效。
非純數據的實驗：
復制代碼 代碼如下:
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));
實驗結果：
從上面的實驗結果中可以看出，非純數據的函數不能參與到轉換中，它被“鄙視”了。
所以，這種一句話深度克隆的方法只針對于純數據，這個是開發(fā)中需要注意的地方。
相關文章
這篇文章主要介紹了JavaScript 中調用 Kotlin 方法實例詳解的相關資料,需要的朋友可以參考下2017-06-06
QQ在線客服在每一個web開發(fā)人員的記憶里都是一個經典，既然是經典，也就是必不可少，那就應該很好的呈現出來，本文整理了一些左右懸浮可分組的網站QQ在線客服代碼，需要的朋友可以了解下2012-12-12
與Netscape相反，IE中的事件傳遞方向是從事情發(fā)生的對象開始，然后依次由該對象向所在的父節(jié)點傳遞。2009-12-12
這篇文章主要介紹了微信小程序圖片右邊加兩行文字的代碼，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了淺談JavaScript中的“!!”作用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-08-08
用JS實現的一個include函數...2007-07-07
這篇文章主要為大家詳細介紹了H5圖片上傳插件，基于zepto，支持多文件上傳，進度和圖片預覽，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
一般來說，我們判斷 iframe 是否加載完成其實與 判斷JavaScript 文件是否加載完成 采用的方法很類似2010-01-01
本文主要介紹了three.js中物體的燈光與陰影設置，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
這篇文章主要介紹了javascript感應鼠標圖片透明度顯示的方法,涉及javascript針對鼠標事件及圖片透明度操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02