JavaScript中JSON.stringify与JSON.parse进阶_javascript技巧

JSON.stringify 和 JSON.parse 通过 replacer、reviver 和 space 参数支持自定义序列化、格式化输出及类型恢复，可解决循环引用、敏感字段过滤、日期对象转换等问题，提升数据处理灵活性与安全性。

在JavaScript中，JSON.stringify 和 JSON.parse 是处理数据序列化与反序列化的常用方法。虽然基础用法简单，但在实际开发中，掌握它们的进阶特性可以有效解决复杂场景下的问题，比如循环引用、函数处理、日期对象转换等。

自定义序列化：使用 replacer 参数

JSON.stringify 支持第二个参数 replacer，它可以是函数或数组，用于控制哪些属性被序列化。

当传入函数时，它会在每个键值对上执行，返回值决定如何处理该属性：

• 返回具体值，则该值被序列化
• 返回 undefined，则该属性被忽略
• 返回 null，则对应字段值为 null

const user = { name: 'Alice', password: '123', token: 'abc', age: 25 };
const json = JSON.stringify(user, (key, value) => {
  if (key === 'password' || key === 'token') return undefined;
  return value;
});
// 输出: {"name":"Alice","age":25}

若传入数组，则只包含数组中列出的属性名：

立即学习“Java免费学习笔记（深入）”；

JSON.stringify(user, ['name', 'age']);
// 输出: {"name":"Alice","age":25}

格式化输出与可读性：space 参数

JSON.stringify 第三个参数 space 用于美化输出格式，便于调试或生成配置文件。

• 传入数字表示空格数（最多10）
• 传入字符串则用该字符串作为缩进（如 '\t'）

JSON.stringify({ a: 1, b: { c: 2 } }, null, 2);
/*
{
  "a": 1,
  "b": {
    "c": 2
  }
}
*/

还原特殊类型：reviver 函数

JSON.parse 的第二个参数 reviver 是一个转换函数，可用于修复反序列化后丢失的类型信息，比如日期字符串转 Date 对象。

Writecream

AI作家和文案内容生成器

63

查看详情

const str = '{"name":"Bob","born":"1990-05-12T00:00:00.000Z"}';
const data = JSON.parse(str, (key, value) => {
  if (key === 'born') return new Date(value);
  return value;
});
// data.born 现在是一个 Date 实例

这个机制特别适合处理 API 返回的时间字段，避免手动遍历转换。

处理循环引用与边界情况

直接对包含循环引用的对象调用 JSON.stringify 会抛出错误：

const obj = { name: 'test' };
obj.self = obj;
JSON.stringify(obj); // TypeError: Converting circular structure to JSON

解决方案之一是使用 replacer 过滤掉循环引用：

const seen = new WeakSet();
JSON.stringify(obj, (key, value) => {
  if (typeof value === 'object' && value !== null) {
    if (seen.has(value)) return '[Circular]';
    seen.add(value);
  }
  return value;
});

或者使用第三方库如 flatted 或 cycle.js 来安全序列化循环结构。

另外注意，以下类型在序列化时会被自动忽略或替换：

• 函数、undefined、Symbol：被忽略（对象中）或转为 null（数组中）
• Date 对象：自动转为 ISO 字符串
• RegExp、Error 对象：序列化为 {}

基本上就这些。合理利用 replacer、reviver 和 space 参数，能让 JSON 方法更强大灵活。遇到复杂结构时，提前规划序列化策略能避免很多运行时问题。

以上就是JavaScript中JSON.stringify与JSON.parse进阶_javascript技巧的详细内容，更多请关注php中文网其它相关文章！