​JSON.stringify()的5個祕密特性

全文共2570字，預計學習時長8分鐘

JSON.stringify()是JavaScript開發人員最常用來調試的函數。但為什麼用它呢，難道console.log()不能用來做同樣的事情嗎？不妨試試看。

<code>//Initialize a User object
const user = {
 “name” : “Prateek Singh”,
 “age” : 26
}console.log(user);RESULT
// [object Object]/<code>

看！console.log()沒有輸出我們想要的結果。它輸出了[object Object]，因為從對象到字符串的默認轉換是“[objectObject]”。因此，我們使用JSON.stringify()先將對象轉換為字符串，然後把結果輸入console控制檯，如下所示。

<code>const user = {
“name” : “Prateek Singh”,
“age” : 26
}console.log(JSON.stringify(user));RESULT
// "{ "name" : "Prateek Singh", "age" :26 }"/<code>

通常，開發人員使用這個stringify函數的方式很簡單，像上面那樣操作就可以。但是接下來所展示的它隱藏的秘密，可以讓你的生活變得輕鬆。

1:第二個參數(數組)

是的，stringify 函數也可以有第二個參數。它是你在控制檯中輸入對象的鍵數組。看起來簡單吧？接下來仔細看看。我們有一個“產品”對象，並且想知道產品的名稱。當我們輸入:

<code>console.log(JSON.stringify(product));/<code>

它會給出以下結果。

<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’sFood”}]},”topping”:[{“id”:”5001",”type”:”None”},{“id”:”5002",”type”:”Glazed”},{“id”:”5005",”type”:”Sugar”},{“id”:”5007",”type”:”PowderedSugar”},{“id”:”5006",”type”:”Chocolate withSprinkles”},{“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
}

 
Passing function as 2nd argument
// Result
{ "age" : 26 }/<code>

只有age被輸出，typeOf字符串的值會因為功能條件返回undefined。

3:第三個參數是數字

第三個參數控制最終字符串裡的間距。如果參數是一個數字，則字符串化中的每個級別，都將縮進這個空格字符數。

<code>Note: '--' represnts the spacingfor understanding purposeJSON.stringify(user, null, 2);
//{
//--"name": "Prateek Singh",
//--"age": 26,
//--"country": "India"
//}/<code>

4:第三個參數是字符串

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

<code>JSON.stringify(user, null,'**');
//{
//**"name": "Prateek Singh",
//**"age": 26,
//**"country": "India"
//}
Here * replace the space character./<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函數的結果。

希望你能從stringify()身上學到知識。

閱讀更多 讀芯術 的文章

關鍵字: JavaScript 輸出 中將