Skip to content

JSON

学习 JSON——API 在客户端与服务器间交换数据所用的数据格式。

你将学到

  • JSON 是什么、为何取代了 XML
  • JSON 的六种数据类型与语法规则
  • 如何在 JavaScript 里解析和序列化 JSON
  • 常见坑：尾逗号、单引号等

概念讲解

JSON

JSON（JavaScript Object Notation，JavaScript 对象表示法）是一种轻量、基于文本的数据交换格式。它是 Web API 的通用语——服务器给浏览器发数据时几乎都用 JSON。尽管名字带 JavaScript，JSON 其实与语言无关，几乎所有语言都能读写。

语法与类型

JSON 由六种数据类型构建：

{
  "name": "Ada",           // 字符串（必须双引号）
  "age": 36,               // 数字
  "isAdmin": true,         // 布尔
  "spouse": null,          // null
  "hobbies": ["math", "code"],  // 数组
  "address": {             // 对象
    "city": "London",
    "zip": "NW1"
  }
}

严格规则

JSON 比 JavaScript 对象字面量更严格：

  • 键必须用双引号。 单引号非法。
  • 字符串必须用双引号。 不能用单引号。
  • 不能有尾逗号。 {"a": 1,} 是语法错误。
  • 不能有注释。 // 和 /* */ 都不允许。
  • 不能有函数或 undefined。 只有数据，没有代码。

这些规则让 JSON 解析无歧义，也让初学者把 JS 语法粘进 JSON 文件时频频踩坑。

在 JavaScript 里解析

const text = '{"name": "Ada", "age": 36}';
const obj = JSON.parse(text);     // 字符串 → 对象
console.log(obj.name);            // "Ada"

const json = JSON.stringify(obj); // 对象 → 字符串

JSON.parse 遇到非法语法会抛错，处理不可信输入时要包 try/catch。

JSON 为何胜出

JSON 取代 XML 用于 API，因为它更小（无闭合标签）、更快解析、且直接映射到程序员常用的对象和数组。它并非样样都强——混合内容的文档 XML 仍占优——但数据交换领域，JSON6JSON 是默认选择。

示例代码

              // 典型的 API JSON 响应
const apiResponse = `{
  "users": [
    { "id": 1, "name": "Ada", "role": "admin" },
    { "id": 2, "name": "Grace", "role": "editor" }
  ],
  "total": 2,
  "page": 1
}`;

// 解析并使用
const data = JSON.parse(apiResponse);
const adminNames = data.users
  .filter(u => u.role === "admin")
  .map(u => u.name);

console.log(adminNames);  // ["Ada"]

// 转回 JSON（带美化缩进）
const pretty = JSON.stringify(data, null, 2);
console.log(pretty);

JSON.parse 把字符串变成可用普通数组方法操作的 JavaScript 对象。JSON.stringify 带缩进参数生成可读的美化 JSON。

动手试一试

常见错误

错误写法

在 JSON 里用单引号或尾逗号。

正确做法

JSON 要求键和字符串用双引号，且禁止尾逗号。用 JSON 校验器查错——错误信息会指向精确位置。

错误写法

对不可信输入直接 JSON.parse 而不 try/catch。

正确做法

JSON.parse 遇到非法语法会抛错。包 try/catch 优雅处理，否则整个应用会因畸形输入崩溃。

相关资源

相关速查表

相关指南

练习 JSON

2 个练习

练习 JSON

查阅不认识的术语

新手友好的术语表用大白话解释编程术语——变量、函数、DOM、Promise 等等。

查看术语表

动手做项目

通过引导式项目应用所学，含起始代码与解决方案。

查看项目

解读错误信息

用大白话解释常见错误——什么意思、为什么发生、如何修复。

查看错误