登录
首页 >  文章 >  前端

JavaScript处理JSON数据与解析技巧

时间:2026-02-04 14:09:44 135浏览 收藏

知识点掌握了,还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战,手把手教大家学习《JavaScript操作JSON数据及序列化解析要点》,在实现功能的过程中也带大家重新温习相关知识点,温故而知新,回头看看说不定又有不一样的感悟!

JSON.stringify() 会悄悄丢数据:忽略函数、undefined、Symbol键、BigInt,循环引用报错;JSON.parse() 仅接受严格JSON格式,不执行代码但需校验结构;日期等非标类型须手动转换。

javascript如何操作JSON数据_序列化和解析有何要点【教程】

JSON 序列化和解析在 JavaScript 中几乎零成本,但错用 JSON.stringify()JSON.parse() 会导致静默失败、数据丢失甚至安全漏洞。

什么时候 JSON.stringify() 会悄悄丢数据?

它不处理函数、undefined、Symbol、BigInt 和循环引用——这些值会被直接忽略或报错:

  • undefined 和函数:在对象中被跳过({ a: 1, b: undefined, c: () => {} }{"a":1}
  • Symbol 键:整个键值对消失({ [Symbol('x')]: 'y' }{}
  • 循环引用:直接抛 TypeError: Converting circular structure to JSON
  • BigInt:抛 TypeError: Do not know how to serialize a BigInt

若需保留函数或处理循环,得自己实现序列化逻辑(如用 structuredClone() + 自定义 replacer),不能依赖原生 JSON.stringify()

JSON.parse() 的安全边界在哪?

它只接受严格 JSON 格式字符串(双引号键名、无尾逗号、无注释、无单引号)。常见错误包括:

  • 用单引号代替双引号:JSON.parse("{'a':1}") → 报错
  • 尾逗号:JSON.parse('{"a":1,}') → SyntaxError
  • undefined 或 NaN 字面量:JSON.parse('{"x":undefined}') → SyntaxError
  • 执行任意代码?不会。原生 JSON.parse() 不解析表达式,比 eval() 安全得多

但注意:如果输入来自不可信来源,仍需校验结构(比如用 zodio-ts 做运行时类型检查),因为合法 JSON 也可能含恶意字段。

如何安全地处理日期、Map、Set 等非标准类型?

JSON 规范不支持它们,必须手动转换:

  • 日期:用 replacer 转成 ISO 字符串,reviver 中还原:
    JSON.stringify(new Date(), (k, v) => v instanceof Date ? v.toISOString() : v)
  • Map/Set:先转为数组格式([...map]),解析后再用构造函数重建
  • 自定义类实例:JSON.stringify(obj) 只序列化自有可枚举属性,不保留原型链;恢复时需手动 new 实例并赋值

别指望 JSON.parse() 自动识别类型——它永远只返回 plain object/array/null/number/string/boolean。

性能与兼容性要注意什么?

JSON.stringify()JSON.parse() 是 V8 引擎高度优化的原生方法,比手写解析快一个数量级,但仍有细节影响表现:

  • 深层嵌套对象:可能触发栈溢出(尤其在旧版 Safari),建议限制深度或用流式解析库(如 jsonparse
  • 超大字符串(>10MB):阻塞主线程,考虑 Web Worker 中解析
  • IE8+ 支持原生 JSON,但 IE7 及更早需引入 json2.js 垫片
  • replacer 函数若做复杂计算,会显著拖慢 stringify 速度,避免在其中调用 API 或深克隆

真正容易被忽略的是:JSON.stringify(undefined) 返回 "undefined"(字符串),而 JSON.stringify([undefined]) 返回 "[null]" —— 同一值在不同上下文行为不一致,写条件判断时得格外小心。

以上就是本文的全部内容了,是否有顺利帮助你解决问题?若是能给你带来学习上的帮助,请大家多多支持golang学习网!更多关于文章的相关知识,也可关注golang学习网公众号。

前往漫画官网入口并下载 ➜
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>