淺談JS中的JSON.stringify() 和 JSON.parse()

我們知道,JSON.stringify()JSON.parse() 是一對(duì)處理JSON數(shù)據(jù)的方法,前者是將JSON對(duì)象序列化為字符串纹笼,而后者是將JSON字符串解析為JSON對(duì)象饱普。

但是你有較為深入地去了解過它們嗎?它們分別可以傳入幾個(gè)參數(shù)以及每個(gè)參數(shù)對(duì)應(yīng)的作用是什么你知道嗎吕漂?


一亲配、JSON.stringify()

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

它可以傳入三個(gè)參數(shù),參數(shù)1 是需要字符串化的對(duì)象惶凝,參數(shù)2 是用于指定對(duì)象序列化過程中需要被處理的屬性吼虎,參數(shù)3 是用于指定輸出字符串的縮進(jìn)格式。后兩個(gè)參數(shù)是可選的苍鲜,而我們最常用的就是只傳一個(gè)參數(shù)思灰。

1. 參數(shù)一(value)

需要字符串化的對(duì)象,且該對(duì)象須是安全的JSON對(duì)象混滔,而對(duì)于不安全的JSON對(duì)象都不能被正常序列化洒疚。

① 不安全的JSON對(duì)象

何為不安全的JSON對(duì)象歹颓?

undefined、function油湖、symbol和包含循環(huán)的引用的對(duì)象都不符合JSON結(jié)構(gòu)標(biāo)準(zhǔn)巍扛,所以它們本身以及包含它們的對(duì)象都是不安全的JSON對(duì)象。

那么對(duì)于不安全的JSON對(duì)象乏德,JSON.stringify()會(huì)如何處理它們呢撤奸?

1) undefined、function喊括、symbol

單獨(dú)處理它們胧瓜,直接返回undefined

JSON.stringify(undefined);    //  undefined
JSON.stringify(function(){});    //  undefined
JSON.stringify(Symbol());    //  undefined

包含它們的對(duì)象郑什,自動(dòng)將其忽略贷痪。例如:

JSON.stringify({a:1, b:undefined, c:function(){}, [Symbol()]:1});    //  "{"a":1}"

包含它們的數(shù)組,自動(dòng)將其轉(zhuǎn)成null蹦误。例如:

JSON.stringify([1,undefined,function(){},Symbol()]);    //  "[1,null,null,null]"
2) 包含循環(huán)引用的對(duì)象

如果兩個(gè)對(duì)象之間互相引用劫拢,形成一個(gè)無限循環(huán),那么無論對(duì)其中的哪個(gè)對(duì)象進(jìn)行JSON字符串化都會(huì)直接報(bào)錯(cuò)强胰!例如:

var obj1 = {};
var obj2 = {
  a: obj1
};
obj1.a = obj2;
JSON.stringify(obj1);  //  Uncaught TypeError
JSON.stringify(obj2);  //  Uncaught TypeError

② 含有toJSON()方法的對(duì)象

對(duì)該類對(duì)象進(jìn)行JSON字符串化舱沧,會(huì)先調(diào)用toJSON()方法,然后用它的返回值來進(jìn)行序列化偶洋。例如:

var obj = {
  a: 1,
  toJSON(){
    return function(){}
  }
};
JSON.stringify(obj);  //  undefined

正常按照前面講的忽略function來說應(yīng)該要返回"{"a":1}"才對(duì)嘛熟吏,為啥是undefined呢? 這就是因?yàn)榘?code>toJSON()方法的緣故,只要有它玄窝,直接就處理它的返回值牵寺。上例中因?yàn)?code>toJSON()方法返回值是個(gè)不安全的JSON對(duì)象,所以就按照前面 ① 中講的方式來處理了恩脂。

再看個(gè)例子你就明白了:

var obj = {
  a: 1,
  toJSON(){
    return [1,undefined,function(){},Symbol()]
  }
};
JSON.stringify(obj);  //  "[1,null,null,null]"

2. 參數(shù)二(replacer)

用于指定對(duì)象序列化過程中需要被處理的屬性帽氓,它可以是數(shù)組或函數(shù)。

① 數(shù)組

必須是字符串?dāng)?shù)組俩块,其中包含序列化要處理的對(duì)象的屬性名稱黎休,除此之外的其他屬性會(huì)被忽略。例如:

var obj = {
  a: 1,
  b: 2
};
JSON.stringify(obj, ['a']);  //  "{"a":1}"

② 函數(shù)

