JSON

你可能会说

AI 返回给我的那种大括号套小括号的数据，怎么读、怎么写？

JSON 是软件之间传递成组信息时常用的一种文本写法。例如天气服务可以把城市、温度和天气状态按 JSON 格式发给页面，页面再把对应内容显示出来。它能把文字、数字、列表和真假状态放在一起；收到后仍要检查内容是否齐全、是否正确。
先知道
HTTP
也常被叫作JSON 数据JavaScript Object Notation
{
  "name": "按钮 Button",
  "price": 0,
  "free": true,
  "tags": ["通用", "表单"]
}

什么时候用

  • 拿到 API 返回先整体看结构，再决定取哪层
    { "data": { "list": [ … ] } }先确认整体结构，再按层级读取字段
  • 数组是有序值列表，常可循环渲染成 列表 List；先确认每项结构是否一致
    [{…}"文本"42]
    有序 JSON 值列表；是否同构要看接口约定
  • 嵌套就一层层往里取：data.user.name
    data→user→name
    嵌套字段需要按层级读取
  • 压缩后的内容难以阅读时，可用可信的格式化工具增加缩进；敏感数据不要粘贴到未知网站
    {"a":1,"b":[2,3]}→格式化

什么时候不用

  • 键名忘加双引号：JS 行，JSON 不行
    { name: "小林" }键名缺少双引号，无法按 JSON 解析
  • 最后一项后面多一个逗号：解析直接报错
    [ "a", "b", ]JSON 不允许最后一项后保留尾随逗号
  • 用单引号包字符串：JSON 只认双引号
    { 'name': '小林' }JSON 的键和字符串必须使用双引号
  • 按 JavaScript 对象的写法加入注释：标准 JSON 不支持注释
    { // 注释 "a": 1 }JSON 不支持注释
组成结构 · Anatomy
{
  "tags": ["通用", "表单"]
}
一对花括号包起来的整体，描述「一个东西」
冒号左边的名字，必须双引号
方括号包起来的有序列表，渲染 列表 List 就靠它
冒号右边的内容：字符串、数字、布尔、对象、数组
常见变体 · Variants
对象Object
{ "name": "按钮", "price": 0 }
花括号包键值对，描述一个东西
数组Array
[ "通用", "表单", "反馈" ]
方括号包列表，顺序有意义
嵌套Nested
{ "user": { "roles": […] } }
对象套数组，真实数据都这样
典型使用场景
Network 面板看返回
HeadersPreviewResponse
▾ data: {…}
▾ list: [3]
▾ 0: {name: "按钮 Button", price: 0}
▾ 1: {name: "输入框 Input", price: 0}
▸ 2: {…}
total: 42
Preview 帮你把 JSON 排成可折叠的树
编辑器里的 data.json
data.json
{
  "site": "Vibe 图鉴",
  "stats": {
    "components": 48,
    "online": true
  },
  "tags": ["通用", "表单"]
}
JSON 校验报错
1  {
2    "name": "按钮",
3    "tags": ["通用",],
4  }
✕ 第 3 行：数组最后一项后面多了逗号
终端 jq 美化输出
$ curl -s https://api.vibeui.dev/user/1 | jq
{
  "id": 1,
  "name": "林小狐",
  "roles": [
    "admin",
    "editor"
  ]
}
# jq 将压缩 JSON 格式化为带缩进的结构
延伸阅读 · 权威出处
使用 JSON 数据MDN ↗