使用 JSON.Stringify 序列化数据的坑

原文地址

前言

项目中时常会使用到 JSON.Stringify来将数据转为JSON字符串形式,例如设置本地缓存 localStorage时需要将数据转换为字符串形式等等。

今天就在这里列举一下使用 JSON.Stringify的几个注意事项

以一个涵盖了大部分数据类型的对象为例

let my_obj = {
    func: function () {
        alert(1);
    },
    obj: { a: 1 },
    arr: [1, 2, 3],
    und: undefined,
    reg: /123/,
    date: new Date(0),
    NaN: NaN,
    infinity: Infinity,
    sym: Symbol(1)
};
Object.defineProperty(my_obj, "innumerable", {
    enumerable: false,
    value: "innumerable"
});

console.log("obj1", obj1);
let str = JSON.stringify(my_obj);
let my_obj2 = JSON.parse(str);
console.log('obj2',my_obj2);

运行结果如下：

JSON.stringify前后数据对比

使用 JSON.stringify再JSON.parse数据，前后变化表明，使用JSON.stringify序列化之后的数据，在JSON.parse会丢失部分数据。

总结JSON.stringify序列化数据的注意事项

• 使用JSON.Stringify 转换的数据中，如果包含 function，undefined，Symbol，这几种类型，不可枚举属性， JSON.Stringify序列化后，这个键值对会消失。

• 转换的数据中包含 NaN，Infinity 值（含-Infinity），JSON序列化后的结果会是null。

• 转换的数据中包含Date对象，JSON.Stringify序列化之后，会变成字符串。

• 转换的数据包含RegExp 引用类型序列化之后会变成空对象。

• 无法序列化不可枚举属性。

• 无法序列化对象的循环引用，（例如: obj[key] = obj)。

• 无法序列化对象的原型链。

注意：
虽然 JSON.Stringify使用起来简单又方便，但是，在使用 JSON.Stringify 要考虑以上的注意事项，避免给自己挖坑。