JSON 快速上手指南
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，基于 JavaScript 对象语法但独立于编程语言，具有易读、易解析、跨语言的特性，是前后端数据交互、配置文件、数据存储的首选格式。本文涵盖 JSON 核心语法、解析 / 序列化、实战示例及避坑指南，零基础也能快速掌握。
一、JSON 核心概念与语法规则

1. 什么是 JSON？
   JSON 不是编程语言，而是文本格式：
   源于 JavaScript 对象语法，但可被所有主流语言（Python/Java/PHP/Go 等）解析和生成；
   核心作用：在不同系统间传递数据（如前端 ↔ 后端）、存储结构化数据；
   相比 XML 更简洁、解析速度更快。
2. 严格语法规则（必须遵守，否则解析失败）
   JSON 语法极其严格，任何一点错误都会导致解析报错，核心规则：
   规则 说明 示例
   键名必须用双引号包裹 单引号 / 无引号均非法 ✅ "name": "张三" ❌ name: "张三" / 'name': "张三"
   值的类型有限制 仅支持：字符串（双引号）、数字、布尔值（true/false）、数组、对象、null ✅ "age": 20 / "isStudent": true ❌ "desc": undefined / "fn": function(){}"
   末尾不能有多余逗号 数组 / 对象最后一个元素后禁止加逗号 ✅ [1,2,3] ❌ [1,2,3,]
   禁止注释 标准 JSON 不支持 // 或 / / 注释（JSON5 扩展支持） ❌ "name": "张三", // 姓名
   根节点只能是对象 / 数组 不能直接是字符串 / 数字等基础类型 ✅ {"name":"张三"} / [1,2,3] ❌ "hello"
3. 合法 / 非法 JSON 示例
   json
   // ✅ 合法 JSON（标准格式）
   {
   "id": 1,
   "name": "张三",
   "age": 20,
   "isStudent": true,
   "hobbies": ["编程", "阅读"],
   "address": {
   "city": "北京",
   "district": "朝阳区"
   },
   "score": null
   }

// ❌ 非法 JSON（常见错误）
{
name: "张三", // 键名无双引号
'age': 20, // 键名单引号
"hobbies": ["编程", "阅读"], // 末尾多余逗号
"desc": undefined, // 不支持undefined
"sayHi": function() {} // 不支持函数
}
二、JSON 与 JavaScript 对象的区别
很多人混淆 JSON 和 JS 对象，核心区别如下：
特性 JSON JavaScript 对象
键名 必须双引号包裹 可省略 / 单引号 / 双引号
值类型 仅支持字符串、数字、布尔、数组、对象、null 支持所有 JS 类型（undefined、函数、日期等）
注释 不支持 支持 //// /
末尾逗号 禁止 部分浏览器允许（非标准）
本质 字符串（文本） 内存中的对象（数据结构）
javascript
运行
// JS 对象（内存中的数据）
const user = {
name: "张三", // 键名无引号
age: 20,
sayHi: function() { console.log("Hi"); } // 支持函数
};

// JSON 字符串（文本格式，需双引号、无函数）
const userJson = '{"name":"张三","age":20}';
三、JSON 解析与序列化（核心操作）
JSON 最常用的两个操作：
序列化：将 JS 对象 → JSON 字符串（JSON.stringify()）；
解析：将 JSON 字符串 → JS 对象（JSON.parse()）。

1. 原生 JavaScript 处理 JSON
   （1）序列化：JSON.stringify ()
   javascript
   运行
   // 基础用法：对象 → JSON 字符串
   const user = {
   name: "张三",
   age: 20,
   hobbies: ["编程", "阅读"],
   isStudent: true,
   address: { city: "北京" },
   // 以下类型会被忽略/转换
   sayHi: function() {}, // 函数：忽略
   desc: undefined, // undefined：忽略
   birthday: new Date() // 日期：转为字符串
   };

const jsonStr = JSON.stringify(user);
console.log(jsonStr);
// 输出：{"name":"张三","age":20,"hobbies":["编程","阅读"],"isStudent":true,"address":{"city":"北京"},"birthday":"2025-12-30T08:00:00.000Z"}

// 进阶用法：带参数（格式化+过滤）
// 参数2：replacer（过滤/修改值），参数3：space（缩进空格）
const formattedJson = JSON.stringify(user, ["name", "age", "hobbies"], 2);
console.log(formattedJson);
// 输出（格式化后）：
// {
// "name": "张三",
// "age": 20,
// "hobbies": [
// "编程",
// "阅读"
// ]
// }
（2）解析：JSON.parse ()
javascript
运行
// 基础用法：JSON 字符串 → JS 对象
const jsonStr = '{"name":"张三","age":20,"hobbies":["编程","阅读"]}';
const user = JSON.parse(jsonStr);
console.log(user.name); // 输出：张三
console.log(user.hobbies[0]); // 输出：编程