該函數(shù)會(huì)先調(diào)用對(duì)象本身玉凯,然后遍歷對(duì)象的每個(gè)屬性势腮。函數(shù)傳入兩個(gè)參數(shù),第一個(gè)為屬性名(key)漫仆,第二個(gè)為屬性值(value)捎拯。開始調(diào)用對(duì)象本身時(shí),第一個(gè)參數(shù)key為空字符串盲厌,第二個(gè)參數(shù)value為對(duì)象本身署照,而此時(shí)函數(shù)的返回值會(huì)直接替換原對(duì)象座菠。而后每次遍歷對(duì)象屬性時(shí)的返回值都會(huì)替換原有該屬性的值。例如:

var obj = {
  a: 1,
  b: 2
};
JSON.stringify(obj, function(key,value){
  if(key === '') { 
    console.log(value);  //  {a: 1, b: 2}
    return value;
  }
  if(key === 'a') { 
    console.log(value);   //  1
    return 'aaa';
  }
  if(key === 'b') { 
    console.log(value);    //  2
    return 'bbb'; 
  }
});   //  "{"a":"aaa","b":"bbb"}"

看到了嗎藤树?每一次遍歷返回值都可能會(huì)對(duì)最終的處理結(jié)果產(chǎn)生影響。我們?cè)倏磦€(gè)例子:

var obj = {
  a: 1,
  b: 2
};
JSON.stringify(obj, function(key,value){
  if(key === '') { return {a:1,c:2} }  // 替換原對(duì)象為{a:1,c:2}
  if(key === 'a') { return undefined }  // 替換原有屬性a的值為undefined拓萌,最終該屬性會(huì)被忽略
  if(key === 'b') { return 'bbb' }  // 原對(duì)象已被替換岁钓,所以不存在屬性b
  if(key === 'c') { return 'ccc' }  // 替換原有屬性c的值為'ccc'
});   //  "{"c":"ccc"}"

3. 參數(shù)三(space)

用于指定輸出字符串的縮進(jìn)格式。它可以是正整數(shù)微王,也可以是字符串屡限。當(dāng)是正整數(shù)時(shí),它指定的是每一級(jí)縮進(jìn)的字符數(shù)炕倘,當(dāng)它是字符串時(shí)钧大,該字符串的前十個(gè)字符將會(huì)被用于每一級(jí)的縮進(jìn)。例如:

var obj = {
  a: 1,
  b: 2
};
JSON.stringify(obj, null, 4);
JSON.stringify(obj, null, '**********--%%##');

最后輸出結(jié)果為:

"{
    "a": 1,
    "b": 2
}"
"{
**********"a": 1,
**********"b": 2
}"

可以看到罩旋,無論傳入的字符串有多長啊央,最終只會(huì)取前十個(gè)字符用于縮進(jìn)填充。

二涨醋、JSON.parse()

了解完了JSON.stringify()瓜饥,我們?cè)賮砜纯此哪娌僮骱瘮?shù)JSON.parse()

JSON.parse(text[, reviver])

它可以傳入兩個(gè)參數(shù)浴骂,參數(shù)1 是需要被解析的字符串乓土,參數(shù)2 是用于修改解析生成的原始值。后一個(gè)參數(shù)是可選的溯警,而我們最常用的就是只傳一個(gè)參數(shù)趣苏。

1. 參數(shù)一(text)

該參數(shù)必須是符合JSON規(guī)范的字符串,如果是其他類型梯轻,則會(huì)被強(qiáng)制類型轉(zhuǎn)換成字符串格式食磕,如果不符合JSON規(guī)范,則會(huì)報(bào)錯(cuò)喳挑!例如:

JSON.parse('[1,2]');  // [1,2]
JSON.parse('null');  // null
JSON.parse('false');  // false
JSON.parse('{"a":1}');  // {a: 1}
JSON.parse('{a:1}');  // Uncaught SyntaxError
JSON.parse("{'a':1}");  // Uncaught SyntaxError
JSON.parse('undefined');  // Uncaught SyntaxError

注意JSON字符串中的key必須有雙引號(hào)(單引號(hào)也不行)芬为,不然是不符合JSON規(guī)范的。

2. 參數(shù)二(reviver)

該參數(shù)是個(gè)函數(shù)蟀悦,作用類似于前面JSON.stringify()的第二個(gè)參數(shù)replacer媚朦,同樣是對(duì)屬性進(jìn)行遍歷,同樣有key和value兩個(gè)參數(shù)日戈。我們具體來看個(gè)例子:

