关于前端:盘点常见的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__}

总结