JavaScript: JavaScript JSON
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。它就像快递公司的标准包装箱——不管你寄什么东西，都按统一的规格打包，收件人一眼就知道怎么拆。前后端通信、配置文件、本地存储，JSON 无处不在。
1. JSON 语法规则
JSON 看起来和 JS 对象字面量很像，但规则更严格：
| 规则 | 说明 |
|---|---|
| 键必须用双引号 | "name" ✅ name ❌ 'name' ❌ |
| 字符串值必须用双引号 | "hello" ✅ 'hello' ❌ |
| 不能有尾逗号 | {"a":1,} ❌ |
| 值的类型有限 | 字符串、数字、布尔、null、对象、数组 |
| 不允许的值 | undefined、函数、注释 |
JSON
{
"name": "张三",
"age": 25,
"skills": ["HTML", "CSS", "JS"],
"address": {
"city": "北京",
"zip": "100000"
},
"active": true,
"spouse": null
}
⚠️ 注意： JSON 里没有单引号！初学者最常犯的错就是在 JSON 里写
'key' 或 'value'——这在 JS 里合法，在 JSON 里非法。
▶ 示例
JAVASCRIPT
// 本节代码示例
const message = "你好，世界!";
console.log(message);
这是最简单的示例，后续章节会详细解释。## 2. JSON.stringify()
JSON.stringify() 把 JS 值转成 JSON 字符串——序列化。
HTML
<script>
JSON.stringify(value)
JSON.stringify(value, replacer)
JSON.stringify(value, replacer, space)
</script>
| 参数 | 说明 |
|---|---|
value |
要序列化的值 |
replacer |
过滤或转换，函数或数组 |
space |
缩进，数字或字符串，用于美化输出 |
▶ 示例：序列化与格式化
HTML
<div id="output" style="white-space: pre; font-family: monospace; padding: 10px; border: 1px solid #ccc;"></div>
<script>
const student = {
name: '李华',
age: 20,
scores: [95, 88, 92],
active: true,
grade: undefined,
birthday: new Date()
};
const output = document.getElementById('output');
const plain = JSON.stringify(student);
output.textContent = '紧凑输出:\n' + plain + '\n\n';
const pretty = JSON.stringify(student, null, 2);
output.textContent += '美化输出:\n' + pretty + '\n\n';
const filtered = JSON.stringify(student, ['name', 'scores'], 2);
output.textContent += '只保留name和scores:\n' + filtered;
</script>
💡 提示： 注意：
undefined、函数、Symbol 在序列化时会被忽略（对象中的属性直接消失，数组中变成 null）。Date 对象会被转成 ISO 字符串。
3. JSON.parse()
JSON.parse() 把 JSON 字符串转回 JS 值——反序列化。
HTML
<script>
JSON.parse(text)
JSON.parse(text, reviver)
</script>
| 参数 | 说明 |
|---|---|
text |
JSON 字符串 |
reviver |
转换函数，可以对每个键值对做处理 |
▶ 示例：反序列化
HTML
<div id="output" style="white-space: pre; font-family: monospace; padding: 10px; border: 1px solid #ccc;"></div>
<script>
const output = document.getElementById('output');
const jsonStr = '{"name":"王五","age":30,"hobbies":["阅读","编程"]}';
const obj = JSON.parse(jsonStr);
output.textContent = '解析结果:\n';
output.textContent += '姓名: ' + obj.name + '\n';
output.textContent += '年龄: ' + obj.age + '\n';
output.textContent += '爱好: ' + obj.hobbies.join(', ') + '\n\n';
const arr = JSON.parse('[1, 2, 3, 4, 5]');
output.textContent += '解析数组: ' + arr + '\n';
output.textContent += '数组求和: ' + arr.reduce(function(a, b) { return a + b; }, 0);
</script>
4. JSON vs JS 对象
| 对比 | JSON | JS 对象 |
|---|---|---|
| 本质 | 字符串（文本） | 内存中的数据结构 |
| 键的引号 | 必须双引号 | 可省略（合法标识符时） |
| 值类型 | 有限（6种） | 任意类型 |
| 尾逗号 | 不允许 | 允许 |
| 注释 | 不允许 | 支持（通过工具） |
💡 提示： 简单记：JSON 是"加了严格校验的字符串版 JS 对象"。它不是对象，是文本——需要
parse 才能变成对象操作。
▶ 示例：常见 JSON 错误演示
HTML
<div id="output" style="white-space: pre; font-family: monospace; padding: 10px; border: 1px solid #ccc;"></div>
<script>
const output = document.getElementById('output');
function tryParse(str, label) {
try {
JSON.parse(str);
output.textContent += label + ': ✅ 成功\n';
} catch (e) {
output.textContent += label + ': ❌ ' + e.message + '\n';
}
}
tryParse("{'name':'Tom'}", '单引号键');
tryParse('{"name":"Tom",}', '尾逗号');
tryParse('{"name":undefined}', 'undefined值');
tryParse('{"name":"Tom"}', '合法JSON');
tryParse('{"a":1,"b":2}', '合法JSON(无空格)');
</script>
💡 提示： 上面演示了最常见的三种 JSON 错误：单引号、尾逗号、
undefined。调试 JSON 问题时，复制到浏览器的控制台里 JSON.parse() 一下，报错信息会精确指出位置。
❓ 常见问题
Q 为什么
JSON.stringify(NaN) 返回 null？A JSON 规范中没有
NaN、Infinity、-Infinity，它们在序列化时都被转成 null。如果需要保留这些值，要用自定义的 replacer 函数处理。Q
JSON.parse 可以解析 JS 对象字面量吗？A 不行。
JSON.parse('{}') 正常，但 JSON.parse('{a:1}') 报错——键没有双引号。JSON 比 JS 对象字面量语法更严格。Q JSON 里能写注释吗？
A 标准 JSON 不支持注释。如果需要，可以用
"_comment": "这是说明" 这样的字段代替，但这不是规范做法。📖 小节
- JSON 是字符串格式的数据，键必须双引号、不能有尾逗号、值类型有限
JSON.stringify()序列化，JSON.parse()反序列化，两者互为逆操作undefined、函数、Symbol 在序列化时会被忽略或变nullJSON.stringify的space参数让输出更易读，replacer参数可过滤字段- 解析不合法 JSON 会抛异常，务必用
try/catch包裹
📝 作业
- 基础：创建一个包含 3 个学生信息的对象数组，用
JSON.stringify格式化输出（缩进 2 格）。 - 进阶：写一个函数
safeParse(str)，用try/catch包裹JSON.parse，解析成功返回结果，失败返回null并打印错误信息。 - 挑战：实现一个"本地笔记本"——用
prompt输入内容，用JSON.stringify保存到localStorage，页面加载时用JSON.parse读取并显示。
