這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)JSON.stringify()的特性有哪些,文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
成都創(chuàng)新互聯(lián)自2013年起,先為桃源等服務(wù)建站,桃源等地企業(yè),進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為桃源企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
JSON.stringify() 方法能將一個(gè) JavaScript 對(duì)象或值轉(zhuǎn)換成一個(gè) JSON 字符串。
作為一名 JavaScript 開發(fā)人員,JSON.stringify() 是用于調(diào)試的最常見函數(shù)。但是它的作用是什么呢,難道我們不能使用 console.log() 來做同樣的事情嗎?讓我們?cè)囈辉嚒?nbsp;
//初始化一個(gè) user 對(duì)象 const user = { "name" : "Prateek Singh", "age" : 26 } console.log(user); // 結(jié)果 // [object Object]
哦!console.log() 沒有幫助我們打印出期望的結(jié)果。它輸出 [object Object],因?yàn)閺膶?duì)象到字符串的默認(rèn)轉(zhuǎn)換是 [object Object]。因此,我們使用 JSON.stringify() 首先將對(duì)象轉(zhuǎn)換成字符串,然后在控制臺(tái)中打印,如下所示。
const user = { "name" : "Prateek Singh", "age" : 26 } console.log(JSON.stringify(user)); // 結(jié)果 // "{ "name" : "Prateek Singh", "age" : 26 }"
一般來說,開發(fā)人員使用 stringify 函數(shù)的場(chǎng)景較為普遍,就像我們?cè)谏厦孀龅哪菢?。但我要告訴你一些隱藏的秘密,這些小秘密會(huì)讓你開發(fā)起來更加輕松。
第二個(gè)參數(shù)(數(shù)組)
是的,stringify 函數(shù)也可以有第二個(gè)參數(shù)。它是要在控制臺(tái)中打印的對(duì)象的鍵數(shù)組??雌饋砗芎?jiǎn)單?讓我們更深入一點(diǎn)。我們有一個(gè)對(duì)象 product 并且我們想知道 product 的 name 屬性值。當(dāng)我們將其打印出來:
console.log(JSON.stringify(product));
它會(huì)輸出下面的結(jié)果。
{"id":"0001","type":"donut","name":"Cake","ppu":0.55,"batters":{"batter":[{"id":"1001","type":"Regular"},{"id":"1002","type":"Chocolate"},{"id":"1003","type":"Blueberry"},{"id":"1004","type":"Devil’s Food"}]},"topping":[{"id":"5001","type":"None"},{"id":"5002","type":"Glazed"},{"id":"5005","type":"Sugar"},{"id":"5007","type":"Powdered Sugar"},{"id":"5006","type":"Chocolate with Sprinkles"},{"id":"5003","type":"Chocolate"},{"id":"5004","type":"Maple"}]}
在日志中很難找到 name 鍵,因?yàn)榭刂婆_(tái)上顯示了很多沒用的信息。當(dāng)對(duì)象變大時(shí),查找屬性的難度增加。stringify 函數(shù)的第二個(gè)參數(shù)這時(shí)就有用了。讓我們重寫代碼并查看結(jié)果。
console.log(JSON.stringify(product,['name' ]); // 結(jié)果 {"name" : "Cake"}
問題解決了,與打印整個(gè) JSON 對(duì)象不同,我們可以在第二個(gè)參數(shù)中將所需的鍵作為數(shù)組傳遞,從而只打印所需的屬性。
第二個(gè)參數(shù)(函數(shù))
我們還可以傳入函數(shù)作為第二個(gè)參數(shù)。它根據(jù)函數(shù)中寫入的邏輯來計(jì)算每個(gè)鍵值對(duì)。如果返回 undefined,則不會(huì)打印鍵值對(duì)。請(qǐng)參考示例以獲得更好的理解。
const user = { "name" : "Prateek Singh", "age" : 26 }
// 結(jié)果 { "age" : 26 }
只有 age 被打印出來,因?yàn)楹瘮?shù)判斷 typeOf 為 String 的值返回 undefined。
第三個(gè)參數(shù)為數(shù)字
第三個(gè)參數(shù)控制最后一個(gè)字符串的間距。如果參數(shù)是一個(gè)數(shù)字,則字符串化中的每個(gè)級(jí)別都將縮進(jìn)這個(gè)數(shù)量的空格字符。
// 注意:為了達(dá)到理解的目的,使用 '--' 替代了空格 JSON.stringify(user, null, 2); //{ //--"name": "Prateek Singh", //--"age": 26, //--"country": "India" //}
第三個(gè)參數(shù)為字符串
如果第三個(gè)參數(shù)是 string,那么將使用它來代替上面顯示的空格字符。
JSON.stringify(user, null,'**'); //{ //**"name": "Prateek Singh", //**"age": 26, //**"country": "India" //} // 這里 * 取代了空格字符
toJSON 方法
我們有一個(gè)叫 toJSON 的方法,它可以作為任意對(duì)象的屬性。JSON.stringify 返回這個(gè)函數(shù)的結(jié)果并對(duì)其進(jìn)行序列化,而不是將整個(gè)對(duì)象轉(zhuǎn)換為字符串。參考下面的例子。
const user = { firstName : "Prateek", lastName : "Singh", age : 26, toJSON() { return { fullName: `${this.firstName} + ${this.lastName}` }; } } console.log(JSON.stringify(user)); // 結(jié)果 // "{ "fullName" : "Prateek Singh"}"
上述就是小編為大家分享的JSON.stringify()的特性有哪些了,如果剛好有類似的疑惑,不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。