怎样使用JavaScript处理JSON_序列化和反序列化要注意什么

JSON序列化不支持函数、undefined、Symbol等类型,会静默丢弃或转为null;反序列化后为纯对象,需手动还原Date等类型并校验字段。

JavaScript 中处理 JSON 序列化(JSON.stringify)和反序列化(JSON.parse)看似简单,但实际使用中容易踩坑。核心原则是:JSON 是纯数据格式,不支持函数、undefined、Symbol、Date 对象、RegExp、循环引用等 JavaScript 特有类型。

序列化时注意哪些值会被静默丢弃或转换

JSON.stringify 会跳过某些值,且不报错,容易导致数据丢失:

  • undefined、函数、Symbol 类型的属性值会被忽略(整个键值对消失)
  • 数组中出现 undefined 或函数,会被转为 null(例如 [1, undefined, 3][1, null, 3]
  • Date 对象会被调用 .toJSON(),转成 ISO 字符串(如 "2025-05-20T10:30:00.000Z"
  • NaN 和 Infinity 被转为 null
  • 循环引用会直接抛出 TypeError(“Converting circular structure to JSON”)

如何安全地序列化复杂对象(如含 Date、Map、Set、自定义类)

原生 JSON.stringify 不支持扩展,需手动干预:

  • 用 replacer 参数预处理特殊字段:传入函数,在序列化前把 Date 转字符串、Map/Array 化、过滤敏感字段等
  • 给对象添加 toJSON() 方法:该方法返回的值会被序列化(例如让 Date 返回时间戳:toJSON() { return this.getTime(); }
  • 避免直接序列化 Map/Set:先转为普通对象或数组,如 Object.fromEntries(map)[...map]
  • 循环引用可借助第三方库(如 flatted)或手写递归标记方案,但通常建议提前解构数据结构,不依赖序列化解决

反序列化时必须校验和类型保护

JSON.parse 只做语法解析,不验证业务逻辑,也不还原类型:

  • 永远用 try/catch 包裹:非法 JSON 字符串(如末尾多逗号、单引号)会抛 SyntaxError
  • 解析后得到的是 plain object,不是原构造函数实例:Date 字符串不会自动变回 Date 对象,需手动 new Date();自定义类需重新实例化
  • 关键字段要检查是否存在、类型是否正确:比如 data?.user?.name 前先确认 data 是对象、user 是对象而非 null
  • 敏感数据(如 token、密码)不要存进 JSON 字符串再传输,尤其不要在前端 localStorage 中明文存敏感字段

常见组合陷阱与建议写法

实际开发中高频出问题的场景:

  • localStorage 存对象?:必须 JSON.stringify 后存,取时 JSON.parse,且要考虑空值或损坏情况(加兜底默认值)
  • fetch 发送数据?body: JSON.stringify(obj),同时设 headers: {'Content-Type': 'application/json'}
  • 后端返回时间字段是字符串?:前端可统一在解析后遍历 key 匹配 /Time|Date|At$/i,用 new Date() 转换
  • 需要保留 undefined?:JSON 不支持,改用 null 显式表示“空值”,并在业务层约定语义