JSON基础教程

JavaScript对象表示法

JavaScript Object Notation

一种轻量级的数据交换格式

什么是JSON？

定义

  • 轻量级数据交换格式
  • 基于JavaScript对象语法
  • 独立于语言存在
  • 易于人阅读和编写
  • 易于机器解析和生成

应用场景

  • Web API数据传输
  • 配置文件
  • 数据存储
  • 前后端通信
  • 跨语言数据交换

JSON语法规则

基本规则：

  • 数据以键值对形式表示: "name": "张三"
  • 数据由逗号分隔
  • 大括号 {} 保存对象
  • 方括号 [] 保存数组
  • 必须使用双引号包裹字符串和键名

有效的JSON：

{
  "name": "张三",
  "age": 30,
  "isStudent": false,
  "courses": ["语文", "数学"]
}

无效的JSON：

{
  name: "张三",  // 没有引号包裹键名
  'age': 30,    // 使用单引号
  isStudent: false,  // 没有引号包裹键名
  // 这是注释  // JSON不允许注释
}

JSON支持的数据类型

字符串

"Hello, World!"

必须使用双引号

数字

42, 3.14, -1

整数或浮点数

布尔值

true, false

只有true和false

对象

{ "key": "value" }

键值对的集合

数组

[1, 2, "three"]

有序的值列表

null

null

表示空值

JSON不支持的类型：

  • 函数
  • 日期对象
  • undefined
  • 注释
  • 正则表达式
  • 循环引用

JSON vs JavaScript对象

JavaScript对象

// JavaScript对象
const person = {
  name: "张三",      // 键可以不带引号
  age: 30,
  isStudent: false,
  sayHello: function() {  // 可以包含函数
    return "你好！";
  },
  birthday: new Date(),  // 可以包含日期对象
  address: undefined    // 可以使用undefined
};

JSON

// JSON格式
{
  "name": "张三",    // 键必须带双引号
  "age": 30,
  "isStudent": false,
  "courses": [      // 不能包含函数
    "语文", 
    "数学"
  ],
  "birthday": "2000-01-01",  // 日期必须转为字符串
  "address": null   // 用null代替undefined
}

相互转换

对象 → JSON字符串

JSON.stringify(对象, null, 2)

JSON字符串 → 对象

JSON.parse(字符串)

复杂JSON示例

{
  "员工": [
    {
      "姓名": "张三",
      "年龄": 30,
      "职位": "前端开发",
      "技能": ["HTML", "CSS", "JavaScript"],
      "联系方式": {
        "电话": "13812345678",
        "邮箱": "zhangsan@example.com",
        "地址": {
          "城市": "北京",
          "街道": "朝阳区科技路100号"
        }
      },
      "项目": [
        {
          "名称": "电商网站",
          "完成度": 0.8,
          "负责模块": ["用户界面", "购物车"]
        },
        {
          "名称": "后台管理系统",
          "完成度": 0.6,
          "负责模块": ["数据可视化"]
        }
      ],
      "在职": true
    },
    {
      "姓名": "李四",
      "年龄": 28,
      "职位": "后端开发",
      "技能": ["Java", "Spring", "MySQL"],
      "联系方式": {
        "电话": "13987654321",
        "邮箱": "lisi@example.com",
        "地址": null
      },
      "项目": [],
      "在职": true
    }
  ],
  "公司信息": {
    "名称": "科技有限公司",
    "成立时间": "2010-01-01",
    "员工数量": 50,
    "地址": "北京市海淀区"
  }
}

结构特点

  • 多层嵌套对象
  • 对象内包含数组
  • 数组内包含对象
  • 不同数据类型混合使用
  • 相同结构的数据项组成数组

实际应用

  • REST API响应数据
  • 配置文件
  • 数据库导出文件
  • 微服务间通信

JSON常见错误

语法错误

{
  "name": "张三",
  "age": 30,  // 注释不允许
  'job': "程序员",  // 单引号不允许
  skills: ["JS", "CSS"],  // 键需要引号
  "salary": 10000,  // 末尾多余的逗号
}
  • 使用单引号而非双引号
  • 键名没有使用引号
  • 使用了注释
  • 最后一项后有多余的逗号
  • 缺少大括号或方括号闭合

数据类型错误

{
  "name": "张三",
  "getData": function() {  // 函数不允许
    return "数据";
  },
  "time": new Date(),  // 日期对象不允许
  "empty": undefined,  // undefined不允许
  "regex": /test/g  // 正则表达式不允许
}
  • 包含函数
  • 使用日期对象
  • 使用undefined值
  • 使用正则表达式
  • 包含循环引用

解决方案

验证工具

  • 使用在线JSON验证器（如jsonlint.com）
  • 使用代码编辑器内置的JSON验证
  • 利用JSON.parse()捕获错误

最佳实践

  • 使用JSON.stringify()生成JSON
  • 日期转换为ISO字符串
  • 用null代替undefined
  • 注意键名和字符串使用双引号

JSON应用场景

API通信

REST API的标准数据格式

// API请求
fetch('/api/users')
  .then(response => response.json())
  .then(data => console.log(data))

配置文件

用于各类应用配置

// package.json
{
  "name": "my-app",
  "version": "1.0.0",
  "dependencies": {
    "react": "^18.0.0"
  }
}

数据存储

轻量级数据存储

// localStorage存储
localStorage.setItem('user', 
  JSON.stringify({
    name: '张三',
    loggedIn: true
  })
);

数据导入/导出

系统间数据交换

// 数据导出
const exportData = () => {
  const data = JSON.stringify(records);
  download('data.json', data);
}

跨语言通信

不同编程语言间的桥梁

// Python处理JSON
import json

with open('data.json') as f:
    data = json.load(f)
    
print(data['name'])

NoSQL数据库

MongoDB等文档数据库

// MongoDB查询
db.users.find({
  age: { $gt: 30 },
  skills: "JavaScript"
})
1 / 8