JS中有趣的內建物件-JSON
阿新 • • 發佈:2020-09-08
# 前言
在以前的`web開發中`,我們多數選擇`純文字`或`XML`作為我們的提交的資料格式,大多數是`XML`,少數`純文字`。其實從`AJAX(Asynchronous JavaScript and XML)`的命名我們也知道,資料交換是大多數通過`XML`格式進行的。但是`XML`格式有一個缺點,就是文件構造複雜,需要傳輸比較多的位元組數,並且解析起來也比較麻煩。所以就建立了`JSON`這種資料描述格式,可以很簡單的就描述很複雜的資料。同時獨立於語言,這樣就可以在多種語言內使用。也正是因為這個,`JSON`的輕便性逐漸得到重視,後來替代`XML`成為最主要的資料傳輸格式。
> ps: 當然,雖然說了很多`JSON`的好處,你就以為不用學習`XML`了嗎?肯定不是啦,微信公共平臺介面中的有是有相當一部分介面使用了`XML`的。
`JSON`物件包含兩個方法: 用於解析 [JavaScript Object Notation](https://www.json.org/json-en.html) ([JSON](https://developer.mozilla.org/zh-CN/docs/Glossary/JSON)) 的 parse() 方法,以及將物件/值轉換為 JSON 字串的 stringify() 方法。除了這兩個方法, JSON 這個物件本身並沒有其他作用,也不能被呼叫或者作為建構函式呼叫。
> ps: [JSON:並不是 JavaScript 的子集。](http://timelessrepo.com/json-isnt-a-javascript-subset)儘管不是嚴格意義上的子集,JSON 非常接近 JavaScript 語法的子集。
# JavaScript 與 JSON 的區別
| JavaScript型別 | JSON 的不同點 |
| -------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| 物件和陣列 | 屬性名稱必須是雙引號括起來的字串;最後一個屬性後不能有逗號。 |
| 數值 | 禁止出現前導零(JSON.stringify 方法自動忽略前導零,而在 JSON.parse 方法中將會丟擲 SyntaxError);如果有小數點, 則後面至少跟著一位數字。 |
針對於這兩點,我們舉個例子,對於物件和陣列型別:
```js
// 屬性名稱必須是雙引號括起來的字串
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
```
對於數值型別:
```js
// 禁止出現前導零
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**已經可以解析正常,但是想具體可以檢視下面[參考連結](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON)自行了解,這裡就不展開了
> 參考:[JavaScript 與 JSON 的區別](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/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
```js
JSON.stringify([NaN, Infinity, null]) // [null,null,null]
```
### undefined、任意的函式以及 symbol 值的處理
#### 出現在非陣列物件的屬性值中時,在序列化過程中會被忽略
```js
JSON.stringify({x: undefined, y: Object, z: Symbol("")}) // "{}"
```
#### 出現在陣列中時被轉換成null
```js
JSON.stringify([undefined, Object, Symbol("")]) // "[null,null,null]"
```
#### 單獨出現則會返回undefined
```js
JSON.stringify(undefined) // undefined
JSON.stringify(Object) // undefined
JSON.stringify(Symbol("")) // undefined
```
### 所有以 symbol 為屬性鍵的屬性都會被完全忽略掉,即便 replacer 引數中強制指定包含了它們。
```js
JSON.stringify({[Symbol("foo")]: "foo"}) // "{}"
JSON.stringify({[Symbol.for("foo")]: "foo"}, [Symbol.for("foo")]) // "{}"
```
### 轉換值如果有 toJSON() 方法,該方法定義什麼值將被序列化。
```js
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())
```js
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
```js
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 的這個物件。隨後每個物件或陣列上的屬性會被依次傳入。
這句話看不太懂?不要緊,舉個例子你就懂了
```js
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 字串。
比如:
```js
function replacer(key, value) {
return {a:1}
}
JSON.stringify({}, replacer)
```
因為我們每次返回的都是物件,那麼每次都會呼叫`replacer`,所以會造成堆疊溢位,那麼我們舉個不會溢位的小栗子例子吧