在前端和后端开发中,**JSON(JavaScript Object Notation)**几乎是最常见的数据格式。它轻量、易读,而且和 JavaScript 天然契合,这让它成为 Web 开发的"通用语言"。下面我们从语法开始,逐步理解 JSON 的使用方式和常见技巧。
1. JSON 的语法
JSON 支持的类型并不多,大致可以分为三类:简单值、对象和数组。
1.1 简单值
JSON 可以是一个数字、布尔值、字符串或 null
。需要注意的是:
- 字符串必须用 双引号 包裹,单引号会导致语法错误。
undefined
并不在 JSON 的语法范围内。
示例:
csharp
42
"hello"
true
null
1.2 对象
对象使用花括号包裹,由一组键值对组成:
- 键必须是双引号括起来的字符串;
- 值可以是简单值、对象或数组。
json
{
"title": "JSON 入门",
"edition": 3
}
1.3 数组
数组使用方括号表示,可以包含简单值、对象,甚至嵌套数组。
css
[ { "id": 1, "tags": ["a", "b"] },
{ "id": 2, "tags": ["c"] }
]
1.4 序列化与解析
与 XML 相比,JSON 最大的优势在于:
- 可以直接序列化对象为字符串;
- 可以直接把字符串解析为对象。
这也是绝大多数开发者选择 JSON 的原因。
2. JSON 对象与序列化方法
在 JavaScript 中,提供了两个核心方法:
JSON.stringify()
:把对象转为 JSON 字符串(序列化);JSON.parse()
:把 JSON 字符串转为对象(反序列化)。
虽然过去也有人用 eval
来解析 JSON,但那样存在安全风险。现代开发中,应始终使用 JSON.parse
。
2.1 JSON.stringify
的序列化选项
过滤结果
序列化时可以选择保留部分字段:
css
const book = { title: "JS", edition: 2, author: "Kyle" };
// 只保留 title 和 edition
JSON.stringify(book, ["title", "edition"]);
// {"title":"JS","edition":2}
或者使用函数过滤:
javascript
JSON.stringify(book, (key, value) => {
if (key === "author") return undefined; // 删除 author
return value;
});
字符缩进
第三个参数可以用来美化输出:
javascript
JSON.stringify(book, null, 4);
// 缩进 4 个空格
JSON.stringify(book, null, "--");
// 每一行前加上 --
3. toJSON
方法
对象中可以自定义 toJSON
方法,控制序列化行为。
调用 JSON.stringify
时,会优先执行 toJSON
,然后再进入过滤和缩进逻辑。
javascript
const user = {
id: 1,
name: "Alice",
password: "secret",
toJSON() {
return { id: this.id, name: this.name }; // 主动隐藏密码
}
};
JSON.stringify(user, null, 2);
/*
{
"id": 1,
"name": "Alice"
}
*/
序列化顺序总结:
- 调用
toJSON
(若存在); - 应用过滤函数或白名单数组;
- 对结果逐一序列化;
- 根据缩进参数美化输出。
4. JSON.parse 的解析选项
JSON.parse
除了第一个参数(要解析的字符串),还可以接收一个还原函数(reviver):
javascript
const text = '{"createdAt":"2025-09-01T12:00:00Z"}';
const data = JSON.parse(text, (key, value) => {
if (key === "createdAt") {
return new Date(value); // 把字符串转回 Date 对象
}
return value;
});
console.log(data.createdAt instanceof Date); // true
这里的还原函数会遍历每个键值,如果返回 undefined
就删除该键,否则替换为返回值。
总结
JSON 的规则简单,但灵活性很高:
- 语法只支持 简单值、对象、数组 ,且必须遵守双引号、无
undefined
的限制; - 使用
JSON.stringify
可以灵活控制输出内容和格式; toJSON
方法允许对象自定义序列化方式;JSON.parse
可以借助还原函数恢复复杂类型。
理解这些,就能在日常开发中熟练处理数据传输、配置文件和存储操作。