var str = '{"a": 1, "b":2}';
JSON.parse(str, function(key,value){
  if(key === 'a') { 
    console.log(value);   //  1
    return function(){} 
  }
  if(key === 'b') { 
    console.log(value);   //  2
    return 'bbb'
   }
  if(key === '') { 
    console.log(value);   //  {a: function(){}, b: "bbb"}
    return {a:1,c:2}
  }
});   //  {a: 1, c: 2}

看到了嗎询张?前面屬性的遍歷可以修改輸出對(duì)象的屬性值,但最終輸出的值關(guān)鍵還是取決于key為空字符串時(shí)的返回值浙炼,它可以將之前所有的努力都變?yōu)橥絼冢?/p>


重點(diǎn)總結(jié)

① 單獨(dú)字符串化undefined份氧、functionsymbol結(jié)果都為undefined唯袄;
② 字符串化含有undefined、functionsymbol的對(duì)象蜗帜,這些值所在的屬性都會(huì)被忽略恋拷;
③ 字符串化含有undefined、functionsymbol的數(shù)組厅缺,這些值都會(huì)被轉(zhuǎn)化為null蔬顾;
④ 字符串化含有循環(huán)引用的對(duì)象會(huì)報(bào)錯(cuò);
⑤ 字符串化含有toJSON()方法的對(duì)象湘捎,會(huì)直接字符串化該方法執(zhí)行的返回值诀豁;
JSON.stringify()的三個(gè)參數(shù)作用依次為 指定需要字符串化的對(duì)象指定對(duì)象序列化過程中需要被處理的屬性指定輸出字符串的縮進(jìn)格式窥妇;
JSON.parse()的兩個(gè)參數(shù)作用依次為 指定需要被解析的字符串修改解析生成的原始值舷胜。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市活翩,隨后出現(xiàn)的幾起案子烹骨,更是在濱河造成了極大的恐慌,老刑警劉巖材泄,帶你破解...
    沈念sama閱讀 216,544評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件展氓,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡脸爱,警方通過查閱死者的電腦和手機(jī)遇汞,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,430評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來簿废,“玉大人空入,你說我怎么就攤上這事∽迕剩” “怎么了歪赢?”我有些...
    開封第一講書人閱讀 162,764評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長单料。 經(jīng)常有香客問我埋凯,道長,這世上最難降的妖魔是什么扫尖? 我笑而不...
    開封第一講書人閱讀 58,193評(píng)論 1 292
  • 正文 為了忘掉前任白对,我火速辦了婚禮,結(jié)果婚禮上换怖,老公的妹妹穿的比我還像新娘甩恼。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,216評(píng)論 6 388
  • 文/花漫 我一把揭開白布条摸。 她就那樣靜靜地躺著悦污,像睡著了一般。 火紅的嫁衣襯著肌膚如雪钉蒲。 梳的紋絲不亂的頭發(fā)上切端,一...
    開封第一講書人閱讀 51,182評(píng)論 1 299
  • 那天,我揣著相機(jī)與錄音顷啼,去河邊找鬼踏枣。 笑死,一個(gè)胖子當(dāng)著我的面吹牛线梗,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播怠益,決...
    沈念sama閱讀 40,063評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼仪搔,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了蜻牢?” 一聲冷哼從身側(cè)響起烤咧,我...
    開封第一講書人閱讀 38,917評(píng)論 0 274
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎抢呆,沒想到半個(gè)月后煮嫌,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,329評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡抱虐,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,543評(píng)論 2 332
  • 正文 我和宋清朗相戀三年昌阿,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片恳邀。...
    茶點(diǎn)故事閱讀 39,722評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡懦冰,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出谣沸,到底是詐尸還是另有隱情刷钢,我是刑警寧澤,帶...
    沈念sama閱讀 35,425評(píng)論 5 343
  • 正文 年R本政府宣布乳附,位于F島的核電站内地,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏赋除。R本人自食惡果不足惜阱缓,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,019評(píng)論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望举农。 院中可真熱鬧茬祷,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,671評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至沃粗,卻和暖如春粥惧,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背最盅。 一陣腳步聲響...
    開封第一講書人閱讀 32,825評(píng)論 1 269
  • 我被黑心中介騙來泰國打工突雪, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人涡贱。 一個(gè)月前我還...
    沈念sama閱讀 47,729評(píng)論 2 368
  • 正文 我出身青樓咏删,卻偏偏與公主長得像,于是被迫代替她去往敵國和親问词。 傳聞我的和親對(duì)象是個(gè)殘疾皇子督函,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,614評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容