从零吃透JSON:前端/后端必学的轻量级数据交换神器
JSONJavaScript 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、中、\ \\ \nstring必须双引号单引号非法转义字符必背数字42、-3.14、1e-10number无八进制/十六进制字面量NaN/Infinity/undefined 非法布尔true/falseboolean必须小写True/False 非法nullnullnull唯一表示“无值”的方式数组[]、[1, a, true, null]Array有序可混合类型对象{}、{name:张三,age:28}Object无序键值对键必须双引号最常见新手错误Top 52026年还在犯的写成{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]};constdataJSON.parse(jsonStr);// 成功 → 对象console.log(data.name);// 小明// 安全版本防XSS/恶意JSONtry{constsafeDataJSON.parse(untrustedJsonStr);}catch(e){console.error(非法JSON,e);}// JS 值 → JSON 字符串发给后端 / localStorage / WebSocketconstobj{name:小红,age:20,birthday:newDate(2005-01-01),// 注意sayHi:()console.log(hi)// 注意};constjsonJSON.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)ksayHi?undefined:v);// 去掉函数// 第三个参数 space缩进空格数或字符串JSON.stringify(obj,null,4);// 4个空格JSON.stringify(obj,null,\t);// Tab前端高频场景fetch / axios 响应.json()→ 自动 parselocalStorage.setItem(‘user’, JSON.stringify(user))WebSocket / SSE / GraphQL 响应基本都是 JSON4. 后端必会JSON 的序列化/反序列化各语言对比语言序列化对象→字符串反序列化字符串→对象常用库 / 注意点Node.jsJSON.stringify()JSON.parse()原生性能好Pythonjson.dumps(obj, ensure_asciiFalse)json.loads(s)默认 ascii 转义中文加 ensure_asciiFalseGojson.Marshal(v)json.Unmarshal(data, v)结构体字段需json:field_nametagJavaJackson / Gson / Fastjson同上Spring Boot 默认 JacksonC#JsonSerializer.Serialize(obj)JsonSerializer.DeserializeT(json)System.Text.Json.NET Core或 Newtonsoft后端常见坑大数字精度丢失JS Number 是 IEEE 754 双精度超过 2⁵³-1 就丢精度→ 用字符串传 ID时区问题Date 序列化后是 UTC接收端要小心循环引用obj.self obj→ stringify 直接报错二进制/文件JSON 不适合改用 base64 或 multipart5. 高级 最佳实践2026年真实项目级别JSON Schema强烈推荐描述 JSON 的结构像 TypeScript 接口用 ajv / zodJS、pydanticPython校验OpenAPI / FastAPI / tRPC 都在用大 JSON 优化压缩Gzip / BrotliHTTP 层精简字段后端只返回前端需要的字段GraphQL 就是为此而生分页 / 流式传输大模型 response 常用安全永远不要直接把用户输入当 JSON 拼接XSS / JSONP 劫持后端反序列化时校验类型和范围避免返回敏感字段password、token现代替代/补充了解但不取代 JSONJSON5允许单引号、尾逗号、无引号键、注释配置文件常用TOML / YAML更适合人类写配置Protocol Buffers / Avro / MessagePack性能敏感场景gRPC6. 练习题建议全部手写验证写一个合法 JSON包含嵌套对象 数组 中文 转义字符把下面非法字符串改成合法 JSON{name: 王五, age: 25,}用 JS 实现一个函数把任意对象安全转为 JSON过滤函数、undefined、循环引用后端视角设计一个 User 接口的 JSON Schema包含必填/选填、枚举、格式校验掌握 JSON 后你会发现90% 的前后端协作、本地调试、API 联调其实就是在和 JSON 打交道。有哪一部分想再深入比如 JSON Schema 实战、Go/Python 具体代码、常见大厂面试 JSON 题

相关新闻

Skills vs MCP:谁才是大模型的“HTTP时刻”?

Skills vs MCP:谁才是大模型的“HTTP时刻”?

Skills vs MCP:谁才是大模型的“HTTP时刻”? 这是一个2025年底到2026年初AI Agent社区最热门的争论之一,尤其在Anthropic推出Claude Skills后,很多人开始把MCP的“HTTP时刻”光环开始动摇。 先把两个东西的核心定位说清楚&#…

2026/7/2 19:25:10 阅读更多 →
java第三讲(运算符)

java第三讲(运算符)

