JSON stringify方法原理及實(shí)例解析
JSON.stringify() 方法用于將 JavaScript 值轉(zhuǎn)換為 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ù)組中的順序一樣。
space:
可選,文本添加縮進(jìn)、空格和換行符,如果 space 是一個數(shù)字,則返回值文本在每個級別縮進(jìn)指定數(shù)目的空格,如果 space 大于 10,則文本縮進(jìn) 10 個空格。space 也可以使用非數(shù)字,如:\t。
返回值:
返回包含 JSON 文本的字符串。
實(shí)例
var str = {"name":"菜鳥教程", "site":"http://www.runoob.com"} str_pretty1 = JSON.stringify(str) document.write( "只有一個參數(shù)情況:" ); document.write( "<br>" ); document.write("<pre>" + str_pretty1 + "</pre>" ); document.write( "<br>" ); str_pretty2 = JSON.stringify(str, null, 4) //使用四個空格縮進(jìn) document.write( "使用參數(shù)情況:" ); document.write( "<br>" ); document.write("<pre>" + str_pretty2 + "</pre>" ); // pre 用于格式化輸出
但是 IE6-7 下沒有 JSON 對象,所以要借助json2.js來實(shí)現(xiàn)。
今天我們來簡單介紹下stringify方法的一些正確使用姿勢吧。
當(dāng)然,讓高手們賤笑了,本文只是分享一些方法給新手朋友們。
var data = [ {name: "王尼瑪", sex:1, age: 30}, {name: "王尼美", sex:0, age: 20}, {name: "王大錘", sex:1, age: 30} ]; var str_json = JSON.stringify(data); console.log(str_json);
這個是我們?nèi)粘S梅?,非常簡單,對吧?/p>
比如說,我們的數(shù)據(jù)非常復(fù)雜,還有類似頭像,昵稱,個人簽名之類的信息。
可是我保存在本地,只需要用戶名,和性別,腫么破呢?
也許你會說 so easy, 遍歷數(shù)據(jù)重新提取下即可。
例如:
var data = [ {name: "王尼瑪", sex:1, age: 30}, {name: "王尼美", sex:0, age: 20}, {name: "王大錘", sex:1, age: 30} ]; for (var i=0, new_data=[]; i<data.length; i++) { new_data.push({ name: data[i].name, sex: data[i].sex }); } var str_json = JSON.stringify(new_data); console.log(str_json);
確實(shí)分分鐘搞定。
其實(shí)我們只需要用stringify第二個參數(shù)即可簡單處理這種問題。
var data = [ {name: "王尼瑪", sex:1, age: 30}, {name: "王尼美", sex:0, age: 20}, {name: "王大錘", sex:1, age: 30} ]; var str_json = JSON.stringify(data, ["name", "sex"]); console.log(str_json);
第二個參數(shù)只要傳入需要的keys數(shù)組,就非常輕松的就完成這種處理了。
當(dāng)然如果我們要更糾結(jié)的處理,比如要把 1,0 修改為男女,那么第二個參數(shù)可以用回調(diào)函數(shù)來處理。
var data = [ {name: "王尼瑪", sex:1, age: 30}, {name: "王尼美", sex:0, age: 20}, {name: "王大錘", sex:1, age: 30} ]; var str_json = JSON.stringify(data, function (k, v) { if (k === "sex") { return ["女", "男"][v]; } return v; }); console.log(str_json);
第二個參數(shù)如此強(qiáng)悍,為我們省去了不少麻煩。
還有第三個參數(shù),用于格式化字符串用的。
var data = [ {name: "王尼瑪", sex:1, age: 30}, {name: "王尼美", sex:0, age: 20}, {name: "王大錘", sex:1, age: 30} ]; var str_json = JSON.stringify(data, null, "\t"); console.log(str_json); str_json = JSON.stringify(data, ["name", "sex"], "\t"); console.log(str_json);
其實(shí),我覺得這是個非常雞肋的功能,,一般情況下卻是沒啥用。
好了,今天的分享就這些了,希望對新手朋友有所幫助。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JSON 入門教程基礎(chǔ)篇 json入門學(xué)習(xí)筆記
- javascript學(xué)習(xí)之json入門
- Ajax與JSON的一些學(xué)習(xí)總結(jié)
- JSON學(xué)習(xí)筆記
- JSON 教程 json入門學(xué)習(xí)筆記
- Python解析json文件相關(guān)知識學(xué)習(xí)
- Java使用JSON傳遞字符串注意事項(xiàng)解析
- 10分鐘掌握XML、JSON及其解析
- Java解析JSON數(shù)據(jù)時報錯問題解決方案
- javascript解析json格式的數(shù)據(jù)方法詳解
- 10分鐘學(xué)會js處理json的常用方法
相關(guān)文章
用js的document.write輸出的廣告無阻塞加載的方法
這篇文章主要介紹了用js的document.write輸出的廣告無阻塞加載的方法,需要的朋友可以參考下2014-06-06解決npm安裝Electron緩慢網(wǎng)絡(luò)超時導(dǎo)致失敗的問題
下面小編就為大家分享一篇解決npm安裝Electron緩慢網(wǎng)絡(luò)超時導(dǎo)致失敗的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02JS模擬實(shí)現(xiàn)ECMAScript5新增的數(shù)組方法
ECMAScript5 新增了十個數(shù)組方法,這些方法只有在ie9及以上瀏覽器中可以被使用,下面是對于這些方法的模擬實(shí)現(xiàn)簡單介紹下,需要的朋友參考下2017-03-03JavaScript Date對象功能與用法學(xué)習(xí)記錄
這篇文章主要介紹了JavaScript Date對象功能與用法,結(jié)合實(shí)例形式總結(jié)分析了JavaScript Date對象基本功能、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04JavaScript中三個等號和兩個等號的區(qū)別(== 和 ===)淺析
javascript中比較運(yùn)算符'=='與'==='可能大家用的比較多,但是大家對他的區(qū)別不是很清楚,接下來小編給大家介紹下js中三個等號和兩個等號的區(qū)別(== 和 ===),感興趣的朋友可以參考下2016-09-09基于JavaScript實(shí)現(xiàn)右鍵菜單和拖拽功能
本文給大家分享基于js實(shí)現(xiàn)的右鍵菜單功能和拖拽功能的代碼解析,非常不錯,具有一定的參考借鑒價值,感興趣的朋友一起看看吧2016-11-11用js閉包的方法實(shí)現(xiàn)多點(diǎn)標(biāo)注冒泡示例
這篇文章主要介紹了用js閉包的方法實(shí)現(xiàn)多點(diǎn)標(biāo)注冒泡,需要的朋友可以參考下2014-05-05javascript在網(wǎng)頁中實(shí)現(xiàn)讀取剪貼板粘貼截圖功能
這篇文章主要介紹了在網(wǎng)頁中實(shí)現(xiàn)讀取剪貼板粘貼截圖功能,即可以把剪貼板的截圖Ctrl+V粘貼到網(wǎng)頁的一個輸入框中,例如QQ截圖、旺旺截圖或者其它截圖軟件,需要的朋友可以參考下2014-06-06