盘点常见的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__
}

总结