盘点常见的JSON用法 - HelloWorld开发者社区

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"

这时候就头疼了，我们需要再写一个函数来处理反序列化之后的结果吗？
盘点常见的JSON用法

别忘了上面提到的参数，无论是 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 对象只会返回一个 "{}"（不信你试试）
盘点常见的JSON用法

别忘了，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__
}

总结

盘点常见的JSON用法