JavaScript解析JSON数据全攻略

JavaScript处理JSON看似简单，仅靠JSON.parse()和JSON.stringify()两个原生方法即可完成，但实际开发中处处是陷阱：严格格式要求导致“Unexpected token”频发、类型丢失让函数/undefined无声消失、fetch的.json()返回Promise被误当同步操作、循环引用直接崩溃、浏览器兼容性埋下隐患……真正关键的不是语法本身，而是对数据源头可信度的警惕、对异常的主动防御、对类型转换的清晰认知——掌握这些细节，才能让JSON从“黑盒”变成可控、可靠的数据桥梁。

JavaScript 处理 JSON 数据不需要额外库，核心就靠 JSON.parse() 和 JSON.stringify() 两个原生方法——但用错参数、忽略异常、混淆数据类型，是绝大多数人踩坑的根源。

JSON.parse() 解析字符串时为什么报错 "Unexpected token"？

这是最常见的错误，本质是传入了非标准 JSON 字符串。JSON 格式比 JavaScript 对象字面量更严格：键名必须双引号、不能有尾随逗号、不能用单引号、不允许注释或 undefined / NaN / 函数。

• ❌ 错误示例：

  JSON.parse("{name: 'Alice'}") // 报错：key 缺少双引号

• ❌ 错误示例：

  JSON.parse('{"age": 25,}') // 报错：尾随逗号

• ✅ 正确写法：

  JSON.parse('{"name": "Alice", "age": 25}')

• ⚠️ 安全做法：始终用 try...catch 包裹解析逻辑，尤其当 JSON 来自用户输入或 API 响应时

JSON.stringify() 序列化对象时丢失函数和 undefined

JSON.stringify() 只会序列化可枚举的、值为字符串、数字、布尔、null、数组或纯对象的属性。函数、undefined、Symbol、Date 对象（不调用 .toISOString()）、RegExp 等都会被忽略或转为 null。

• ❌

  JSON.stringify({a: 1, b: undefined, c: () => {}, d: new Date()}) // 输出：{"a":1,"d":"2024-01-01T00:00:00.000Z"}

• ✅ 若需保留日期或特殊类型，先手动转换：

  const obj = { time: new Date(), count: 3 };<br>JSON.stringify(obj, (key, value) => value instanceof Date ? value.toISOString() : value);

• ? 第二个参数（replacer）可以是数组（指定白名单字段）或函数（做类型过滤/脱敏），第三个参数（space）控制缩进，便于调试

从 fetch 获取 JSON 时，.json() 方法返回 Promise

很多人误以为 fetch(url).then(res => res.json()) 是同步操作，其实 res.json() 返回的是 Promise，必须 await 或链式 .then() 才能拿到解析后的 JS 对象。

• ❌ 错误写法：

  const data = fetch('/api/user').then(r => r.json());<br>console.log(data); // 输出 Promise {<pending>}，不是实际数据</pending>

• ✅ 正确写法（async/await）：

  async function getUser() {<br>  const res = await fetch('/api/user');<br>  if (!res.ok) throw new Error(`HTTP ${res.status}`);<br>  const data = await res.json(); // 注意这里还要 await<br>  return data;<br>}

• ⚠️ res.json() 自动调用 JSON.parse()，但如果响应体不是合法 JSON，仍会抛出 SyntaxError，需在 await res.json() 外层加 try/catch

JSON 不支持循环引用，遇到时会报 "Converting circular structure to JSON"

当对象中存在属性引用自身（或形成闭环引用链），JSON.stringify() 无法处理，直接抛错。这不是 bug，是 JSON 规范本身不支持引用语义。

• ❌ 示例：

  const obj = {}; obj.self = obj;<br>JSON.stringify(obj); // 报错

• ✅ 临时绕过方案（仅限调试）：

  JSON.stringify(obj, (key, value) =><br>  typeof value === 'object' && value !== null && value === obj ? '[Circular]' : value<br>);

• ? 生产环境建议：用 structuredClone()（现代浏览器）做深拷贝前检查，或用第三方库如 flatted / cycle 处理带引用的结构

真正难的从来不是“怎么转”，而是搞清数据源头是否可信、中间有没有被意外篡改、目标环境是否支持新特性（比如 structuredClone 在旧版 Safari 不可用）。别让 JSON 成为黑盒——每次解析后，花半秒 console.log(typeof data) 确认类型，比写十行容错代码更有效。

今天关于《JavaScript解析JSON数据全攻略》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！