02.19 JSON.stringify方法的5個祕密功能

JSON.stringify()方法將JavaScript對象或值轉換為JSON字符串。

作為JavaScript開發人員，JSON.stringify()是用於調試的最常用功能。但是，這有什麼用，難道我們不能單獨使用console.log()嗎？那就試一把看看。

<code>const user = {
 “name” : “Prateek Singh”,
 “age” : 26
}

console.log(user);

結果：
// [object Object]/<code>

有些版本的瀏覽器不會進行格式化打印。最新Chrome打印出來很友好。

糟糕！ console.log()不能幫助我們打印所需的結果。它打印[object Object]，因為從對象到字符串的默認轉換是"[object Object]"。因此，我們使用JSON.stringify()首先將對象轉換為字符串，然後像這樣在控制檯中進行打印。

<code>const user = {
 “name” : “Prateek Singh”,
 “age” : 26
}

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

RESULT
// "{ "name" : "Prateek Singh", "age" : 26 }"/<code>

通常，開發人員像上面一樣以簡單的方式使用stringify函數。但是我要告訴你一些更簡單實用的秘密技巧。

1：第二個參數（數組）

是的，我們的stringify函數也可以有第二個參數。它是您要在控制檯中打印的對象的鍵的數組。看起來簡單嗎？讓我們仔細看看。我們有一個對象產品，我們想知道產品的名稱。當我們將其打印為：

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

它給出以下結果。

<code>{“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”}]}/<code>

由於控制檯上顯示了大量無用的信息，因此很難在日誌中找到名稱鍵。當對象內容變大時，難度增加。

stringify函數的第二個參數就要派上用場了。讓我們再次重寫代碼並查看結果。

<code>console.log(JSON.stringify(product,['name']);

//RESULT
{"name" : "Cake"}/<code>

解決了問題，而不是打印整個JSON對象，我們可以通過將所需的鍵作為數組傳遞給第二個參數來僅打印所需的鍵。

2：第二個參數（函數）

我們還可以將第二個參數作為函數傳遞。它根據函數中編寫的邏輯來過濾每個鍵值對。如果返回undefined，則將不會顯示該鍵值對。示例如下

<code>const user = {
 “name” : “Prateek Singh”,
 “age” : 26
}/<code>

<code>// Result
{ "age" : 26 }/<code>

僅打印年齡，因為我們的函數參數，判斷條件返回的值typeOf String未定義。

3：第三個參數為Number

第三個參數控制最終字符串中的間距。如果參數是數字，則字符串化的每個層級都將以此數量的空格字符縮進。

<code>提示: '--' 表示空格, purposeJSON.stringify(user, null, 2);

//{
//--"name": "Prateek Singh",
//--"age": 26,
//--"country": "India"
//}/<code>

4：第三個參數為String

如果第三個參數是字符串，則將使用它代替上面顯示的空格字符。

<code>JSON.stringify(user, null,'**');

//{ 

//**"name": "Prateek Singh",
//**"age": 26,
//**"country": "India"
//}

這裡的 * 替代了空格/<code>

5：toJSON方法

我們有一個名為toJSON的方法，該方法可以作為任何對象的一部分，作為其屬性。 JSON.stringify返回此函數的結果並將其字符串化，而不是將整個對象轉換為字符串。請參閱此示例。

<code>const user = {
 firstName : "Prateek",
 lastName : "Singh",
 age : 26,
 toJSON() {
    return { 
       fullName: `${this.firstName} + ${this.lastName}`
    }
}

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

RESULT
// "{ "fullName" : "Prateek Singh"}"/<code>

在這裡，我們可以看到而不是打印整個對象，而是僅打印toJSON函數的結果。

閱讀更多 前端知否 的文章

關鍵字: 瀏覽器 JavaScript 功能