什么是JSON数据格式

数据交换的"通用语言"

当前端和后端需要交换数据时，用什么格式？答案是 JSON。它是目前 Web 开发中最流行的数据格式，几乎所有 API 都在用它。

💡 类比：JSON 就像一种全世界程序员都看得懂的"数据普通话"。不管你用 JavaScript、Python 还是 Java，大家都能读写 JSON。

JSON = JavaScript Object Notation（JavaScript 对象表示法）

JSON 长什么样？

{
  "name": "张三",
  "age": 25,
  "isStudent": false,
  "skills": ["JavaScript", "Python", "React"],
  "address": {
    "city": "北京",
    "district": "朝阳区"
  }
}

看起来很直观对吧？就是键值对的集合。

JSON 的数据类型

JSON 只有 6 种数据类型：

JSON 的语法规则

// ✅ 正确的 JSON
{ "name": "张三", "age": 25 }

// ❌ 错误：用了单引号
{ 'name': '张三' }

// ❌ 错误：键名没有引号
{ name: "张三" }

// ❌ 错误：最后多了逗号
{ "name": "张三", "age": 25, }

// ❌ 错误：有注释
{ "name": "张三" /* 姓名 */ }

JSON 在实际开发中的使用

1. API 返回数据

几乎所有 API 都返回 JSON 格式：

// 获取 API 数据（返回 JSON）
const response = await fetch("/api/user/123");
const user = await response.json();  // 解析 JSON
console.log(user.name);  // "张三"

2. 发送数据给服务器

// 发送 JSON 数据
await fetch("/api/articles", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",  // 告诉服务器：我发的是JSON
  },
  body: JSON.stringify({  // 将对象转为 JSON 字符串
    title: "我的文章",
    content: "文章内容...",
  }),
});

3. 配置文件

很多项目的配置文件都是 JSON 格式：

// package.json — Node.js 项目配置
{
  "name": "my-project",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build"
  },
  "dependencies": {
    "next": "^14.0.0",
    "react": "^18.0.0"
  }
}

// tsconfig.json — TypeScript 配置
{
  "compilerOptions": {
    "target": "es5",
    "strict": true
  }
}

JSON.stringify 和 JSON.parse

在 JavaScript 中，有两个核心方法用于 JSON 转换：

// 对象 → JSON 字符串
const user = { name: "张三", age: 25 };
const jsonStr = JSON.stringify(user);
console.log(jsonStr);  // '{"name":"张三","age":25}'

// JSON 字符串 → 对象
const parsed = JSON.parse(jsonStr);
console.log(parsed.name);  // "张三"

// 格式化输出（便于阅读）
const pretty = JSON.stringify(user, null, 2);
console.log(pretty);
// {
//   "name": "张三",
//   "age": 25
// }

JSON vs 其他数据格式

// JSON 格式
{
  "name": "张三",
  "age": 25,
  "skills": ["JS", "Python"]
}

<!-- XML 格式（同样的数据） -->
<person>
  <name>张三</name>
  <age>25</age>
  <skills>
    <skill>JS</skill>
    <skill>Python</skill>
  </skills>
</person>

# YAML 格式（同样的数据）
name: 张三
age: 25
skills:
  - JS
  - Python

嵌套JSON：复杂数据结构

真实 API 返回的数据通常有多层嵌套：

{
  "code": 200,
  "message": "success",
  "data": {
    "total": 100,
    "page": 1,
    "articles": [
      {
        "id": 1,
        "title": "学习JSON",
        "author": {
          "name": "张三",
          "avatar": "https://example.com/avatar.jpg"
        },
        "tags": ["前端", "基础"]
      }
    ]
  }
}

访问嵌套数据：

const res = await fetch("/api/articles");
const result = await res.json();

// 访问嵌套数据
const firstArticle = result.data.articles[0];
console.log(firstArticle.title);         // "学习JSON"
console.log(firstArticle.author.name);   // "张三"
console.log(firstArticle.tags[0]);       // "前端"

🎯 AI编程小贴士：拿到一个复杂的 JSON 数据不知道怎么取值？把 JSON 数据发给 AI，告诉它你想取哪个字段，它会帮你写出准确的访问路径。

小结

• JSON 是 Web 开发中最通用的数据交换格式
• 只有 6 种数据类型：字符串、数字、布尔值、null、对象、数组
• 键名和字符串必须用双引号，不能有注释和尾随逗号
• JSON.stringify() 将对象转为字符串，JSON.parse() 将字符串转为对象
• package.json、tsconfig.json 等配置文件都是 JSON 格式