JSON stringify方法原理及實例解析
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:
可選,文本添加縮進、空格和換行符,如果 space 是一個數(shù)字,則返回值文本在每個級別縮進指定數(shù)目的空格,如果 space 大于 10,則文本縮進 10 個空格。space 也可以使用非數(shù)字,如:\t。
返回值:
返回包含 JSON 文本的字符串。
實例
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) //使用四個空格縮進
document.write( "使用參數(shù)情況:" );
document.write( "<br>" );
document.write("<pre>" + str_pretty2 + "</pre>" ); // pre 用于格式化輸出
但是 IE6-7 下沒有 JSON 對象,所以要借助json2.js來實現(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);
確實分分鐘搞定。
其實我們只需要用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ù)如此強悍,為我們省去了不少麻煩。
還有第三個參數(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);
其實,我覺得這是個非常雞肋的功能,,一般情況下卻是沒啥用。
好了,今天的分享就這些了,希望對新手朋友有所幫助。
以上就是本文的全部內(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傳遞字符串注意事項解析
- 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-02
JS模擬實現(xiàn)ECMAScript5新增的數(shù)組方法
ECMAScript5 新增了十個數(shù)組方法,這些方法只有在ie9及以上瀏覽器中可以被使用,下面是對于這些方法的模擬實現(xiàn)簡單介紹下,需要的朋友參考下2017-03-03
JavaScript Date對象功能與用法學(xué)習(xí)記錄
這篇文章主要介紹了JavaScript Date對象功能與用法,結(jié)合實例形式總結(jié)分析了JavaScript Date對象基本功能、用法及操作注意事項,需要的朋友可以參考下2020-04-04
JavaScript中三個等號和兩個等號的區(qū)別(== 和 ===)淺析
javascript中比較運算符'=='與'==='可能大家用的比較多,但是大家對他的區(qū)別不是很清楚,接下來小編給大家介紹下js中三個等號和兩個等號的區(qū)別(== 和 ===),感興趣的朋友可以參考下2016-09-09
用js閉包的方法實現(xiàn)多點標(biāo)注冒泡示例
這篇文章主要介紹了用js閉包的方法實現(xiàn)多點標(biāo)注冒泡,需要的朋友可以參考下2014-05-05
javascript在網(wǎng)頁中實現(xiàn)讀取剪貼板粘貼截圖功能
這篇文章主要介紹了在網(wǎng)頁中實現(xiàn)讀取剪貼板粘貼截圖功能,即可以把剪貼板的截圖Ctrl+V粘貼到網(wǎng)頁的一個輸入框中,例如QQ截圖、旺旺截圖或者其它截圖軟件,需要的朋友可以參考下2014-06-06

