如何使用JavaScript操作JSON数据_JavaScript如何解析和序列化JSON字符串

11次阅读

javaScript操作jsON的核心是json.parse()和JSON.Stringify():前者严格校验标准JSON格式,单引号、尾逗号、undefined等均报SyntaxError;后者会忽略undefined/function/symbol属性,对date/regexp等作特殊处理,循环引用直接抛错;需用replacer函数或预处理来支持BigInt、map等类型。

如何使用JavaScript操作JSON数据_JavaScript如何解析和序列化JSON字符串

javascript 里操作 JSON 数据,核心就两件事:JSON.parse()JSON.stringify()。用错参数、传入非法值、忽略循环引用或特殊类型,都会立刻报错或静默丢失数据。

JSON.parse() 解析字符串为什么报 SyntaxError?

最常见的错误是传入了非标准 JSON 字符串——比如单引号包裹的键名、末尾多逗号、使用 undefined 或函数作为值。浏览器node.jsJSON.parse() 严格遵循 JSON 规范,不接受任何 JS 扩展语法。

  • ✅ 正确:
    JSON.parse('{"name":"Alice","age":30}')
  • ❌ 报错:
    JSON.parse("{'name':'Alice'}")  // 单引号
  • ❌ 报错:
    JSON.parse('{"name":"Alice",}')  // 末尾逗号
  • ❌ 报错:
    JSON.parse('{"val":undefined}')  // undefined 不是合法 JSON 值
  • ? 调试建议:先用 console.log(typeof input) 确认输入是 string;再用在线 JSON 验证器(如 jsonlint.com)检查格式

JSON.stringify() 序列化对象时字段突然消失?

JSON.stringify() 会跳过 undefinedfunctionSymbol 类型的属性,也会忽略循环引用的对象,且不处理 DateRegExpMapSet 等内置对象——它们会被转成 NULL 或空对象。

  • ❌ 消失:
    JSON.stringify({ fn: () => {}, u: undefined, sym: Symbol('a') })  // → "{}"
  • ⚠️ 隐形转换:
    JSON.stringify({ d: new Date(), r: /abc/ })  // → '{"d":"2024-01-01T00:00:00.000Z","r":{}}'
  • ? 补救方式:传入 replacer 函数定制序列化逻辑,例如把 Date 转为 ISO 字符串:
    JSON.stringify(obj, (key, val) => val instanceof Date ? val.toISOString() : val)
  • ? 循环引用必须提前检测,否则直接抛 TypeError: Converting circular structure to JSON

如何安全地 parse + stringify 以保留日期、BigInt 等类型?

原生 JSON API 不支持 BigIntundefinedMap 等,强行用会报错或丢失。没有银弹,但可按需分层处理:

立即学习Java免费学习笔记(深入)”;

  • ? 日期:统一转成 ISO 字符串(推荐),或加字段标记类型(如 {"_type":"Date","value":"..."}),解析时手动还原
  • ? BigInt:JSON.stringify(123n, (k, v) => typeof v === 'bigint' ? v.toString() + 'n' : v);解析时需正则识别 "123n" 并调用 BigInt()
  • ? Map/Set:先转为数组格式,如 Array.from(map.entries()),解析后用 new Map(...) 恢复
  • ⚠️ 注意:JSON.stringify()space 参数只影响格式缩进,不影响语义——别指望靠它“修复”数据类型问题

真正麻烦的不是语法,而是隐式类型丢失和跨环境兼容性。比如后端返回的 "123" 是字符串还是数字,前端要不要自动转?null 字段该渲染为空还是留默认值?这些得在业务层约定清楚,而不是依赖 JSON 方法本身去猜。

text=ZqhQzanResources