JSON stringify方法原理及實(shí)例解析

更新時(shí)間：2020年10月23日 16:26:03 作者：小猿筆記

這篇文章主要介紹了JSON stringify方法原理及實(shí)例解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

JSON.stringify() 方法用于將 JavaScript 值轉(zhuǎn)換為 JSON 字符串。

語法

JSON.stringify(value[, replacer[, space]])

參數(shù)說明：

value:

必需，要轉(zhuǎn)換的 JavaScript 值（通常為對(duì)象或數(shù)組）。

replacer:

可選。用于轉(zhuǎn)換結(jié)果的函數(shù)或數(shù)組。

如果 replacer 為函數(shù)，則 JSON.stringify 將調(diào)用該函數(shù)，并傳入每個(gè)成員的鍵和值。使用返回值而不是原始值。如果此函數(shù)返回 undefined，則排除成員。根對(duì)象的鍵是一個(gè)空字符串：""。

如果 replacer 是一個(gè)數(shù)組，則僅轉(zhuǎn)換該數(shù)組中具有鍵值的成員。成員的轉(zhuǎn)換順序與鍵在數(shù)組中的順序一樣。

space:

可選，文本添加縮進(jìn)、空格和換行符，如果 space 是一個(gè)數(shù)字，則返回值文本在每個(gè)級(jí)別縮進(jìn)指定數(shù)目的空格，如果 space 大于 10，則文本縮進(jìn) 10 個(gè)空格。space 也可以使用非數(shù)字，如：\t。

返回值：
返回包含 JSON 文本的字符串。

實(shí)例

var str = {"name":"菜鳥教程", "site":"http://www.runoob.com"}
str_pretty1 = JSON.stringify(str)
document.write( "只有一個(gè)參數(shù)情況：" );
document.write( "<br>" );
document.write("<pre>" + str_pretty1 + "</pre>" );
 
document.write( "<br>" );
str_pretty2 = JSON.stringify(str, null, 4) //使用四個(gè)空格縮進(jìn)
document.write( "使用參數(shù)情況：" );
document.write( "<br>" );
document.write("<pre>" + str_pretty2 + "</pre>" ); // pre 用于格式化輸出

但是 IE6-7 下沒有 JSON 對(duì)象，所以要借助json2.js來實(shí)現(xiàn)。

今天我們來簡(jiǎn)單介紹下stringify方法的一些正確使用姿勢(shì)吧。

當(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);

這個(gè)是我們?nèi)粘Ｓ梅?，非常?jiǎn)單，對(duì)吧。

比如說，我們的數(shù)據(jù)非常復(fù)雜，還有類似頭像，昵稱，個(gè)人簽名之類的信息。
可是我保存在本地，只需要用戶名，和性別，腫么破呢？
也許你會(huì)說 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第二個(gè)參數(shù)即可簡(jiǎn)單處理這種問題。

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);

第二個(gè)參數(shù)只要傳入需要的keys數(shù)組，就非常輕松的就完成這種處理了。

當(dāng)然如果我們要更糾結(jié)的處理，比如要把 1,0 修改為男女，那么第二個(gè)參數(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);

第二個(gè)參數(shù)如此強(qiáng)悍，為我們省去了不少麻煩。

還有第三個(gè)參數(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í)，我覺得這是個(gè)非常雞肋的功能，，一般情況下卻是沒啥用。

好了，今天的分享就這些了，希望對(duì)新手朋友有所幫助。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: