盤點常見的JSON用法

JSON 是什麼？

JSON 是一種語法，能夠用來序列化對象、數組或者數字等數據類型。換句話說，咱們能夠利用 JSON 來將數據轉成字符串的形式。

常見的 API

JSON.parse

• 功能

  還原被序列化的數據（反序列化），即將字符串還原爲它原本的數據結構。

• 參數

  • text，即將要被「反序列化」的字符串
  • reviver，處理字符串的回調函數，能夠參與到「反序列化」的過程，遍歷順序是由內到外

JSON.stringify

• 功能

  序列化一個值，即將一個值轉爲字符串的形式。

• 參數

  • value，將要被序列化的值

  • replacer

    1. 若是該值是函數，那麼它會參與到序列化的過程中
    2. 若是該值是數組，那麼只有包含在數組裏的屬性纔會被序列化
    3. 若是該值是 null 或者 undefined，那麼全部屬性都會被序列化

使用場景

本地緩存

常常使用的本地緩存如 localStorage，對於存入的數據是有要求的：鍵名和值都只能是 string 類型。
而這時 JSON 就能夠派上用場了👇

• 存儲

localStorage.set(key, JSON.stringify(data))

• 提取

localStorage.getItem(key, JSON.parse(str))

處理 Date 對象

若是對象裏有 Date 對象，那麼序列化以後結果是這樣的👇

"2020-07-29T14:47:09.608Z"

這時候就頭疼了，咱們須要再寫一個函數來處理反序列化以後的結果嗎？

別忘了上面提到的參數，不管是 parse 仍是 stringify 都容許傳入一個參數來控制序列化/反序列化，所以咱們能夠這樣來處理 Date 的對象👇

let obj = {
    text: 'just do it',
    date: new Date()
}
let str = JSON.stringify(obj)
let org = JSON.parse(str, (key, val) => {
    // 若是是 date 就轉成 Date
    if (key === 'date') {
        return new Date(val)
    }
    return val
})

處理 RegExp 對象

如今場景更加複雜了，你須要處理 RegExp 對象了，這時候要怎麼作呢？手快的同窗可能就直接開動了👇

let obj = {
    reg: /\d+/
}
let str = JSON.stringify(obj)
let org = JSON.parse(str)

實際上，直接序列化一個 RegExp 對象只會返回一個 "{}"（不信你試試）

別忘了，RegExp 構造函數能夠傳入這兩個參數：

• source
• flags

所以咱們只要對包含 RegExp 對象的屬性在序列化與反序列化時作特別處理便可👇

// 序列化 RegExp 對象
let obj = { reg: /\d+/ }
let str = JSON.stringify(obj, (key, val) => {
    if (key === 'reg') {
        return {
            source: val.source,
            flags: val.flags
        }
    }
    return val
})
// 反序列化
let org = JSON.stringify(str, (key, val) => {
    if (key === 'reg') {
        return new RegExp(val.source, val.flags)
    }
    return val
})

判斷對象是否爲空

咱們也能夠利用 JSON.stringify 來判斷某個對象是否爲空（沒有任何屬性）👇

const isObjectEmpty = (obj) => {
    return JSON.stringify(obj) === '{}' && !obj.__proto__
}

總結