自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

JSON.stringify()的5個秘密特性

開發(fā) 前端
JSON.stringify()是JavaScript開發(fā)人員最常用來調(diào)試的函數(shù)。但為什么用它呢,難道console.log()不能用來做同樣的事情嗎?不妨試試看。

 [[320249]]

JSON.stringify()是JavaScript開發(fā)人員最常用來調(diào)試的函數(shù)。但為什么用它呢,難道console.log()不能用來做同樣的事情嗎?不妨試試看。

 

  1. //Initialize a User object 
  2. const user = { 
  3.  “name” : “Prateek Singh”, 
  4.  “age” : 26 
  5. }console.log(user);RESULT 
  6. // [object Object] 

看!console.log()沒有輸出我們想要的結(jié)果。它輸出了[object Object],因為從對象到字符串的默認(rèn)轉(zhuǎn)換是“[objectObject]”。因此,我們使用JSON.stringify()先將對象轉(zhuǎn)換為字符串,然后把結(jié)果輸入console控制臺,如下所示。

  1. const user = { 
  2. name” : “Prateek Singh”, 
  3. “age” : 26 
  4. }console.log(JSON.stringify(user));RESULT 
  5. // "{ "name" : "Prateek Singh", "age" :26 }" 

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

1:第二個參數(shù)(數(shù)組)

是的,stringify 函數(shù)也可以有第二個參數(shù)。它是你在控制臺中輸入對象的鍵數(shù)組??雌饋砗唵伟?接下來仔細(xì)看看。我們有一個“產(chǎn)品”對象,并且想知道產(chǎn)品的名稱。當(dāng)我們輸入:

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

它會給出以下結(jié)果。

  1. {“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”}]} 

在記錄里很難找到名稱鍵,因為在控制臺顯示了很多無用的信息。當(dāng)對象變大時,困難也隨之增加。

stringify函數(shù)的第二個參數(shù)派上用場。不妨重寫代碼,看看結(jié)果如何。

  1. console.log(JSON.stringify(product,[‘name’]);//RESULT 
  2. {"name" : "Cake"

問題解決了,與輸出整個JSON對象不同,我們可以只輸出所需的鍵,通過在第二個參數(shù)中將其作為數(shù)組來傳遞。

2:第二個參數(shù)(函數(shù))

也可以將第二個參數(shù)作為函數(shù)來傳遞。它根據(jù)函數(shù)中寫入的邏輯計算每個鍵值對。如果返回未定義(undefined)的鍵值對就不會輸出。想要更好地理解,可以參考下面這個例子。

  1. const user = { 
  2.  “name” : “Prateek Singh”, 
  3.  “age” : 26 
  4.  
  5.   
  6. Passing function as 2nd argument 
  7. // Result 
  8. "age" : 26 } 

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

3:第三個參數(shù)是數(shù)字

第三個參數(shù)控制最終字符串里的間距。如果參數(shù)是一個數(shù)字,則字符串化中的每個級別,都將縮進(jìn)這個空格字符數(shù)。

  1. Note: '--' represnts the spacingfor understanding purposeJSON.stringify(usernull, 2); 
  2. //{ 
  3. //--"name": "Prateek Singh", 
  4. //--"age": 26, 
  5. //--"country": "India" 
  6. //} 

4:第三個參數(shù)是字符串

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

  1. JSON.stringify(usernull,'**'); 
  2. //{ 
  3. //**"name""Prateek Singh"
  4. //**"age": 26, 
  5. //**"country""India" 
  6. //} 
  7. Here * replace the space character

這里*替代空格字符。

5:toJSON函數(shù)

我們有一個名為toJSON的類函數(shù),它的屬性是可以作為任何對象的一部分。JSON.stringify返回這個函數(shù)的結(jié)果并對其進(jìn)行字符串化,而不是將全部對象轉(zhuǎn)換為字符串。看看下面的例子。

  1. const user = { 
  2. firstName : "Prateek"
  3. lastName : "Singh"
  4. age : 26, 
  5. toJSON() { 
  6.    return { 
  7.      fullName: `${this.firstName} +${this.lastName}` 
  8.    };}console.log(JSON.stringify(user));RESULT 
  9. // "{ "fullName" : "Prateek Singh"}" 

可以看到,它不是輸出全部對象,而是只有toJSON函數(shù)的結(jié)果。

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

 

責(zé)任編輯:華軒 來源: 今日頭條
相關(guān)推薦

2020-05-25 14:37:31

JSON.string前端秘密特性

2024-09-30 11:08:18

JSON局限性數(shù)據(jù)

2021-12-11 18:59:35

JavascriptJSON應(yīng)用

2021-05-06 05:30:33

JSONstringify()parse()

2022-12-05 14:50:53

2021-12-22 09:08:39

JSON.stringJavaScript字符串

2019-06-11 15:25:03

JSON性能前端

2022-08-31 22:50:13

JavaScript函數(shù)JSON

2023-01-17 16:25:18

前端開發(fā)JSON

2024-03-25 00:10:00

JSON后端開發(fā)

2025-04-21 10:43:21

2011-10-19 16:19:27

iOS 5蘋果

2015-06-11 09:55:49

程序員代碼

2011-08-17 10:04:13

vSphere 5虛擬化

2020-10-09 11:02:46

HTML5 特性

2022-03-10 09:11:33

JavaScrip開發(fā)JSON

2018-05-18 15:05:25

JavaJava 10新特性

2019-12-05 12:11:37

DevOps開發(fā)應(yīng)用程序

2024-05-08 08:32:25

架構(gòu)

2019-12-29 23:40:38

Python編程語言代碼
點贊
收藏

51CTO技術(shù)棧公眾號