JS中有趣的內置對象-JSON

2020 年 9 月 8 日
筆記
javascript, 隨筆

前言

在以前的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 的區別

JavaScript類型	JSON 的不同點
對象和數組	屬性名稱必須是雙引號括起來的字元串；最後一個屬性後不能有逗號。
數值	禁止出現前導零（JSON.stringify 方法自動忽略前導零，而在 JSON.parse 方法中將會拋出 SyntaxError）；如果有小數點, 則後面至少跟著一位數字。

針對於這兩點，我們舉個例子，對於對象和數組類型：

// 屬性名稱必須是雙引號括起來的字元串
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，所以會造成堆棧溢出，那麼我們舉個不會溢出的小栗子例子吧🤣：

function replacer(key, value) {
  if(typeof value === 'object'){
    return { age: 9 }
  }
  return value * 2
}
const name = {}
JSON.stringify(name, replacer) // {"age":18}

在這裡，每一次處理的對象，都是前一次返回的值。因為我們replacer修改了name對象，接著就要遞歸replacer處理修改後的對象。

總結：遞歸處理中，每一次處理的對象，都是前一次返回的值。

function f(key, value){
  console.log(value)
  if (typeof value === "object"){
    return {b: 2};
  }
  return value*2;
}

JSON.stringify(o,f)

那麼，既然是更改默認的字元串化的行為，那麼我就嘗試下更改下吧

replacer——數字Double

function replacer(key, value) {
  if (typeof value === "number") {
    return value * 2;
  }
  return value;
}
const me = {
  name: 'gating',
  age: 9,
}
JSON.stringify(me, replacer) // {"name":"gating","age":18}

replacer——剔除不要的屬性

function replacer(key, value) {
  if (typeof value === "string") {
    return undefined;
  }
  return value;
}
const me = {
  name: 'gating',
  age: 18,
}
JSON.stringify(me, replacer) // {"age":18} 剔除了name屬性
JSON.stringify([1,"2"], replacer) // "[1,null]"

注意: 不能用 replacer 方法，從數組中移除值（values），如若返回 undefined 或者一個函數，將會被 null 取代(其實從 value 的運算規則我們也知道會出現這個結果了)。

作為數組

數組的值代表將被序列化成JSON字元串的屬性名

const me = {
  name: 'gating',
  age: 18,
}
JSON.stringify(me, ['name']) // {"name":"gating"} 只保留了name的屬性值
JSON.stringify(['a', 'b'], ['0']) // ['a', 'b']

這個類似白名單的數組，只對對象的屬性有效，對數組無效。

space參數

space 參數用來控制結果字元串裡面的間距，增加返回的 JSON 字元串的可讀性。如果是一個數字, 則在字元串化時每一級別會比上一級別縮進多這個數字值的空格（最多10個空格）；如果是一個字元串，則每一級別會比上一級別多縮進該字元串（或該字元串的前10個字元）。

使用數字

JSON.stringify({ name: "gating", age: 18 }, null, 6)
/*
"{
      "name": "gating",
      "age": 18
}"
*/

使用字元串

JSON.stringify({ name: "gating", age: 18 }, null, '|-')
/*
"{
|-"name": "gating",
|-"age": 18
}"
*/

使用製表符（\t）來縮進

因為最用用到要美化JSON的場景，所以順便把製表符也寫出來了 😊

就是提交的時候是json，返回的時候美化json顯示到輸入框內

JSON.stringify({ name: "gating", age: 18 }, null, '\t')
/*
"{
	"name": "gating",
	"age": 18
}"
*/

總結

