JSON.stringify() 方法能將一個 JavaScript 物件或值轉換成一個 JSON 字串。

作為一名 JavaScript 開發人員，JSON.stringify() 是用於除錯的最常見函式。但是它的作用是什麼呢，難道我們不能使用 console.log() 來做同樣的事情嗎？讓我們試一試。

//初始化一個 user 物件 
  const user = { 
  "name" : "Prateek Singh","age" : 26 
  } 
  console.log(user); 
  // 結果 
  // [object Object] 

哦！console.log() 沒有幫助我們打印出期望的結果。它輸出 [object Object]，因為從物件到字串的預設轉換是 [object Object]。因此，我們使用 JSON.stringify() 首先將物件轉換成字串，然後在控制檯中列印，如下所示。

const user = { 
  "name" : "Prateek Singh","age" : 26 
 } 
 console.log(JSON.stringify(user)); 
 // 結果 
 // "{ "name" : "Prateek Singh","age" : 26 }" 

一般來說，開發人員使用 stringify 函式的場景較為普遍，就像我們在上面做的那樣。但我要告訴你一些隱藏的祕密，這些小祕密會讓你開發起來更加輕鬆。

第二個引數（陣列）

是的，stringify 函式也可以有第二個引數。它是要在控制檯中列印的物件的鍵陣列。看起來很簡單？讓我們更深入一點。我們有一個物件 product 並且我們想知道 product 的 name 屬性值。當我們將其打印出來：

console.log(JSON.stringify(product)); 

它會輸出下面的結果。

{"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",{"id":"5004","type":"Maple"}]}

在日誌中很難找到 name 鍵，因為控制檯上顯示了很多沒用的資訊。當物件變大時，查詢屬性的難度增加。stringify 函式的第二個引數這時就有用了。讓我們重寫程式碼並檢視結果。

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

問題解決了，與列印整個 JSON 物件不同，我們可以在第二個引數中將所需的鍵作為陣列傳遞，從而只打印所需的屬性。

第二個引數（函式）

我們還可以傳入函式作為第二個引數。它根據函式中寫入的邏輯來計算每個鍵值對。如果返回 undefined，則不會列印鍵值對。請參考示例以獲得更好的理解。

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

// 結果
{ "age" : 26 }

只有 age 被打印出來，因為函式判斷 typeOf 為 String 的值返回 undefined。

第三個引數為數字

第三個引數控制最後一個字串的間距。如果引數是一個數字，則字串化中的每個級別都將縮排這個數量的空格字元。

// 注意：為了達到理解的目的，使用 '--' 替代了空格 
 JSON.stringify(user,null,2); 
 //{ 
 //--"name": "Prateek Singh",//--"age": 26,//--"country": "India" 
 //} 

第三個引數為字串

如果第三個引數是 string，那麼將使用它來代替上面顯示的空格字元。

JSON.stringify(user,'**'); 
//{ 
//**"name": "Prateek Singh",//**"age": 26,//**"country": "India" 
//} 
// 這裡 * 取代了空格字元 

toJSON 方法

我們有一個叫 toJSON 的方法，它可以作為任意物件的屬性。JSON.stringify 返回這個函式的結果並對其進行序列化，而不是將整個物件轉換為字串。參考下面的例子。

const user = { 
 firstName : "Prateek",lastName : "Singh",age : 26,toJSON() { 
   return {  
    fullName: `${this.firstName} + ${this.lastName}` 
   }; 
 } 
 } 
 console.log(JSON.stringify(user)); 
 // 結果 
 // "{ "fullName" : "Prateek Singh"}" 

這裡我們可以看到，它只打印 toJSON 函式的結果，而不是列印整個物件。

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

到此這篇關於詳解JSON.stringify()的5個祕密特性的文章就介紹到這了,更多相關JSON.stringify()特性內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！