隱藏實(shí)力的 JSON.stringify虫碉,原來(lái)還可以這么用贾惦!

JSON

JavaScript 有許多各司其職的函數(shù)。我們每天都在用敦捧,但不知道他們的額外功能须板。直到有一天看了文檔之后才發(fā)現(xiàn),它們?cè)瓉?lái)有許多超出我們想象的功能兢卵。JSON.stringify 就是其中一個(gè)习瑰。今天我們就來(lái)聊聊這個(gè)隱藏實(shí)力的選手。

基本用法

JSON.stringify 方法接受一個(gè)參數(shù)并將其轉(zhuǎn)換成JSON 字符串形式秽荤。

const firstItem = { 
  title: 'Transformers', 
  year: 2007 
};

JSON.stringify(firstItem);
// {'title':'Transformers','year':2007}

當(dāng)出現(xiàn)一個(gè)不能序列化成 JSON 字符串的元素時(shí)就會(huì)出現(xiàn)問(wèn)題 甜奄。

const secondItem = { 
  title: 'Transformers', 
  year: 2007, 
  starring: new Map([[0, 'Shia LaBeouf'],[1, 'Megan Fox']]) 
};

JSON.stringify(secondItem);
// {'title':'Transformers','year':2007,'starring':{}}

第二個(gè)參數(shù)

JSON.stringify 還有第二個(gè)參數(shù)柠横,叫替換器參數(shù)。

你可以傳一個(gè)字符串?dāng)?shù)組贺嫂,作為對(duì)象屬性白名單滓鸠,這些屬性將會(huì)包含在輸出結(jié)果里。

JSON.stringify(secondItem, ['title']);
// {'title':'Transformers'}

我們可以篩掉一些不想要的值第喳。這些值要么太大(比如 Error 對(duì)象)糜俗,要么無(wú)法轉(zhuǎn)成可讀的JSON形式。

替換器參數(shù)也可以是一個(gè)函數(shù)曲饱。該函數(shù)接受 JSON.stringify 方法遍歷對(duì)象時(shí)當(dāng)前的屬性和值作為參數(shù)悠抹。如果函數(shù)不返回任何值或者返回 undefined,當(dāng)前節(jié)點(diǎn)就不會(huì)出現(xiàn)在結(jié)果里扩淀。

JSON.stringify(secondItem, (key, value) => {
  if (value instanceof Set) {
    return [...value.values()];
  }
  return value;
});
// {'title':'Transformers','year':2007,'starring':['Shia LaBeouf','Megan Fox']}

通過(guò)讓函數(shù)返回 undefined楔敌,可以在結(jié)果里刪除這些屬性。

JSON.stringify(secondItem, (key, value) => {
  if (typeof value === 'string') {
    return undefined;
  }
  return value;
});
// {"year":2007,"starring":{}}

第二個(gè)參數(shù)還可以用來(lái)創(chuàng)建簡(jiǎn)單的對(duì)象哈希函數(shù)驻谆。但有一點(diǎn)要注意卵凑,JSON.stringify(obj)不能保證屬性的輸出順序,當(dāng)序列化的結(jié)果用于哈希/校驗(yàn)和的時(shí)胜臊,這點(diǎn)至關(guān)重要勺卢。為此,我們可以把第二個(gè)參數(shù)設(shè)置為Object.keys(obj).sort()象对,對(duì)象將會(huì)以這個(gè)順序序列化黑忱。

function objectHash(obj: object): string {
  const str = JSON.stringify(obj, Object.keys(obj).sort());
  return createHash('sha1').update(str).digest('hex');
}

第三個(gè)參數(shù)。

第三個(gè)參數(shù)設(shè)置最終字符串里的空白縮進(jìn)勒魔。如果參數(shù)是一個(gè)數(shù)字甫煞,那么序列化的每個(gè)層級(jí)都會(huì)用這個(gè)數(shù)量的空格符縮進(jìn)。

JSON.stringify(secondItem, null, 2);
//{
//  "title": "Transformers",
//  "year": 2007,
//  "starring": {}
//}

如果第三個(gè)參數(shù)是字符串冠绢,就會(huì)替代空格符抚吠。

JSON.stringify(secondItem, null, '??');
//{
//??"title": "Transformers",
//??"year": 2007,
//??"starring": {}
//}

toJSON 方法

如果我們序列化的對(duì)象有一個(gè)toJSON方法,它將會(huì)采用自定義的序列化過(guò)程弟胀。你可以在方法里返回一個(gè)新的值埃跷,這個(gè)值將會(huì)替換原始對(duì)象被序列化。

