如何用JavaScript处理JSON数据格式【教程】

javaScript处理jsON核心靠json.parse()和JSON.stringify()，但需注意：JSON格式严格（键名双引号、无尾逗号/注释/undefined/函数），解析须try…catch；stringify会忽略函数/undefined/symbol等；fetch的.json()返回promise需await；循环引用会报错，可用replacer临时绕过或structuredClone。

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 };
  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 对象。

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

• ❌ 错误写法：

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

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

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

• ⚠️ 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;
  JSON.stringify(obj); // 报错

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

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

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

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