前言

在以前的web開發中，我們多數選擇純文字或XML作為我們的提交的資料格式，大多數是XML，少數純文字。其實從AJAX(Asynchronous JavaScript and XML)的命名我們也知道，資料交換是大多數通過XML格式進行的。但是XML格式有一個缺點，就是文件構造複雜，需要傳輸比較多的位元組數，並且解析起來也比較麻煩。所以就建立了JSON這種資料描述格式，可以很簡單的就描述很複雜的資料。同時獨立於語言，這樣就可以在多種語言內使用。也正是因為這個，JSON的輕便性逐漸得到重視，後來替代XML成為最主要的資料傳輸格式。

ps: 當然，雖然說了很多JSON的好處，你就以為不用學習XML

了嗎？肯定不是啦，微信公共平臺介面中的有是有相當一部分介面使用了XML的。

JSON物件包含兩個方法: 用於解析 JavaScript Object Notation (JSON) 的 parse() 方法，以及將物件/值轉換為 JSON 字串的 stringify() 方法。除了這兩個方法, JSON 這個物件本身並沒有其他作用，也不能被呼叫或者作為建構函式呼叫。

ps: JSON：並不是 JavaScript 的子集。儘管不是嚴格意義上的子集，JSON 非常接近 JavaScript 語法的子集。

JavaScript 與 JSON 的區別

針對於這兩點，我們舉個例子，對於物件和陣列型別：

// 屬性名稱必須是雙引號括起來的字串
const test1 = "['1','1']"
JSON.parse(test1) // Uncaught SyntaxError: Unexpected token ' in JSON at position 1

const test2 = "{'name':'gating'}"
JSON.parse(test2) // Uncaught SyntaxError: Unexpected token o in JSON at position 1

const test3 = '["2","1"]'
JSON.parse(test3) // ["2","1"]

const test4 = '{"name":"gating"}'
JSON.parse(test3) // {name: "gating"}

// 最後一個屬性後不能有逗號
const test5 = '["2","1",]'
JSON.parse(test5) // Uncaught SyntaxError: Unexpected token ] in JSON at position 9
const test6 = '{"name":"gating",}'
JSON.parse(test6) // Uncaught SyntaxError: Unexpected token } in JSON at position 17
 

對於數值型別：

// 禁止出現前導零
const test7 = [00010, 1]
JSON.stringify(test7) // "[8,1]"

const test8 = "[00010, 1]"
JSON.parse(test8) // SyntaxError: Unexpected number in JSON at position 2**

// 如果有小數點，則後面至少跟著一位數字。
const test9 = [1, 1.]
JSON.stringify(test9) // "[1,1]"

const test10 = "[1, 1.]"
JSON.parse(test10) // Uncaught SyntaxError: Unexpected token ] in JSON at position 6

ps: 0+數字表示8進位制，- -所以上面打印出來的是8，同樣的有：0b+數字(二進位制)、0x+數字(16進位制)，其實0o+數字也可以表示8進位制

其實還有一個字串型別，JavaScript和JSON處理是不一致的，這裡為啥我只寫兩點呢？是因為還有現在在新版的Chrome已經可以解析正常，但是想具體可以檢視下面參考連結自行了解，這裡就不展開了

參考：JavaScript 與 JSON 的區別，字串那一點我在Chrome 85.0.4183.83以及可以正常解析

stringify

stringify() 方法用於將JavaScript值轉換為JSON字串。

雖然我們經常用這個方法，但我想估計有不少人不知道它居然有三個引數之多吧？分別是value、replacer、space。

JSON.stringify(value[, replacer [, space]])

• value
  • 將要序列化成 一個 JSON 字串的值。
• replacer 可選
  • 如果該引數是一個函式，則在序列化過程中，被序列化的值的每個屬性都會經過該函式的轉換和處理；如果該引數是一個陣列，則只有包含在這個陣列中的屬性名才會被序列化到最終的 JSON 字串中；如果該引數為 null 或者未提供，則物件所有的屬性都會被序列化。
• space 可選
  • 指定縮排用的空白字串，用於美化輸出（pretty-print）；如果引數是個數字，它代表有多少的空格；上限為10。該值若小於1，則意味著沒有空格；如果該引數為字串（當字串長度超過10個字母，取其前10個字母），該字串將被作為空格；如果該引數沒有提供（或者為 null），將沒有空格。

