点此查看 所有教程、项目、源码导航
文章目录
- [1. 背景](#1. 背景)
- [2. JSON 的历史与发展过程](#2. JSON 的历史与发展过程)
-
- [2.1 诞生之前：XML 一统江湖](#2.1 诞生之前：XML 一统江湖)
- [2.2 JSON 的诞生](#2.2 JSON 的诞生)
- [3. 常见数据格式简单对比：JSON、XML、YAML](#3. 常见数据格式简单对比：JSON、XML、YAML)
-
- [3.1 XML](#3.1 XML)
- [3.2 YAML](#3.2 YAML)
- [3.3 JSON](#3.3 JSON)
- [4. JSON 基础语法与规范](#4. JSON 基础语法与规范)
-
- [4.1 JSON 支持的数据类型](#4.1 JSON 支持的数据类型)
- [4.2 强制语法规则（非常重要）](#4.2 强制语法规则（非常重要）)
- [5. JSON 的优势](#5. JSON 的优势)
- [6. JS 中操作 JSON 的两个 API](#6. JS 中操作 JSON 的两个 API)
-
- [6.1 JSON.stringify () 序列化](#6.1 JSON.stringify () 序列化)
- [6.2 JSON.parse () 反序列化](#6.2 JSON.parse () 反序列化)
- [7. 小结](#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、YAML
3.1 XML
XML 是标记语言，依靠成对标签包裹数据。
示例：
xml
<user>
<name>小红</name>
<age>20</age>
<hobby>看书</hobby>
</user>特点：标签冗余、体积大；支持注释、属性、命名空间、文档校验；解析代码复杂；适合文档、复杂协议、政务、金融旧系统。
3.2 YAML
YAML 是配置文件格式，依靠缩进表达结构，常见于前端打包、Docker、K8s 配置文件。
示例：
yaml
name: 小红
age: 20
hobby:
- 看书
- 跑步特点：写法简洁，可读性很好；但是缩进严格，缩进错一点就解析失败；一般多用于配置，很少用来做前后端接口传输。
3.3 JSON
我们后面会重点学习，结构紧凑，适合网络传输、本地存储、接口交互。
对比下：
| 格式 | 主要用途 | 优点 | 缺点 |
|---|---|---|---|
| XML | 老旧接口、文档、金融、政务 | 规范严谨、支持校验 | 标签多、笨重、解析慢 |
| JSON | Web 接口、浏览器本地存储 | 轻量、JS 原生友好、解析快 | 不支持注释、语法严格 |
| YAML | 项目配置文件 | 简洁、可读性高 | 缩进敏感，不适合网络传输 |
4. JSON 基础语法与规范
JSON 只有两种顶层结构：对象 {} 、数组 \[\]。
4.1 JSON 支持的数据类型
- 字符串：必须双引号
- 数字：整数、小数，不需要引号
- 布尔：true /false（小写）
- null：空值
- 对象、数组
❌ JSON 不支持：函数、undefined、注释、变量、运算表达式。
4.2 强制语法规则（非常重要）
- 对象的属性名（key）必须使用双引号，不能单引号，不能不加引号
- 字符串类型的值，也必须双引号
- 不能写注释
- 末尾不能多余逗号
✅ 标准 JSON 示例：
json
{
"name": "小红",
"age": 20,
"isStudent": true,
"hobby": ["看书", "跑步"],
"address": null
}❌ 错误写法（这些都不是合法 JSON）
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 字符串
js
var user = {
name:"小红",
age:20
};
var jsonStr = JSON.stringify(user);
console.log(jsonStr);运行结果：
得到的结果是一段字符串，就可以存入 localStorage。
6.2 JSON.parse () 反序列化
JSON 字符串 → JS 对象 / 数组
js
var obj = JSON.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。
- 两个核心 API：
JSON.stringify序列化、JSON.parse反序列化，用来配合本地存储保存对象、数组。