JSON.stringify()將值轉換為相應的JSON格式：
- 轉換值如果有 toJSON() 方法，該方法定義什麼值將被序列化。
- 非數組對象的屬性不能保證以特定的順序出現在序列化後的字元串中。
- 布爾值、數字、字元串的包裝對象在序列化過程中會自動轉換成對應的原始值。
- undefined、任意的函數以及 symbol 值，在序列化過程中會被忽略（出現在非數組對象的屬性值中時）或者被轉換成 null（出現在數組中時）。函數、undefined 被單獨轉換時，會返回 undefined，如JSON.stringify(function(){}) or JSON.stringify(undefined).
- 對包含循環引用的對象（對象之間相互引用，形成無限循環）執行此方法，會拋出錯誤。
- 所有以 symbol 為屬性鍵的屬性都會被完全忽略掉，即便 replacer 參數中強制指定包含了它們。
- Date 日期調用了 toJSON() 將其轉換為了 string 字元串（同Date.toISOString()），因此會被當做字元串處理。
- NaN 和 Infinity 格式的數值及 null 都會被當做 null。
- 其他類型的對象，包括 Map/Set/WeakMap/WeakSet，僅會序列化可枚舉的屬性。

parse

parse() 方法用於將一個 JSON 字元串轉換為對象。

JSON.parse(text[, reviver])

text參數

text參數沒啥可說的，就是要被解析成 JavaScript 值的字元串，必須符合JSON的語法格式

JSON.parse('{}') // {}
// 如果傳入的字元串不是有效的 JSON 格式, JSON.parse方法將報錯。
JSON.parse("'String'") // Uncaught SyntaxError: Unexpected token ' in JSON at position 0

reviver參數

reviver參數和JSON.stringify方法的reviver參數類似，唯一不同的是如果有深層對象，他的遍歷順序依照：

從最內層開始，按照層級順序，依次向外遍歷，而JSON.stringify的遍歷順序剛好相反，從外向內

JSON.parse('{"1": 1, "2": 2,"3": {"4": 4, "5": {"6": 6}}}', function (k, v) {
    console.log(k); // 輸出當前的屬性名，從而得知遍歷順序是從內向外的，
                    // 最後一個屬性名會是個空字元串。
    return v;       // 返回原始屬性值，相當於沒有傳遞 reviver 參數。
}) // 1 2 4 6 5 3 ""

JSON.stringify({"1": 1, "2": 2,"3": {"4": 4, "5": {"6": 6}}}, function (k, v) {
    console.log(k); 
    return v;      
}) // "" 1 2 3 4 5 6

參考鏈接

最後

雖然本文羅嗦了點，但還是感謝各位觀眾老爺的能看到最後 O(∩_∩)O 希望你能有所收穫 😁

Tags: javascript 隨筆

JS中有趣的內置對象-JSON

前言

JavaScript 與 JSON 的區別

stringify

value參數

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

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

出現在非數組對象的屬性值中時，在序列化過程中會被忽略

出現在數組中時被轉換成null

單獨出現則會返回undefined

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

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

其他類型的對象，僅會序列化對象可枚舉的屬性，包括 Map/Set/WeakMap/WeakSet

replacer參數

作為函數

replacer——數字Double

replacer——剔除不要的屬性

作為數組

space參數

使用數字

使用字元串

使用製表符（\t）來縮進

總結

parse

text參數

reviver參數

參考鏈接

最後

VirMach 便宜 VPS

QNews

JS中有趣的內置對象-JSON

前言

JavaScript 與 JSON 的區別

stringify

value參數

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

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

出現在非數組對象的屬性值中時，在序列化過程中會被忽略

出現在數組中時被轉換成null

單獨出現則會返回undefined

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

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

其他類型的對象，僅會序列化對象可枚舉的屬性，包括 Map/Set/WeakMap/WeakSet

replacer參數

作為函數

replacer——數字Double

replacer——剔除不要的屬性

作為數組

space參數

使用數字

使用字元串

使用製表符（\t）來縮進

總結

parse

text參數

reviver參數

參考鏈接

最後

分享此文：

Related Posts

pyspider的使用

Java高性能編程之CAS與ABA及解決方法

VMware 中卸載安裝Ubuntu 20.04.1 ——Ubuntu系統配置（一）

消失3年 搜狗五筆輸入法歸來：兼容Win10XP

VirMach 便宜 VPS

QNews

熱門搜尋

消失3年搜狗五筆輸入法歸來：兼容Win10XP