副队长JavaScript教程(65)-详解JSON：轻量级数据交换格式-北京尧图网络

点此查看所有教程、项目、源码导航文章目录1. 背景2. JSON 的历史与发展过程2.1 诞生之前XML 一统江湖2.2 JSON 的诞生3. 常见数据格式简单对比JSON、XML、YAML3.1 XML3.2 YAML3.3 JSON4. JSON 基础语法与规范4.1 JSON 支持的数据类型4.2 强制语法规则非常重要5. JSON 的优势6. JS 中操作 JSON 的两个 API6.1 JSON.stringify () 序列化6.2 JSON.parse () 反序列化7. 小结1. 背景前面我们学习了浏览器本地存储localStorage和sessionStorage我们发现一个限制本地存储只能保存字符串。如果我们想要保存对象、数组直接存入会变成[object Object]数据损坏无法读取。同时在前后端交互的时候服务端和浏览器之间也需要一套统一的文本格式来传递结构化数据JSON 就是用来解决这类问题的。JSON 全称JavaScript Object Notation翻译为 JavaScript 对象表示法。很多初学者会误以为它是 JS 语言的一部分这里重点说明JSON 是独立的文本格式不是 JS 语法只是它的语法借鉴了 JS 对象字面量写法现在几乎所有编程语言都支持解析和生成 JSON是互联网最主流的数据交换格式JSON。2. JSON 的历史与发展过程2.1 诞生之前XML 一统江湖在 2000 年前后网页和服务端之间传递结构化数据主流方案是 XML。XML 1998 年由 W3C 发布它源自更早的 SGML 标记语言设计目标偏向文档描述标签成对、结构严谨自带校验、命名空间等能力早期的 SOAP 接口、RSS 订阅、早期银行、政务系统大量使用 XML。但是 XML 标签冗余、体积大、解析繁琐在浏览器 JS 环境里解析起来很麻烦。2.2 JSON 的诞生JSON 由 Douglas Crockford道格拉斯・克罗克福特在 2001 年提出最早在 State Software 公司内部使用同年发出第一条 JSON 消息。他从 JS 对象字面量语法里挑选了一个安全、干净的子集把它定义成一套独立的数据交换格式取名 JSON。2006 年JSON 正式发布 RFC 4627 标准2014 年更新为 RFC 7159成为正式通用标准。随着 AJAX 技术普及网页异步请求大量兴起JSON 凭借在 JS 里天然友好的优势快速普及到 2010 年前后在 Web 接口领域JSON 已经超过 XML成为首选格式。补充JSON 没有完全淘汰 XML在一些需要强文档校验、复杂文档结构的场景XML 至今仍在使用。3. 常见数据格式简单对比JSON、XML、YAML3.1 XMLXML 是标记语言依靠成对标签包裹数据。示例username小红/nameage20/agehobby看书/hobby/user特点标签冗余、体积大支持注释、属性、命名空间、文档校验解析代码复杂适合文档、复杂协议、政务、金融旧系统。3.2 YAMLYAML 是配置文件格式依靠缩进表达结构常见于前端打包、Docker、K8s 配置文件。示例name:小红age:20hobby:-看书-跑步特点写法简洁可读性很好但是缩进严格缩进错一点就解析失败一般多用于配置很少用来做前后端接口传输。3.3 JSON我们后面会重点学习结构紧凑适合网络传输、本地存储、接口交互。对比下格式主要用途优点缺点XML老旧接口、文档、金融、政务规范严谨、支持校验标签多、笨重、解析慢JSONWeb 接口、浏览器本地存储轻量、JS 原生友好、解析快不支持注释、语法严格YAML项目配置文件简洁、可读性高缩进敏感不适合网络传输4. JSON 基础语法与规范JSON 只有两种顶层结构对象 {}、数组 []。4.1 JSON 支持的数据类型字符串必须双引号数字整数、小数不需要引号布尔true /false小写null空值对象、数组❌ JSON不支持函数、undefined、注释、变量、运算表达式。4.2 强制语法规则非常重要对象的属性名key必须使用双引号不能单引号不能不加引号字符串类型的值也必须双引号不能写注释末尾不能多余逗号✅ 标准 JSON 示例{name:小红,age:20,isStudent:true,hobby:[看书,跑步],address:null}❌ 错误写法这些都不是合法 JSON{name:小红,age:20,say:function(){}}区分重点JS 对象可以写单引号、可以不加引号、可以放函数JSON 是严格文本规则更苛刻。5. JSON 的优势轻量紧凑相比 XML同样的数据JSON 文本更短占用带宽更少网络传输更快JS 原生友好浏览器内置JSON.stringify()、JSON.parse()不需要额外引入第三方库跨语言通用Java、Python、PHP、Go 等几乎所有编程语言都有成熟的 JSON 解析工具结构清晰对象、数组的结构和我们日常编程的数据结构一一对应上手简单解析速度快格式简单机器解析成本更低6. JS 中操作 JSON 的两个 API这两个是浏览器内置方法用来在 JS 内存数据和 JSON 字符串之间互相转换也是我们下一篇本地存储实战的核心。6.1 JSON.stringify () 序列化JS 对象 / 数组 → JSON 字符串varuser{name:小红,age:20};varjsonStrJSON.stringify(user);console.log(jsonStr);运行结果得到的结果是一段字符串就可以存入 localStorage。6.2 JSON.parse () 反序列化JSON 字符串 → JS 对象 / 数组varobjJSON.parse(jsonStr);console.log(obj);console.log(obj.name);运行结果读取本地存储拿到 JSON 字符串之后用这个方法转回 JS 对象才能正常读取属性。7. 小结JSON 全称 JavaScript Object Notation是独立的轻量级文本交换格式不是 JS 语法。历史XML 先行2001 年 JSON 诞生2006 标准化随 AJAX 普及成为 Web 主流格式。对比XML 适合文档、老旧系统YAML 适合配置JSON 适合接口、本地存储。JSON 语法严格key 必须双引号不支持注释、函数、undefined。两个核心 APIJSON.stringify序列化、JSON.parse反序列化用来配合本地存储保存对象、数组。

副队长JavaScript教程(65)-详解JSON：轻量级数据交换格式

相关推荐

副队长JavaScript教程(66)-本地存储实战：待办事项网页的开发

副队长JavaScript教程(64)-本地存储：localStorage 与 sessionStorage

副队长JavaScript教程(63)-BOM之窗口大小与页面滚动

更多资讯

副队长JavaScript教程(62)-BOM之定时器

副队长JavaScript教程(61)-BOM之location、history、navigator常见用法

数据图表也有设计门槛：6款主流产品谁能做出更专业的商业图表？

AWESOME-OCR-LLM完整指南：一文读懂大模型时代OCR的900+篇论文全景

MediaPipe手势识别Android集成实战：从关键点到源码避坑

一枚回形针的门道：材料工艺、办公整理与手工改造全拆解

今日更新

AI智能体开发实战：从技术原理到商业落地

OpenShell 完全定制指南：从安装到深度配置，打造高效 Windows 开始菜单

Superpowers技能体系全解析：从Skills引入到安装的完整指南

本周精选

防幻觉智能体架构：电源硬件设计中的大模型编排与工具化实践

OpenGL面试核心考点：渲染管线、矩阵变换与性能排查全解析

全国计算机二级C语言真题PDF高效刷题指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？