返回博客
技术教程 2026-09-18

JSON 完全指南:前端开发者必备的数据格式知识

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,由 Douglas Crockford 于 2001 年提出。它基于 JavaScript 的对象字面量语法,但独立于编程语言,几乎所有现代编程语言都支持 JSON 的解析和生成。如今,JSON 已经成为 Web API 数据传输的事实标准。

一、JSON 基础语法

1. 数据结构

JSON 只有两种数据结构:

  • 对象(Object):键值对的无序集合,用花括号 {} 包裹
  • 数组(Array):值的有序集合,用方括号 [] 包裹

2. 数据类型

JSON 支持以下 6 种数据类型:

  • 字符串(String):用双引号包裹,如 "hello"
  • 数字(Number):整数或浮点数,如 42、3.14
  • 布尔值(Boolean):true 或 false
  • 空值(Null):null
  • 对象(Object):如 {"name": "张三"}
  • 数组(Array):如 [1, 2, 3]

3. 完整示例

{
  "name": "张三",
  "age": 25,
  "isStudent": false,
  "hobbies": ["读书", "游泳", "编程"],
  "address": {
    "city": "北京",
    "district": "朝阳区",
    "zipCode": "100000"
  },
  "scores": [
    {"subject": "数学", "score": 95},
    {"subject": "英语", "score": 88}
  ],
  "remark": null
}

二、JSON 与 JavaScript 对象的区别

虽然 JSON 源于 JavaScript,但它们有一些重要区别:

  • 键名必须用双引号:JSON 中对象的键必须用双引号包裹,JavaScript 对象可以省略或用单引号
  • 不支持注释:JSON 标准不支持注释(// 或 /* */),JavaScript 对象支持
  • 不支持函数和方法:JSON 只能存储数据,不能包含函数,JavaScript 对象可以
  • 不支持 undefined:JSON 中没有 undefined,未定义的值应该用 null 或省略
  • 不支持单引号字符串:JSON 字符串必须用双引号,JavaScript 可以用单引号

三、JSON 的解析与序列化

1. JavaScript 中的 JSON 处理

JavaScript 提供了内置的 JSON 对象:

  • JSON.parse(text) — 将 JSON 字符串解析为 JavaScript 对象
  • JSON.stringify(value) — 将 JavaScript 对象序列化为 JSON 字符串

示例:

// 解析 JSON 字符串
const jsonStr = '{"name": "张三", "age": 25}';
const obj = JSON.parse(jsonStr);
console.log(obj.name); // 张三

// 序列化为 JSON 字符串
const user = { name: "李四", age: 30 };
const json = JSON.stringify(user);
console.log(json); // {"name":"李四","age":30}

2. 格式化输出

JSON.stringify 支持第二个和第三个参数用于格式化输出:

// 缩进 2 个空格
const pretty = JSON.stringify(user, null, 2);

// 使用制表符缩进
const tabbed = JSON.stringify(user, null, '\t');

3. 替换函数

第二个参数可以是一个函数,用于在序列化过程中转换值:

const json = JSON.stringify(user, (key, value) => {
  if (key === 'password') return undefined; // 排除密码字段
  return value;
});

四、常见问题与解决方案

1. JSON 语法错误

最常见的 JSON 错误包括:

  • 键名没有用双引号
  • 字符串用了单引号
  • 末尾多了逗号(trailing comma)
  • 包含注释
  • 使用了 undefined 或 NaN

使用 JSON 格式化工具可以快速定位语法错误的具体位置和原因。

2. 大数字精度丢失

JavaScript 的数字是 64 位浮点数,安全整数范围是 -2^53 到 2^53。如果 JSON 中包含超过这个范围的大整数(如雪花算法生成的 ID),解析时会丢失精度。解决方案是将大数字作为字符串传输,或使用特殊的 JSON 解析库。

3. 循环引用

如果 JavaScript 对象中存在循环引用(对象 A 引用 B,B 又引用 A),JSON.stringify 会抛出 TypeError。解决方案是使用替换函数检测并处理循环引用,或使用支持循环引用的库。

4. 日期处理

JSON 没有日期类型,日期通常被序列化为 ISO 8601 字符串(如 "2026-09-20T12:00:00.000Z")。解析后需要手动用 new Date() 转换回日期对象。

五、JSON 最佳实践

1. 命名规范

  • 键名使用小驼峰(camelCase)或下划线(snake_case),保持一致
  • 键名使用有意义的英文单词,避免拼音和缩写
  • 布尔值的键名以 is、has、can 等开头

2. 数据结构设计

  • 保持结构扁平,避免过深的嵌套
  • 数组中的元素保持相同的结构
  • 使用 null 表示空值,不要用空字符串或 0 代替
  • 枚举值使用字符串而不是数字,提高可读性

3. API 设计

  • 统一响应格式:包含 code、message、data 字段
  • 分页数据使用统一的结构:list、total、page、pageSize
  • 错误信息使用人类可读的描述
  • 时间戳使用毫秒级或 ISO 8601 格式,在文档中说明

六、常用 JSON 工具

1. JSON 格式化工具

在线 JSON 格式化工具可以美化、压缩、验证 JSON 数据,支持树视图和代码视图切换,是开发和调试 API 的必备工具。Toolso 的在线 JSON 格式化工具还支持字号、主题、颜色自定义,提升阅读体验。

2. JSON 校验

JSON Schema 是一种用于描述和校验 JSON 数据结构的规范,可以定义字段类型、必填项、取值范围等,用于 API 数据验证。

3. JSON 与其他格式转换

JSON 可以与 CSV、XML、YAML 等格式互相转换。JSON CSV 转换工具支持双向转换,自动处理嵌套对象,适用于数据交换和 Excel 导入导出。

结语

JSON 是每个前端开发者必须掌握的基础知识。本文介绍了 JSON 的语法、解析与序列化、常见问题、最佳实践等内容,希望帮助您彻底掌握 JSON。在日常开发中,善用 JSON 格式化工具可以提高调试效率,减少低级错误。

相关工具推荐

JSON 格式化 JSON CSV 转换 正则测试