17370845950

JSON是轻量级语言无关的数据交换格式，通过JSON.stringify()序列化为字符串、JSON.parse()反序列化为JavaScript值，用于前后端通信、localStorage等场景。

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它基于 JavaScript 的一个子集，但已成为通用的、语言无关的数据格式。在 JavaScript 中，JSON 常用于前后端通信、本地存储（如 localStorage）、配置文件等场景。所谓“数据序列化”，就是把 JavaScript 对象或数组转换成字符串（以便传输或存储），而“反序列化”则是把 JSON 字符串还原为 JavaScript 值。

JSON.stringify()：把数据变成字符串

这是序列化的关键方法。它接收一个 JavaScript 值（对象、数组、字符串、数字、布尔值、null），返回对应的 JSON 字符串。

• 基本用法：JSON.stringify({name: "张三", age: 25}) → '{"name":"张三","age":25}'
• 注意：函数、undefined、Symbol 类型会被忽略；Date 对象会转成 ISO 字符串；NaN 和 Infinity 转成 null
• 可选参数：第二个参数可以是替换函数或属性名数组（用于过滤/定制输出），第三个参数用于缩进（美化输出，如 JSON.stringify(obj, null, 2)）

JSON.parse()：把字符串变回数据

这是反序列化的操作，将符合 JSON 格式的字符串解析为 JavaScript 值。

• 基本用法：JSON.parse('{"name":"李四","hobby":["读书","游泳"]}') → 得到一个对象
• 必须确保字符串语法严格：双引号包裹键和字符串值，不能有末尾逗号，不能用单引号
• 可选第二个参数是“reviver”函数，可在解析过程中处理每个键值对（比如把时间字符串自动转成 Date 对象）

常见坑与注意事项

实际使用中容易出错的地方：

• 循环引用对象直接 stringify 会报错（TypeError: Converting circular structure to JSON）
• 后端返回的 JSON 字符串如果带 BOM 或多余空格，可能导致 parse 失败；建议先 trim 再解析
• localStorage 只支持字符串，存对象前必须 stringify，取出来后必须 parse，否则得到的是 "[object Object]"
• 不推荐用 eval() 或构造函数方式解析 JSON，有安全风险

简单示例：存取用户信息

比如保存用户偏好设置到 localStorage：

const user = { id: 101, theme: "dark", notifications: true };
localStorage.setItem("userPrefs", JSON.stringify(user)); // 序列化存入

const saved = localStorage.getItem("userPrefs");
const parsedUser = saved ? JSON.parse(saved) : {}; // 反序列化取出

基本上就这些。JSON 序列化本身不复杂，但细节决定成败——尤其在类型兼容性、错误处理和跨环境一致性上要多留心。