阅读 913

盘点常见的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__
}
复制代码

总结

文章分类
前端
文章标签