詳解JavaScript中JSON.stringify方法
JSON 對象是我們經(jīng)常使用的一種數(shù)據(jù)存儲對象,它的適用范圍非常廣。
而 JSON.stringify 方法的使用頻率也極高,合理使用 stringify 方法,我們可以實現(xiàn)很多簡單需求:
- 要實現(xiàn)對象的深拷貝時,我們可以用 JSON 對象的 JSON.stringify 和 JSON.parse 來拷貝一個完全一樣的對象,而不會對原對象產(chǎn)生任何引用關(guān)系。
- 在使用 localStorage 時,也會用到它,因為 localStorage 只能存儲字符串格式的內(nèi)容,所以,我們在存之前,將數(shù)值轉(zhuǎn)換成 JSON字符串。
JSON.stringify
JSON.stringify 方法可以幫我們把一個對象或數(shù)組轉(zhuǎn)換成一個 JSON字符串。
我們通常只會用到它的第一個參數(shù),其實它還有另外兩個參數(shù),可以讓它實現(xiàn)一些非常好用的功能。
語法:
JSON.stringify(value[, replacer [, space]])
參數(shù):
- value:將要被序列化的變量的值
- replacer:替代器??梢允呛瘮?shù)或者是數(shù)組:
- 如果是一個函數(shù),則
value
每個屬性都要經(jīng)過這個函數(shù)的處理,該函數(shù)的返回值就是最后被序列化后的值。 - 如果是一個數(shù)組,則要求該數(shù)組的元素是字符串,且這些元素會被當(dāng)做
value
的鍵(key
)進行匹配,最后序列化的結(jié)果,是只包含該數(shù)組每個元素為key
的值。
- 如果是一個函數(shù),則
- space:指定輸出數(shù)值的代碼縮進,美化格式之用,可以是數(shù)字或者字符串:
- 如果是數(shù)字(最大為10)的話,代表每行代碼的縮進是多少個空格。
- 如果是字符串的話,該字符串(最多前十個字符)將作顯示在每行代碼之前。
這時候,你應(yīng)該知道了。我們可以用 JSON.stringify 來做序列化時的過濾,相當(dāng)于我們可以自定義JSON.stringify 的解析邏輯。
使用函數(shù)過濾并序列化對象
function replacer(key, value) { if (typeof value === "string") { return undefined; } return value; } var foo = { foundation: "Mozilla", model: "box", week: 45, transport: "car", month: 7 }; var jsonString = JSON.stringify(foo, replacer); // {"week":45,"month":7}
使用數(shù)組過濾并序列化對象
const user = { name: "zollero", nick: "z", skills: ["JavaScript", "CSS", "HTML5"] }; JSON.stringify(user, ["name", "skills"], 2); // "{// "name": "zollero",// "skills": [// "JavaScript",// "CSS",// "HTML5"http:// ]// }"
還有一個有意思的東西,是對象的toJSON
屬性。
如果一個對象有toJSON
屬性,當(dāng)它被序列化的時候,不會對該對象進行序列化,而是將它的toJSON
方法的返回值進行序列化。
看下面的例子:
var obj = { foo: "foo", toJSON: function () { return "bar"; } }; JSON.stringify(obj); // '"bar"'JSON.stringify({x: obj}); // '{"x":"bar"}'
總結(jié)
stringify 方法的重點和難點在于第二和第三個參數(shù)的靈活使用上,需要多加練習(xí)。
到此這篇關(guān)于詳解JavaScript中JSON.stringify方法的文章就介紹到這了,更多相關(guān)JavaScript JSON.stringify方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript 系統(tǒng)文件夾文件操作及參數(shù)介紹
javascript文件操作包括寫入文件、當(dāng)前目錄文件、讀文件、刪除文件、批量刪除,未刪除文件夾,刪除不了當(dāng)前目錄文件等等,感興趣的朋友可以參考下2013-01-01ES6?Promise.all的使用方法以及其細節(jié)詳解
Promise對象用于表示一個異步操作的最終完成(或失敗)及其結(jié)果值,下面這篇文章主要給大家介紹了關(guān)于ES6?Promise.all的使用方法以及其細節(jié)的相關(guān)資料,需要的朋友可以參考下2022-07-07用RadioButten或CheckBox實現(xiàn)div的顯示與隱藏
用RadioButten(或CheckBox)實現(xiàn)div的顯示與隱藏,當(dāng)選擇“女”時,顯示“美女、才女”;當(dāng)選擇“男”時隱藏,具體實現(xiàn)如下,感興趣的朋友可以參考下2013-09-09js重寫alert控件(適合學(xué)習(xí)js的新手朋友)
這篇文章主要介紹js重寫alert控件的過程比較適合學(xué)習(xí)js的新手朋友,需要的朋友可以參考下2014-08-08JavaScript運行過程中的“預(yù)編譯階段”和“執(zhí)行階段”
這篇文章主要介紹了JavaScript運行過程中的“預(yù)編譯階段”和“執(zhí)行階段”的相關(guān)資料,需要的朋友可以參考下2015-12-12