const thirdItem = { 
  title: 'Transformers', 
  year: 2007, 
  starring: new Map([[0, 'Shia LaBeouf'],[1, 'Megan Fox']]),
  toJSON() {
    return { 
      name: `${this.title} (${this.year})`, 
      actors: [...this.starring.values()] 
    };
  }
};

console.log(JSON.stringify(thirdItem));
// {"name":"Transformers (2007)","actors":["Shia LaBeouf","Megan Fox"]}

最后

查看我們?nèi)粘J褂玫暮瘮?shù)的文檔邮利,有時(shí)候會(huì)有不少收獲±В可能會(huì)有驚喜延届,我們也能學(xué)到不少東西。保持對(duì)知識(shí)的渴求贸诚,經(jīng)常讀讀文檔吧方庭!

交流

歡迎關(guān)注微信公眾號(hào)“1024譯站”厕吉,為你奉上更多技術(shù)干貨。


公眾號(hào):1024譯站
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末械念,一起剝皮案震驚了整個(gè)濱河市头朱,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌龄减,老刑警劉巖项钮,帶你破解...
    沈念sama閱讀 216,402評(píng)論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異希停,居然都是意外死亡烁巫,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門宠能,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)亚隙,“玉大人,你說(shuō)我怎么就攤上這事违崇“⑵” “怎么了?”我有些...
    開封第一講書人閱讀 162,483評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵羞延,是天一觀的道長(zhǎng)渣淳。 經(jīng)常有香客問(wèn)我,道長(zhǎng)肴楷,這世上最難降的妖魔是什么水由? 我笑而不...
    開封第一講書人閱讀 58,165評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮赛蔫,結(jié)果婚禮上砂客,老公的妹妹穿的比我還像新娘。我一直安慰自己呵恢,他們只是感情好鞠值,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,176評(píng)論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著渗钉,像睡著了一般彤恶。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上鳄橘,一...
    開封第一講書人閱讀 51,146評(píng)論 1 297
  • 那天声离,我揣著相機(jī)與錄音,去河邊找鬼瘫怜。 笑死术徊,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的鲸湃。 我是一名探鬼主播赠涮,決...
    沈念sama閱讀 40,032評(píng)論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼子寓,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了笋除?” 一聲冷哼從身側(cè)響起斜友,我...
    開封第一講書人閱讀 38,896評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎垃它,沒(méi)想到半個(gè)月后鲜屏,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,311評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡嗤瞎,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,536評(píng)論 2 332
  • 正文 我和宋清朗相戀三年墙歪,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片贝奇。...
    茶點(diǎn)故事閱讀 39,696評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡虹菲,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出掉瞳,到底是詐尸還是另有隱情毕源,我是刑警寧澤,帶...
    沈念sama閱讀 35,413評(píng)論 5 343
  • 正文 年R本政府宣布陕习,位于F島的核電站霎褐,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏该镣。R本人自食惡果不足惜冻璃,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,008評(píng)論 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望损合。 院中可真熱鬧省艳,春花似錦、人聲如沸嫁审。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)律适。三九已至辐烂,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間捂贿,已是汗流浹背纠修。 一陣腳步聲響...
    開封第一講書人閱讀 32,815評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留厂僧,地道東北人分瘾。 一個(gè)月前我還...
    沈念sama閱讀 47,698評(píng)論 2 368
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親德召。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,592評(píng)論 2 353

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

  • https://www.ctolib.com/topics-141914.htmlhttps://github.c...
    videring閱讀 652評(píng)論 0 0
  • ??曾經(jīng)有一段時(shí)間,XML 是互聯(lián)網(wǎng)上傳輸數(shù)據(jù)化結(jié)構(gòu)的事實(shí)標(biāo)準(zhǔn)蕴坪。Web 服務(wù)的第一次浪潮很大程度上都是建立在 XM...
    霜天曉閱讀 364評(píng)論 0 1
  • 概要 64學(xué)時(shí) 3.5學(xué)分 章節(jié)安排 電子商務(wù)網(wǎng)站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,182評(píng)論 0 3
  • 序言 最近在看《你所不知道的javascript》[中卷]一書肴掷,第一部分是類型和語(yǔ)法。本文是基于這部分的產(chǎn)物背传。在強(qiáng)...
    零之彼岸閱讀 716評(píng)論 0 4
  • 引言 曾經(jīng)有一段時(shí)間呆瞻,XML是互聯(lián)網(wǎng)上傳輸結(jié)構(gòu)化數(shù)據(jù)的事實(shí)標(biāo)準(zhǔn)。Web服務(wù)的第一次浪潮很大程度上都是建立在XML之...
    DHFE閱讀 626評(píng)論 0 0