盘点常见的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对象，那么序列化之后结果是这样的👇

"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__
}
复制代码

总结

搜索「tony老师的前端补习班」关注我的微信公众号，那么就可以第一时间收到我的最新文章。