// 进阶用法：reviver（解析时修改值）
const jsonWithDate = '{"name":"张三","birthday":"2025-12-30T08:00:00.000Z"}';
const userWithDate = JSON.parse(jsonWithDate, (key, value) => {
// 将日期字符串转回 Date 对象
if (key === "birthday") return new Date(value);
return value;
});
console.log(userWithDate.birthday.getFullYear()); // 输出：2025

// 错误处理：解析非法 JSON 时捕获异常
try {
const invalidJson = '{"name":"张三",}'; // 末尾多余逗号
JSON.parse(invalidJson);
} catch (err) {
console.error("解析失败：", err.message); // 输出：Unexpected token } in JSON at position 12
}

1. 其他语言处理 JSON（简要示例）
   JSON 跨语言特性使其成为数据交换的通用格式，以下是主流语言的处理方式：
   （1）Python 处理 JSON
   python
   运行
   import json

序列化：字典 → JSON 字符串

user = {
"name": "张三",
"age": 20
}
json_str = json.dumps(user, ensure_ascii=False, indent=2)
print(json_str)

解析：JSON 字符串 → 字典

json_str = '{"name":"张三","age":20}'
user = json.loads(json_str)
print(user["name"]) # 输出：张三
（2）Java 处理 JSON（FastJSON 示例）
java
运行
import com.alibaba.fastjson2.JSON;
import com.alibaba.fastjson2.JSONObject;

public class JsonDemo {
public static void main(String[] args) {
// 序列化：对象 → JSON 字符串
User user = new User("张三", 20);
String jsonStr = JSON.toJSONString(user);
System.out.println(jsonStr);

    // 解析：JSON 字符串 → 对象
    String json = "{\"name\":\"张三\",\"age\":20}";
    User userObj = JSON.parseObject(json, User.class);
    System.out.println(userObj.getName());
}

static class User {
    private String name;
    private int age;
    // 构造方法、getter/setter 省略
}

}
四、JSON 实战示例（直接复制使用）

1. 场景 1：AJAX 前后端数据交互
   JSON 是前后端交互的标准格式，结合 Axios 示例：
   html
   预览
   <!DOCTYPE html>

// 方案1：手动过滤
const safeObj = JSON.parse(JSON.stringify(obj, (key, value) => {
if (key === "b") return undefined; // 过滤循环引用属性
return value;
}));

// 方案2：使用第三方库（如 json-stringify-safe）
// npm install json-stringify-safe
// const stringifySafe = require('json-stringify-safe');
// console.log(stringifySafe(obj));

1. 大 JSON 数据处理
   解析超大 JSON（如 100MB+）时，直接用 JSON.parse() 会阻塞主线程，解决方案：
   前端：使用流式解析库（如 @streamparser/json）；
   后端（Node.js）：使用 stream 模块分段解析。
2. 跨语言兼容注意事项
   数字精度：JSON 不支持 BigInt，超大数字（如 16 位以上）会丢失精度，需转为字符串传输；
   编码：确保 JSON 字符串为 UTF-8 编码（跨语言通用）；
   布尔值：严格区分 true/false（小写），避免 True/False（Python 易犯错误）。
   六、JSON 扩展：JSON5（兼容标准，更灵活）
   标准 JSON 语法严格，JSON5 是其超集，解决痛点：
   支持单行 / 多行注释；
   键名可省略引号；
   允许末尾逗号；
   支持单引号字符串；
   支持数字后缀（如 10_000）。
   示例（config.json5）：
   json5
   // config.json5（支持注释）
   {
   api: "https://api.example.com", // 键名无引号
   timeout: 5_000, // 数字分隔符
   themes: ['light', 'dark'], // 单引号
   features: {
   autoSave: true,
   }, // 末尾逗号
   / 多行注释 /
   version: "1.0.0"
   }
   前端使用需引入 JSON5 库：
   html
   预览
   
   
   七、核心总结
   JSON 是文本格式，不是编程语言，核心用于数据交换；
   语法严格：双引号键名、无注释、无多余逗号、值类型有限；
   核心操作：JSON.stringify()（序列化）、JSON.parse()（解析）；
   跨语言特性：所有主流语言均支持 JSON 解析 / 生成；
   避坑重点：解析失败先检查语法，序列化注意特殊值（undefined / 循环引用）。
   JSON 是前端 / 后端开发的必备技能，掌握其核心语法和处理方式，能高效解决数据交换、存储、配置等场景的问题。