解决JSON.stringify方法数据丢失

• JSON 通常用于与服务端交换数据。
  • 在向服务器发送数据时一般是字符串。

JSON.stringify

• 我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。
  • JSON.stringify(value[, replacer[, space]])
  • value：这是必需的参数，代表要转换为 JSON 字符串的值，可以是对象、数组、字符串、数字、布尔值等。
  • replacer：这是可选参数，它可以是一个函数或者数组。
    若 replacer 是函数，在转换过程中会对每个属性调用该函数，以此来决定是否包含该属性或者对属性值进行转换。
    若 replacer 是数组，那么只有数组中包含的属性名会被包含在最终的 JSON 字符串里。
  • space：这也是可选参数，它可以是数字或者字符串，用于指定缩进的空格数或者缩进字符串，目的是让生成的 JSON 字符串更具可读性。

问题分析及原因

1. 函数、undefined、Symbol 会被删除，不止value还会包括key
   • 原因：JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它只支持几种基本的数据类型，如字符串、数字、布尔值、对象、数组和 null。函数、undefined 和 Symbol 不属于这些基本类型，因此在使用 JSON.stringify() 时会被忽略。

const obj = {
    func: function() {
        console.log('This is a function');
    },
    undef: undefined,
    sym: Symbol('test')
};
const jsonStr = JSON.stringify(obj);
console.log(jsonStr); // 输出: {}

3. 正则表达式、Error 对象得到空对象
   • 原因：JSON.stringify() 在处理正则表达式和 Error 对象时，无法将它们的特殊属性和方法序列化为有效的 JSON 格式，所以会将它们转换为空对象。

const regexObj = {
    regex: /abc/g
};
const errorObj = {
    error: new Error('This is an error')
};
const regexJsonStr = JSON.stringify(regexObj);
const errorJsonStr = JSON.stringify(errorObj);
console.log(regexJsonStr); // 输出: {"regex":{}}
console.log(errorJsonStr); // 输出: {"error":{}}

解决方案

通过自定义 replacer 和 reviver 函数，你可以在一定程度上解决 JSON.stringify() 和 JSON.parse() 处理特殊类型数据的问题。

1. JSON.stringify的自定义 replacer 函数
   • JSON.stringify() 方法接受一个可选的 replacer 函数，你可以在这个函数中自定义如何处理特殊类型的数据。

const obj = {
    func: function() {
        console.log('This is a function');
    },
    undef: undefined,
    sym: Symbol('test'),
    regex: /abc/g,
    error: new Error('This is an error')
};

const customReplacer = (key, value) => {
    if (typeof value === 'function') {
        return value.toString();
    }
    if (typeof value === 'undefined') {
        return 'undefined';
    }
    if (typeof value === 'symbol') {
        return value.toString();
    }
    if (value instanceof RegExp) {
        return value.toString();
    }
    if (value instanceof Error) {
        return { name: value.name, message: value.message };
    }
    return value;
};

const jsonStr = JSON.stringify(obj, customReplacer);
console.log(jsonStr);

2. JSON.parse的自定义 reviver 函数

• 还原上面的特殊处理

const customReviver = (key, value) => {
    if (typeof value === 'string') {
        if (value.startsWith('function')) {
            return new Function(`return ${value}`)();
        }
        if (value === 'undefined') {
            return undefined;
        }
        if (value.startsWith('Symbol')) {
            return Symbol(value.slice(7, -1));
        }
        if (value.startsWith('/') && value.endsWith("g")) {
            const parts = value.match(/\/(.*)\/(.*)/);
            return new RegExp(parts[1], parts[2]);
        }
    }
    if (value && value.name === 'Error') {
        const error = new Error(value.message);
        error.name = value.name;
        return error;
    }
    return value;
};

const parsedObj = JSON.parse(jsonStr, customReviver);
console.log(parsedObj);