当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript操作JSON数据详解

JavaScript操作JSON数据详解

2026-02-20 13:49:39 0浏览收藏

本文深入剖析了JavaScript中JSON数据操作的四大核心陷阱与最佳实践：解析时因传入非字符串值导致的“Unexpected token”错误、序列化时对undefined/function/Symbol等类型的静默丢失、fetch中response.json()不校验Content-Type带来的隐性风险，以及日期、BigInt、自定义类等特殊类型在JSON标准限制下的保真传输方案；全文强调安全解析需先类型判断、序列化需主动干预、接口响应需以数据结构而非响应头为准，并指出真正的“保真”依赖前后端约定一致的序列化协议，而非盲目依赖默认行为。

javascript如何操作JSON数据？_如何进行JSON字符串和对象的相互转换？【教程】

JSON.parse() 报错：Unexpected token 是怎么回事？

绝大多数 JSON 解析失败都卡在这一步，错误信息像 Unexpected token u in JSON at position 0 或 Unexpected token o in JSON at position 1，本质是传给了 JSON.parse() 一个非字符串值——比如直接传了对象、undefined、null，甚至已经解析过的对象。

常见踩坑点：

误把 response.data 当成字符串（实际已是对象），又套一层 JSON.parse(response.data)
接口返回空响应或 404，response.text() 得到空字符串 ""，JSON.parse("") 必炸
后端返回的是带 BOM 的 UTF-8 字符串，开头有不可见字符，导致解析失败

安全写法：先判断类型再解析

function safeParse(jsonStr) {
  if (typeof jsonStr !== 'string') return null;
  try {
    return JSON.parse(jsonStr);
  } catch (e) {
    console.warn('JSON parse failed:', e.message);
    return null;
  }
}

JSON.stringify() 为什么有时不报错但结果为空或丢失字段？

JSON.stringify() 对值的序列化有明确规则，不是所有 JS 值都能被保留。

典型静默丢失场景：

undefined、function、Symbol 类型的键或值会被直接忽略（连报错都没有）
Date 对象变成 ISO 字符串，RegExp 变成空对象 {}
循环引用（如 obj.a = obj）会直接抛 TypeError: Converting circular structure to JSON
Map / Set / ArrayBuffer 等原生类型不支持，需手动转换

若需保留特殊结构，必须用 replacer 参数干预：

const obj = { time: new Date(), fn: () => {}, x: undefined };
JSON.stringify(obj, (key, value) => {
  if (value instanceof Date) return value.toISOString();
  if (typeof value === 'function') return value.toString();
  return value; // 其他照常
});
// → {"time":"2024-05-20T12:34:56.789Z","fn":"() => {}"}

fetch 返回的 response.json() 和手动 JSON.parse() 有什么区别？

response.json() 是浏览器原生方法，它内部调用 JSON.parse()，但做了两件事：

自动读取 response body 流（等价于 response.text().then(text => JSON.parse(text))）
如果响应头 Content-Type 不含 application/json，**不会报错**，仍尝试解析（这点常被忽略）

所以不能靠 Content-Type 是否为 application/json 来判断数据是否合法。真正可靠的判断方式仍是解析后的值类型：

fetch('/api/user')
  .then(r => r.json())
  .then(data => {
    if (data && typeof data === 'object' && !Array.isArray(data)) {
      // 至少是个对象，可继续处理
      console.log(data.id);
    } else {
      throw new Error('Invalid JSON structure');
    }
  });

JSON 转换时日期、BigInt、自定义类怎么保真？

标准 JSON 规范不支持 Date、BigInt、undefined、正则、函数、class 实例等。想保真传输，必须约定序列化协议。

BigInt：必须显式转成字符串（String(123n)），接收方再 BigInt(str)；否则 JSON.stringify(123n) 直接报错
Date：建议统一用 ISO 字符串（date.toISOString()），后端/前端都按字符串解析
自定义类：无法自动还原，需在对象上加标识字段（如 {"type": "User", "name": "Alice"}），再用工厂函数重建实例

没有银弹。所谓“保真”，本质是前后端对序列化规则达成一致，而不是依赖 JSON.stringify 默认行为。

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