JavaScript解析JSON数据方法详解

珍惜时间，勤奋学习！今天给大家带来《JavaScript如何解析JSON数据》，正文内容主要涉及到等等，如果你正在学习文章，或者是对文章有疑问，欢迎大家关注我！后面我会持续更新相关内容的，希望都能帮到正在学习的大家！

JSON.parse()遇Unexpected token错误主因是字符串含HTML标签、BOM、缩进不规范或字段名缺双引号；应先trim去空、检查不可见字符，优先用response.json()；JSON.stringify()会忽略函数/undefined/Symbol等，需replacer处理特殊类型；嵌套JSON须两层解析并try/catch；环境差异上，浏览器fetch自动校验Content-Type，Node.js需手动处理，且均不支持注释和尾随逗号。

JSON.parse() 解析字符串时遇到 Unexpected token 错误

直接用 JSON.parse() 解析无效 JSON 字符串会抛出 SyntaxError: Unexpected token，常见于后端返回带 HTML 标签、BOM 字节、换行缩进不规范或字段名没加双引号的“类 JSON”文本。

• 先用 console.log(JSON.stringify(str)) 检查原始字符串是否含不可见字符（如 \uFEFF）
• 用 str.trim().replace(/^\s+|\s+$/g, '') 清除首尾空白，再尝试解析
• 如果字符串来自 fetch 响应，优先用 response.json()（它内部已做基础校验和编码处理）
• 不要手动拼接 JSON 字符串——用 JSON.stringify() 生成，避免单引号、未转义引号等问题

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

JSON.stringify() 只处理可序列化的值：数字、字符串、布尔、null、数组、纯对象。函数、undefined、Symbol、Date 对象、RegExp、Map/Set 等都会被忽略或转为 null。

• undefined 作为对象属性值 → 该属性被完全剔除
• undefined 在数组中 → 转为 null
• Date 对象 → 自动调用 .toJSON()，变成 ISO 字符串（如 "2024-05-12T08:30:00.000Z"）
• 需要保留特殊类型？传入自定义 replacer 函数，例如：

  JSON.stringify(obj, (key, val) => {
    if (val instanceof Date) return val.toISOString();
    if (typeof val === 'function') return val.toString();
    return val;
  })

解析嵌套 JSON 字符串（即 JSON 中的 JSON 字符串字段）

后端有时把 JSON 数据作为字符串存进某个字段（比如日志内容、配置快照），这时需两层解析：先 JSON.parse() 外层，再对特定字段再次 JSON.parse()。

• 务必加 try/catch，避免某条数据字段损坏导致整个解析失败
• 示例场景：API 返回 { "id": 1, "meta": "{\"user_id\":123,\"tags\":[\"a\",\"b\"]}" }

  const data = JSON.parse(raw);
  if (typeof data.meta === 'string') {
    try {
      data.meta = JSON.parse(data.meta);
    } catch (e) {
      console.warn('Failed to parse meta:', e.message);
      data.meta = null;
    }
  }

• 注意：不要无条件链式调用 JSON.parse(JSON.parse(...))，必须确认字段类型是字符串

浏览器与 Node.js 中 JSON 解析行为差异

语法层面一致，但运行环境影响输入来源和容错边界：

• 浏览器中 fetch().then(r => r.json()) 会自动检查 Content-Type: application/json，不匹配时报 TypeError；Node.js 的 node-fetch 或 axios 默认不校验，容易静默失败
• Node.js 早期版本（200MB）可能触发内存限制，需流式解析（如 stream-json 库）
• 浏览器中 JSON.parse() 不支持注释、尾随逗号；Node.js 同样不支持——别指望 // 或 {a:1,} 能通过

好了，本文到此结束，带大家了解了《JavaScript解析JSON数据方法详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！