1.5 JSON 数据交互规范JSONJavaScript Object Notation是轻量级文本数据交换格式也是前后端交互、本地数据持久化的事实标准。它基于 JavaScript 语法子集设计但完全独立于编程语言被所有主流语言原生支持具备体积小、可读性强、解析效率高的特点是前端交互开发中数据传输与存储的核心载体。1.5.1 JSON 语法规则与约束JSON 的语法是 JavaScript 对象字面量的严格子集相比普通 JS 对象有更强的约束不符合规范的 JSON 字符串无法被标准解析器识别。一、核心语法规则键值对结构数据以「键值」形式组织键名必须使用双引号包裹不可使用单引号或无引号数据分隔多个键值对、数组成员之间用英文逗号分隔最后一项后禁止添加尾随逗号结构标识对象使用花括号{}包裹数组使用方括号[]包裹字符串值字符串类型的值必须使用双引号包裹不可使用单引号无注释JSON 标准不支持任何形式的单行或多行注释二、支持的数据类型类型说明合法示例字符串双引号包裹的 Unicode 字符hello、张三数字整数、浮点数支持科学计数法123、3.14、1e5布尔值全小写的 true /falsetrue、falsenull空值标识全小写null对象花括号包裹的键值对集合{name: 张三}数组方括号包裹的有序集合[1, 2, 3]三、常见语法错误以下写法均为非法 JSON解析时会直接报错键名使用单引号{name: 张三}键名省略引号{name: 张三}字符串值用单引号{name: 张三}末尾多余逗号{name: 张三, age: 25,}包含注释{name: 张三 /*用户名*/}包含 undefined / 函数{fn: function(){}}标准合法 JSON 示例{ sites: [ { name: 菜鸟教程, url: www.runoob.com }, { name: google, url: www.google.com }, { name: 微博, url: www.weibo.com } ], total: 3, success: true, error: null }1.5.2 序列化与反序列化核心方法JavaScript 内置全局JSON对象提供两个核心方法实现 JSON 字符串与 JS 对象的双向转换是前后端数据交互的必用语法。一、JSON.parse ()JSON 字符串 → JS 对象将符合规范的 JSON 字符串解析为原生 JavaScript 对象常用于解析后端接口返回的响应数据。语法JSON.parse(text[, reviver])text待解析的 JSON 字符串reviver可选转换回调函数遍历每个键值对可对解析结果做二次处理基础示例const jsonStr {name:前端开发,year:2024,isUseful:true}; const jsObj JSON.parse(jsonStr); console.log(jsObj.name); // 输出前端开发 console.log(jsObj.year); // 输出2024 进阶reviver 字段预处理 常用于将日期字符串自动转换为 Date 对象 const str {name:张三,birth:1998-01-01}; const user JSON.parse(str, (key, value) { if (key birth) return new Date(value); return value; });二、JSON.stringify ()JS 对象 → JSON 字符串将 JavaScript 值序列化为符合规范的 JSON 字符串常用于向后台提交数据、本地存储对象。语法JSON.stringify(value[, replacer[, space]])value待序列化的 JS 值通常为对象、数组replacer可选过滤规则可为数组或函数控制需要序列化的属性space可选缩进空格数用于美化输出格式提升可读性美化格式示例const user { username: 张三, age: 25, skills: [HTML, CSS, JS] }; const prettyJson JSON.stringify(user, null, 2); console.log(prettyJson); 进阶replacer 过滤敏感字段 const user { name: 张三, password: 123456, age: 25 }; // 传入数组只序列化指定属性 const safeStr1 JSON.stringify(user, [name, age]); // 传入函数自定义序列化逻辑 const safeStr2 JSON.stringify(user, (key, value) { if (key password) return undefined; // 过滤敏感字段 return value; });三、前端典型应用场景接口交互接收后端响应后调用JSON.parse解析提交请求前调用JSON.stringify序列化请求体本地存储localStorage /sessionStorage 仅支持字符串存储保存对象 / 数组时必须先序列化简易深拷贝通过JSON.parse(JSON.stringify(obj))实现对象深拷贝存在边界限制见下节数据快照记录数据状态用于撤销重做、对比差异1.5.3 序列化边界与异常场景JSON 序列化并非支持所有 JavaScript 类型存在明确的边界与异常行为是开发中高频踩坑点。理解这些边界可以避免数据丢失、解析报错等线上问题。一、序列化的类型边界JSON.stringify对不同类型的处理规则JS类型序列化结果说明字符串、数字、布尔值正常转换为对应 JSON 类型符合预期null保留为 null符合预期undefined对象属性被忽略数组成员转为 null对象中该属性直接消失函数、Symbol对象属性被忽略数组成员转为 null无法序列化NaN、Infinity、-Infinity转为 null数字特殊值会丢失语义信息Date对象转为 ISO 格式字符串调用toISOString()解析后为字符串而非 DateRegExp、Error对象转为空对象{}丢失全部内部信息Map、Set、WeakMap等集合转为空对象{}无法直接序列化循环引用对象直接抛出错误检测到循环引用时报错终止二、常见异常场景循环引用报错当对象内部存在循环引用对象属性指向自身时序列化会直接抛出 TypeError。const obj {}; obj.self obj; JSON.stringify(obj); // 抛出错误Converting circular structure to JSON属性静默丢失对象中的 undefined、函数、Symbol 属性会被静默删除导致数据不一致。const data { a: undefined, b: function() {}, c: Symbol(id) }; console.log(JSON.stringify(data)); // 输出{}所有属性全部丢失特殊数字失真NaN、无穷大会被转为 null数值语义丢失。const nums [NaN, Infinity, -Infinity]; console.log(JSON.stringify(nums)); // [null,null,null]格式解析失败传入不符合 JSON 规范的字符串时JSON.parse会直接抛出语法错误导致程序中断。JSON.parse({name: 张三}); // 抛出 SyntaxError三、工程避坑指南接口数据统一做容错处理JSON.parse外层包裹 try/catch避免格式错误导致页面崩溃复杂对象深拷贝优先使用结构化克隆structuredClone()替代 JSON 序列化方案序列化前清理敏感字段与不可序列化字段避免数据静默丢失日期类型统一约定传输格式解析后显式转换为 Date 对象避免字符串日期导致的计算错误大文件、复杂集合类型不使用 JSON 传输选择 FormData 或二进制格式