value引數

通常我們最常用的就是第一個引數，也就是value引數，但是你知道它的運算規則是怎麼樣的嗎？閒話不多說，直接上例子

NaN 和 Infinity 格式的數值及 null 都會被當做 null

JSON.stringify([NaN, Infinity, null]) // [null,null,null]

undefined、任意的函式以及 symbol 值的處理

出現在非陣列物件的屬性值中時，在序列化過程中會被忽略

JSON.stringify({x: undefined, y: Object, z: Symbol("")}) // "{}"

出現在陣列中時被轉換成null

JSON.stringify([undefined, Object, Symbol("")])  // "[null,null,null]"

單獨出現則會返回undefined

JSON.stringify(undefined)  // undefined
JSON.stringify(Object)  // undefined
JSON.stringify(Symbol(""))  // undefined

所有以 symbol 為屬性鍵的屬性都會被完全忽略掉，即便 replacer 引數中強制指定包含了它們。

JSON.stringify({[Symbol("foo")]: "foo"}) // "{}"
JSON.stringify({[Symbol.for("foo")]: "foo"}, [Symbol.for("foo")]) // "{}"

轉換值如果有 toJSON() 方法，該方法定義什麼值將被序列化。

JSON.stringify({
  toJSON: function() {
    return 'gating'
  }
}) // "gating"

const name = {
  age: 18,
  toJSON: function () {
    return 'gating'
  },
}
JSON.stringify({ name }) // {"name":"gating"}

又因為Date物件上掛載了一個toJSON方法，所以針對於Date型別，它預設就會呼叫Date型別上的toJSON方法(同Date.toISOString())

JSON.stringify(new Date("2020/01/01")) // "2019-12-31T16:00:00.000Z" 因為中國在東八區，所以相差了8小時

ps: 東八區（UTC/GMT+08:00）是比世界協調時間（UTC）/格林尼治時間（GMT）快8小時的時區

其他型別的物件，僅會序列化物件可列舉的屬性，包括 Map/Set/WeakMap/WeakSet

JSON.stringify(
  Object.create(null, {
    x: { value: 'x'}, // enumerable 預設為不可列舉
    y: { value: 'y', enumerable: true },
  })
) // "{"y":"y"}"

const map = new Map()
Object.defineProperty(map, 'name', {
  value: 'gating',
  enumerable: true
})
Object.defineProperty(map, 'age', {
  value: 18
})
JSON.stringify(map) // {"name":"gating"}
JSON.stringify(new Set) // {}
JSON.stringify(new RegExp) // {}

看到這裡，你基本已經知道運算規則是怎麼樣滴了，也就知道了為什麼JSON.stringify + JSON.parse不能轉換函式、正則、Error等物件了吧？

那麼接下來就要了解下更有意思的東西啦，就是stringify第二個引數replacer啦

replacer引數

replacer 引數可以用來來更改預設的字串化的行為。它可以是一個函式或者一個數組。如果該引數為 null 或者未提供，則物件所有的屬性都會被序列化。

作為函式

在開始時, replacer 函式會被傳入一個空字串作為 key 值，代表著要被 stringify 的這個物件。隨後每個物件或陣列上的屬性會被依次傳入。

這句話看不太懂？不要緊，舉個例子你就懂了

function replacer(key, value) {
  console.log('[' + key + ']:' + value)
  return value
}

JSON.stringify({ name: 'gating', age: 18 }, replacer)
// []:[object Object]
// [name]:gating
// [age]:18

上面例子中，他會執行三次，也就是一開始他會預設傳一個空字串作為鍵，而鍵值是整個物件；第二次鍵為name，鍵值為gating，以此類推。

當然，這裡也有個特別需要注意的點，就是返回的是一個物件的時候，該物件遞迴地序列化成 JSON 字串，對每個屬性呼叫replacer方法。除非該物件是一個函式，這種情況將不會被序列化成 JSON 字串。

比如：

function replacer(key, value) {
  return {a:1}
}
JSON.stringify({}, replacer)

因為我們每次返回的都是物件，那麼每次都會呼叫replacer，所以會造成堆疊溢位，那麼我們舉個不會溢位的小栗子例子吧