当前位置：首页 > news >正文

从零吃透JSON：前端/后端必学的轻量级数据交换神器

news 2026/5/12 13:48:14

JSON（JavaScript Object Notation）是现代Web开发中最基础、最普适的数据交换格式，几乎所有前端、后端、移动端、大模型API、配置文件都离不开它。2026年了，它依然是“轻量级数据交换神器”的地位无人撼动。

下面从零基础到吃透，按实际开发中最常用的路径组织内容（前端视角 + 后端视角 + 高级/坑点/最佳实践）。建议你边看边在浏览器控制台 / Node.js / Python / Go 等环境里敲代码验证。

1. JSON 到底是什么？（30秒速览）

一种纯文本格式，用来描述结构化数据
基于 JavaScript 对象字面量语法，但更严格
语言无关：前端 JS、后端 Java/Python/Go/PHP/Rust、大模型的工具调用、配置文件（package.json、tsconfig.json、.vscode/settings.json）、API 响应……到处都是它
官网标准（永恒不变）：https://www.json.org/json-zh.html

核心口诀：“键必须双引号，值只有6种类型，其他一律非法”

2. JSON 支持的6种值类型（必须死记）

类型	示例	JS 中的对应类型	注意事项 / 常见错误
字符串	`"hello"`、`"中"`、`"\" \\ \n"`	string	必须双引号，单引号非法；转义字符必背
数字	`42`、`-3.14`、`1e-10`	number	无八进制/十六进制字面量；NaN/Infinity/undefined 非法
布尔	`true`/`false`	boolean	必须小写，True/False 非法
null	`null`	null	唯一表示“无值”的方式
数组	`[]`、`[1, "a", true, null]`	Array	有序，可混合类型
对象	`{}`、`{"name":"张三","age":28}`	Object	无序键值对，键必须双引号

最常见新手错误Top 5（2026年还在犯的）：

写成{'name': '李四'}→ 键用了单引号 → 非法JSON
最后多一个逗号：{"a":1,}→ 部分老解析器会报错（现代浏览器/Node大多宽容，但不推荐）
注释：{"id":1 /* 这是ID */}→ JSON标准完全不支持注释
undefined、NaN、Infinity直接写 → 非法
函数、Date、正则、Symbol 等 JS 类型 → 直接 stringify 出来是{}或报错

3. 前端必会：JSON 与 JavaScript 的来回转换

// 字符串 → JS 值（最常用：fetch后解析响应）constjsonStr='{"name":"小明","age":18,"isVip":true,"skills":["JS","React"]}';constdata=JSON.parse(jsonStr);// 成功 → 对象console.log(data.name);// "小明"// 安全版本（防XSS/恶意JSON）try{constsafeData=JSON.parse(untrustedJsonStr);}catch(e){console.error("非法JSON",e);}// JS 值 → JSON 字符串（发给后端 / localStorage / WebSocket）constobj={name:"小红",age:20,birthday:newDate("2005-01-01"),// 注意！sayHi:()=>console.log("hi")// 注意！};constjson=JSON.stringify(obj,null,2);// 带缩进，便于调试console.log(json);/* 输出： { "name": "小红", "age": 20, "birthday": "2005-01-01T00:00:00.000Z" // Date 被转成 ISO 字符串 } */// 第二个参数 replacer（过滤/转换）JSON.stringify(obj,["name","age"]);// 只保留 name 和 ageJSON.stringify(obj,(k,v)=>k==="sayHi"?undefined:v);// 去掉函数// 第三个参数 space（缩进空格数或字符串）JSON.stringify(obj,null,4);// 4个空格JSON.stringify(obj,null,"\t");// Tab

前端高频场景：

fetch / axios 响应.json()→ 自动 parse
localStorage.setItem(‘user’, JSON.stringify(user))
WebSocket / SSE / GraphQL 响应基本都是 JSON

4. 后端必会：JSON 的序列化/反序列化（各语言对比）

语言	序列化（对象→字符串）	反序列化（字符串→对象）	常用库 / 注意点
Node.js	`JSON.stringify()`	`JSON.parse()`	原生，性能好
Python	`json.dumps(obj, ensure_ascii=False)`	`json.loads(s)`	默认 ascii 转义中文，加 ensure_ascii=False
Go	`json.Marshal(v)`	`json.Unmarshal(data, &v)`	结构体字段需`json:"field_name"`tag
Java	Jackson / Gson / Fastjson	同上	Spring Boot 默认 Jackson
C#	`JsonSerializer.Serialize(obj)`	`JsonSerializer.Deserialize<T>(json)`	System.Text.Json（.NET Core+）或 Newtonsoft

后端常见坑：

大数字精度丢失（JS Number 是 IEEE 754 双精度，超过 2⁵³-1 就丢精度）→ 用字符串传 ID
时区问题：Date 序列化后是 UTC，接收端要小心
循环引用：obj.self = obj→ stringify 直接报错
二进制/文件：JSON 不适合，改用 base64 或 multipart

5. 高级 & 最佳实践（2026年真实项目级别）

JSON Schema（强烈推荐）
- 描述 JSON 的结构，像 TypeScript 接口
- 用 ajv / zod（JS）、pydantic（Python）校验
- OpenAPI / FastAPI / tRPC 都在用
大 JSON 优化
- 压缩：Gzip / Brotli（HTTP 层）
- 精简字段：后端只返回前端需要的字段（GraphQL 就是为此而生）
- 分页 / 流式传输（大模型 response 常用）
安全
- 永远不要直接把用户输入当 JSON 拼接（XSS / JSONP 劫持）
- 后端反序列化时校验类型和范围
- 避免返回敏感字段（password、token）
现代替代/补充（了解但不取代 JSON）
- JSON5：允许单引号、尾逗号、无引号键、注释（配置文件常用）
- TOML / YAML：更适合人类写配置
- Protocol Buffers / Avro / MessagePack：性能敏感场景（gRPC）