JSON.stringify()的詳細(xì)解析

這篇文章主要講解了JSON.stringify()的詳細(xì)解析，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。

JSON.stringify() 方法能將一個(gè) JavaScript 對(duì)象或值轉(zhuǎn)換成一個(gè) JSON 字符串。

作為一名 JavaScript 開(kāi)發(fā)人員，JSON.stringify() 是用于調(diào)試的最常見(jiàn)函數(shù)。但是它的作用是什么呢，難道我們不能使用 console.log() 來(lái)做同樣的事情嗎？讓我們?cè)囈辉嚒?/p>

//初始化一個(gè) user 對(duì)象 
  const user = { 
  "name" : "Prateek Singh", 
  "age" : 26 
  } 
  console.log(user); 
  // 結(jié)果 
  // [object Object] 

哦！console.log() 沒(méi)有幫助我們打印出期望的結(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 }" 

一般來(lái)說(shuō)，開(kāi)發(fā)人員使用 stringify 函數(shù)的場(chǎng)景較為普遍，就像我們?cè)谏厦孀龅哪菢印５乙嬖V你一些隱藏的秘密，這些小秘密會(huì)讓你開(kāi)發(fā)起來(lái)更加輕松。

第二個(gè)參數(shù)（數(shù)組）

是的，stringify 函數(shù)也可以有第二個(gè)參數(shù)。它是要在控制臺(tái)中打印的對(duì)象的鍵數(shù)組?？雌饋?lái)很簡(jiǎn)單？讓我們更深入一點(diǎn)。我們有一個(gè)對(duì)象 product 并且我們想知道 product 的 name 屬性值。當(dāng)我們將其打印出來(lái)：

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)上顯示了很多沒(méi)用的信息。當(dāng)對(duì)象變大時(shí)，查找屬性的難度增加。stringify 函數(shù)的第二個(gè)參數(shù)這時(shí)就有用了。讓我們重寫代碼并查看結(jié)果。

console.log(JSON.stringify(product,['name' ]); 
  // 結(jié)果 
  {"name" : "Cake"} 

問(wèn)題解決了，與打印整個(gè) JSON 對(duì)象不同，我們可以在第二個(gè)參數(shù)中將所需的鍵作為數(shù)組傳遞，從而只打印所需的屬性。

第二個(gè)參數(shù)（函數(shù)）

我們還可以傳入函數(shù)作為第二個(gè)參數(shù)。它根據(jù)函數(shù)中寫入的邏輯來(lái)計(jì)算每個(gè)鍵值對(duì)。如果返回 undefined，則不會(huì)打印鍵值對(duì)。請(qǐng)參考示例以獲得更好的理解。

const user = { 
  "name" : "Prateek Singh", 
  "age" : 26 
 } 

// 結(jié)果 
  { "age" : 26 }

只有 age 被打印出來(lái)，因?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，那么將使用它來(lái)代替上面顯示的空格字符。

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"}" 

這里我們可以看到，它只打印 toJSON 函數(shù)的結(jié)果，而不是打印整個(gè)對(duì)象。

我希望你能學(xué)到 stringify() 的一些基本特征。

看完上述內(nèi)容，是不是對(duì)JSON.stringify()的詳細(xì)解析有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。