Java 第三讲:运算符(Operators) 这一讲是 Java 入门阶段最核心的内容之一,几乎所有后续的判断、循环、计算都建立在运算符的基础上。建议边看边在 IDE 里敲代码验证(推荐 IntelliJ IDEA Community 或 Eclipse&#xf…

2026/5/17 5:46:56 阅读更多 →
第四十篇:分子动力学中的核酸模拟

第四十篇:分子动力学中的核酸模拟

第四十篇:分子动力学中的核酸模拟 摘要 核酸(DNA和RNA)的分子动力学模拟对理解基因表达调控、药物设计和生物技术应用至关重要。本主题介绍核酸模拟的特殊考虑,包括力场选择、离子效应和构象变化分析。 关键词 DNA;RNA…

2026/7/6 12:26:42 阅读更多 →

最新新闻

learn-opengl入门

learn-opengl入门

opengl是一个大状态机 环境配置 1.下载GLFW源代码 2.创建librarel文件包含include目录和第三方库libs 3.include直接从GLFW的源代码中拿,libs里需要编译生成的库glfw3.lib。 4.通过CMake编译源代码拿到glfw3.lib。 5.将我们的librarel加入编辑器的包含文件和库目录里&#xff0…

2026/7/6 21:34:28 阅读更多 →
初入编程世界感觉眼花缭乱?

初入编程世界感觉眼花缭乱?

眼花缭乱有没有?抽象理解第一个C语言程序1. C语言是什么概括:多用于底层开发的,面向过程的编程语言2. 上来就写程序?我开始也觉得不合理,哪有上来就敲代码嘛...QAQ其实不然,一个最简单的“Hello world”程序…

2026/7/6 21:34:28 阅读更多 →
@Async异步线程:Spring 自带的异步解决方案

@Async异步线程:Spring 自带的异步解决方案

前言 在项目应用中,使用MQ异步调用来实现系统性能优化,完成服务间数据同步是常用的技术手段。如果是在同一台服务器内部,不涉及到分布式系统,单纯的想实现部分业务的异步执行,这里介绍一个更简单的异步方法调…

2026/7/6 21:30:26 阅读更多 →
揭秘HQTrack核心架构:InternT-MSDeAOTL-V2模型如何实现高精度实时追踪?

揭秘HQTrack核心架构:InternT-MSDeAOTL-V2模型如何实现高精度实时追踪?

揭秘HQTrack核心架构:InternT-MSDeAOTL-V2模型如何实现高精度实时追踪? 【免费下载链接】HQTrack Tracking Anything in High Quality 项目地址: https://gitcode.com/gh_mirrors/hq/HQTrack 你是否曾想过,如何让计算机像人类一样精准…

2026/7/6 21:28:26 阅读更多 →
从 0 新增一个 has.echo:我如何理解小程序容器里的 API 调用链路

从 0 新增一个 has.echo:我如何理解小程序容器里的 API 调用链路

从 0 新增一个 has.echo:我如何理解小程序容器里的 API 调用链路说明:本文是一次脱敏后的学习复盘。文中的 has.echo、EchoModule、system.demo 都是为了讲清楚调用链路而设计的最小示例,不包含公司内部源码、真实业务接口、真实模块路径和敏…

2026/7/6 21:28:26 阅读更多 →
151、RAG 检索增强生成(五):评估体系——RAGAS 指标、人工评测与线上监控

151、RAG 检索增强生成(五):评估体系——RAGAS 指标、人工评测与线上监控

151、RAG 检索增强生成(五):评估体系——RAGAS 指标、人工评测与线上监控 上周五凌晨两点,我被生产环境告警电话吵醒。用户反馈一个法律咨询机器人回答“根据《民法典》第X条,您需要承担全部责任”,但实际法条引用完全错误。我查了日志,发现RAG检索到的文档片段是某篇自…

2026/7/6 21:26:25 阅读更多 →

日新闻

H2 与 MySQL 单元测试兼容性:5 个关键 SQL 语句差异与规避方案

H2 与 MySQL 单元测试兼容性:5 个关键 SQL 语句差异与规避方案

H2与MySQL单元测试兼容性:5个关键SQL语句差异与规避方案1. 单元测试中的数据库兼容性挑战在Java开发领域,单元测试是保证代码质量的重要环节。当应用涉及数据库操作时,测试环境的搭建往往成为开发者的痛点。H2数据库因其轻量级、内存模式和快…

2026/7/6 0:01:17 阅读更多 →
Windows任务栏终极清理指南:用RBTray一键隐藏窗口到系统托盘

Windows任务栏终极清理指南:用RBTray一键隐藏窗口到系统托盘

Windows任务栏终极清理指南:用RBTray一键隐藏窗口到系统托盘 【免费下载链接】rbtray A fork of RBTray from http://sourceforge.net/p/rbtray/code/. 项目地址: https://gitcode.com/gh_mirrors/rb/rbtray 你是否厌倦了Windows任务栏上密密麻麻的图标&…

2026/7/6 0:01:17 阅读更多 →
Visual C++ 运行时库一键安装终极指南:告别DLL缺失烦恼

Visual C++ 运行时库一键安装终极指南:告别DLL缺失烦恼

Visual C 运行时库一键安装终极指南:告别DLL缺失烦恼 【免费下载链接】vcredist AIO Repack for latest Microsoft Visual C Redistributable Runtimes 项目地址: https://gitcode.com/gh_mirrors/vc/vcredist 你是否曾经遇到过这样的情况:下载了…

2026/7/6 0:05:19 阅读更多 →

周新闻

B站视频下载神器BiliTools:5分钟学会轻松保存任何B站内容

B站视频下载神器BiliTools:5分钟学会轻松保存任何B站内容

B站视频下载神器BiliTools:5分钟学会轻松保存任何B站内容 【免费下载链接】BiliTools A cross-platform bilibili toolbox. 跨平台哔哩哔哩工具箱,支持下载视频、番剧等等各类资源 项目地址: https://gitcode.com/GitHub_Trending/bilit/BiliTools …

2026/7/6 8:11:50 阅读更多 →
威胁模型全解析:从新手入门到实战应用,助你构建安全产品!

威胁模型全解析:从新手入门到实战应用,助你构建安全产品!

威胁模型的陌生现状在忙碌疲惫的一天里,参与了关于混合后量子密码学的讨论,应付端点攻击找茬的人,还参与留言板讨论后,发现“威胁模型”对多数人仍是陌生概念,且多被当作时髦用语。有趣的相关画作有一幅由 Embyr 创作的…

2026/7/6 8:11:52 阅读更多 →
渗透测试入门指南:从零基础到实战环境搭建

渗透测试入门指南:从零基础到实战环境搭建

1. 从“看热闹”到“入门”:我理解的渗透测试到底是什么?每次看到新闻里说某个大公司的数据被“黑”了,或者某个网站被攻击导致服务瘫痪,你是不是和我一样,心里会冒出两个念头:一是“这黑客真厉害”&#x…

2026/7/6 6:52:56 阅读更多 →

月新闻