如何用javascript处理JSON数据【教程】

javaScript处理jsON的核心是json.parse()和JSON.stringify()；前者解析时需注意单引号、尾逗号、undefined等非法格式并用try/catch容错，后者会忽略函数/undefined/symbol、转换date为ISO字符串，深层嵌套推荐可选链与空值合并操作符。

javascript 处理 JSON 数据的核心就两件事：JSON.parse() 和 JSON.stringify()。其他所有“花活”都是围绕它们展开的容错、转换或嵌套操作。

JSON.parse() 解析失败的常见原因和修复方法

不是所有看起来像 JSON 的字符串都能被成功解析。最常踩的坑是单引号、尾逗号、undefined 或注释 —— 这些在 JSON 标准里都不合法。

• JSON.parse("{'name': 'Alice'}") → 报错：单引号必须换成双引号
• JSON.parse('{"name": "Alice",}') → 报错：尾逗号不被允许（即使 chrome 控制台能执行，也不符合标准）
• JSON.parse('{"value": undefined}') → 报错：JSON 不支持 undefined，只能是 NULL
• 如果不确定输入是否安全，加 try/catch：

  try {
    const data = JSON.parse(input);
  } catch (e) {
    console.error('无效 JSON:', e.message);
  }

JSON.stringify() 的坑：函数、Date、undefined 会消失

JSON.stringify() 只序列化可枚举的自有属性，且对某些类型有默认行为 —— 这不是 bug，是设计如此。

• 函数、undefined、Symbol 类型的属性会被直接忽略：

  JSON.stringify({ a: 1, b: () => {}, c: undefined }) // → '{"a":1}'

• Date 对象变成 ISO 字符串：JSON.stringify({ t: new Date(2023, 0, 1) }) → '{"t":"2023-01-01T00:00:00.000Z"}'
• 需要自定义序列化？用第二个参数 replacer 函数：

  JSON.stringify(obj, (key, val) =>
    val instanceof Date ? val.toISOString() : val
  )

处理深层嵌套或不确定结构的 JSON

真实接口返回的 JSON 常有可选字段、数组空值、类型混杂等问题。别依赖 obj.user.name 这种链式访问，容易报 Cannot read Property 'name' of undefined。

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

• 用可选链操作符（ES2020+）：data?.user?.profile?.avatarUrl
• 用空值合并操作符提供默认值：data?.items ?? []
• 需要兼容老环境？写个安全取值工具函数：

  const get = (obj, path, def) =>
    path.split('.').reduce((o, k) => (o?.[k] !== undefined ? o[k] : def), obj) || def;

• 后端返回 "count": null 却期望是数字？显式转换：number(data.count) || 0

JSON 不是 JavaScript 对象字面量，它更严格；而 JavaScript 对象也不是 JSON，它更自由。混淆这两者，是绝大多数解析/序列化问题的根源。