JS处理JSON：序列化与解析全攻略

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《JS操作JSON：序列化与解析详解》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

JavaScript操作JSON主要靠JSON.stringify()和JSON.parse()：前者将对象序列化为字符串，支持过滤字段和格式化输出；后者将字符串解析为对象，支持reviver函数处理值；二者均不支持函数、undefined、Symbol等类型，需注意Date转换、循环引用及大数字精度问题。

JavaScript 操作 JSON 主要靠两个内置方法：JSON.stringify() 用于序列化（把对象转成 JSON 字符串），JSON.parse() 用于解析（把 JSON 字符串转回 JavaScript 值）。它们不支持函数、undefined、Symbol、Date 对象（直接转会丢失或报错），用起来简单但细节要注意。

JSON.stringify()：把数据转成 JSON 字符串

这个方法接受三个参数：要转换的值、可选的替换函数或数组（用于过滤/修改键值）、可选的缩进空格数（用于美化输出）。

• 基础用法：JSON.stringify({name: "张三", age: 25}) → '{"name":"张三","age":25}'
• 过滤字段：传入数组，如 JSON.stringify(obj, ["name", "city"]) 只保留 name 和 city 字段
• 格式化输出：加第三个参数，比如 JSON.stringify(obj, null, 2) 会换行+2空格缩进，方便阅读
• 注意：Date 对象会被转成 ISO 字符串，new Date() → "2024-05-10T08:30:00.000Z"；函数和 undefined 会被忽略；NaN 和 Infinity 转为 null

JSON.parse()：把 JSON 字符串还原为 JavaScript 值

这个方法接收一个 JSON 字符串和一个可选的 reviver 函数（用于在解析过程中处理每个键值对）。

• 基础用法：JSON.parse('{"name":"李四","age":30}') → 返回对象 {name: "李四", age: 30}
• 安全校验：字符串必须是严格 JSON 格式（双引号、无尾逗号、无注释），否则抛 SyntaxError。建议用 try/catch 包裹
• reviver 示例：可以用来把时间字符串自动转成 Date 对象：
  JSON.parse(jsonStr, (key, value) => key === 'time' ? new Date(value) : value)

常见陷阱与绕过方式

原生 JSON API 不处理函数、正则、Map/Set、undefined 等类型，遇到这些需要手动预处理或使用第三方库（如 flatted 或自定义序列化逻辑）。

• Date：序列化前转成字符串，解析后用 reviver 还原
• undefined / 函数：提前用 JSON.stringify() 的 replacer 过滤掉，或替换成 null
• 循环引用：直接调用会报错，需先用 structuredClone()（现代浏览器）或自定义克隆逻辑避免
• 大数字精度丢失：JSON 不区分 number 和 bigint，BigInt(123n) 无法直接序列化，需转成字符串再存

实用小技巧

日常开发中，结合 localStorage、fetch 请求体或响应处理时，JSON 转换很频繁，几个顺手写法值得记住：

• 安全解析封装：
  const safeParse = (str) => { try { return JSON.parse(str); } catch { return null; } };
• 深拷贝替代方案：
  const clone = obj => JSON.parse(JSON.stringify(obj));（仅适用于纯数据对象，不含函数/日期等）
• 调试打印 JSON：
  console.log(JSON.stringify(data, null, 2)); 比直接 log 更清晰

本篇关于《JS处理JSON：序列化与解析全攻略》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！