一行代碼實現純資料json對象的深度複製實現思路

來源:互聯網
上載者:User

複製代碼 代碼如下:
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,則排除成員。 根對象的鍵是一個Null 字元串:""。
如果 replacer 為一個數組,則僅轉換該數組中具有索引值的成員。 成員的轉換順序與鍵在數組中的順序一樣。 當 value 參數也為數組時,將忽略 replacer 數組。
space
可選。 向傳回值 JSON 文本添加縮排、空白和分行符號以使其更易於讀取。
如果省略 space,則將產生傳回值文本,而沒有任何額外空白。
如果 space 為一個數字,則傳回值文本在每個層級縮排指定數目的空格。 如果 space 大於 10,則文本縮排 10 個空格。
如果 space 是非Null 字元串(例如“\t”),則傳回值文本在每個層級中縮排字串中的字元數。
如果 space 是長度大於 10 個字元的字串,則使用前 10 個字元。
傳回值
一個包含 JSON 文本的字串。

從上面的介紹可以看出這個函數把一個對象或數群組轉換成了一個json字串。
2.JSON.parse函數
複製代碼 代碼如下:
將 JavaScript 物件標記法 (Json) 字串轉換為對象。
JSON.parse(text [, reviver])
參數
text
必需。 一個有效 JSON 字串。
reviver
可選。 一個轉換結果的函數。 將為對象的每個成員調用此函數。 如果成員包含嵌套對象,則先於父物件轉換嵌套對象。 對於每個成員,會發生以下情況:
•如果 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);

實驗結果

從上面的結果中我們發現,確實深度複製了一個數組。
對象的複製
複製代碼 代碼如下:
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));

實驗結果
 
從上面的實驗我們發現,這樣的方法也可以複製對象。
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));

實驗結果
 
從上面的實驗結果中可以看出,非純資料的函數不能參與到轉換中,它被“鄙視”了。
所以,這種一句話深度複製的方法只針對於純資料,這個是開發中需要注意的地方。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.