当前位置：首页 > news >正文

解决JSON.stringify方法数据丢失

news 来源：原创 2025/5/7 6:44:14

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

JSON.stringify

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

问题分析及原因

函数、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); // 输出: {}

正则表达式、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() 处理特殊类型数据的问题。

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);

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);