你不知道的冷知識：JSON.stringify 居然還能這樣用？

• 2019 年 11 月 25 日
• 筆記

JSON.stringify() 這個 API 想必大家都用過，可以幫助我們將數據解析成字符串類型，如下是個例子：

const obj = {    name: 'foo',    level: 'low',    age: '100',    money: 'empty'  }  JSON.stringify(obj)  // "{"name":"foo","level":"low","age":"100","money":"empty"}"

想必這樣的寫法大家都知道，但是其實 JSON.stringify 總共接受三個參數。

第二個參數可以傳入一個數組或者函數。

我們先來看看傳入數組的話結果會是什麼？

JSON.stringify(obj, ['name', 'age'])  // "{"name":"foo","age":"100"}"

當我們傳入數組時候，只有數組內的屬性名才會被正常序列化。

那麼當第二個參數傳入函數會發生什麼呢？

const obj1 = { name: new Set([1]) }  JSON.stringify(obj1, (key, value) => {    return value instanceof Set ? [...value] : value  })  // 正常序列化是 "{"name":{}}"  // 例子中的輸出為 "{"name":[1]}"

我們都知道 JSON.stringify 是不能處理某些值的，就比如例子中的 Set 類型的值就不能正常序列化。但是其實我們可以通過傳入函數的方式幫助我們將 Set 類型的值轉換為數組類型，從而使得數據能夠被正常序列化。

第三個參數可以傳入數字或者字符串類型，該參數用於美化輸出。正常來說輸出的結果都是一行文本，在數據量小的時候閱讀起來沒啥壓力，但是當數據量龐大的時候就會增加閱讀難度。這個參數在這種時候就能幫助到我們。

JSON.stringify(obj, null, 2)  // "{  //   "name": "foo",  //   "level": "low",  //   "age": "100",  //   "money": "empty"  // }"

當傳入數字時，每個屬性都會換行並且帶有縮進空格。

JSON.stringify(obj, null, '?')  // "{  // ?"name": "foo",  // ?"level": "low",  // ?"age": "100",  // ?"money": "empty"  //}"

當傳入字符串時，每個屬性照樣都會換行並且在開頭加上你傳入的字符串。

以上就是本篇文章的內容了，雖然這單純屬於 API 範疇的知識，但是我相信很多人應該並不知道 JSON.stringify 還擁有這樣的能力。