JS中有趣的內置對象-JSON

時間  2020-09-09
標籤 有趣 內置 對象 json 欄目 JavaScript 简体版
原文   原文鏈接

前言

在之前的web開發中，咱們多數選擇純文本或XML做爲咱們的提交的數據格式，大多數是XML，少數純文本。其實從AJAX(Asynchronous JavaScript and XML)的命名咱們也知道，數據交換是大多數經過XML格式進行的。可是XML格式有一個缺點，就是文檔構造複雜，須要傳輸比較多的字節數，而且解析起來也比較麻煩。因此就建立了JSON這種數據描述格式，能夠很簡單的就描述很複雜的數據。同時獨立於語言，這樣就能夠在多種語言內使用。也正是由於這個，JSON的輕便性逐漸獲得重視，後來替代XML成爲最主要的數據傳輸格式。javascript

ps: 固然，雖說了不少JSON的好處，你就覺得不用學習XML了嗎？確定不是啦，微信公共平臺接口中的有是有至關一部分接口使用了XML的。html

JSON對象包含兩個方法: 用於解析 JavaScript Object Notation (JSON) 的 parse() 方法，以及將對象/值轉換爲 JSON 字符串的 stringify() 方法。除了這兩個方法, JSON 這個對象自己並無其餘做用，也不能被調用或者做爲構造函數調用。java

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

JavaScript 與 JSON 的區別

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

針對於這兩點，咱們舉個例子，對於對象和數組類型：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已經能夠解析正常，可是想具體能夠查看下面參考連接自行了解，這裏就不展開了less

參考：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 但願你能有所收穫 😁

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程