JSON 介绍及使用方法

一、JSON 简介

JSON（JavaScript Object Notation，JavaScript 对象表示法）是一种轻量级的数据交换格式。它基于 ECMAScript（欧洲计算机协会制定的 js 规范）的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。

JSON 的特点：

1. 轻量级：相比于 XML，JSON 的数据体积更小

2. 易读性：结构清晰，易于人类阅读和编写

3. 易解析：机器解析和生成更容易

4. 语言无关：虽然源于 JavaScript，但已被多种语言支持

二、JSON 语法规则

JSON 由两种基本结构组成：

1. 键值对集合：在各种语言中被实现为对象、记录、字典等

2. 有序值列表：在大多数语言中被实现为数组、列表等

基本规则：

• 数据以键值对形式存在 "key": value

• 数据由逗号分隔 ,

• 大括号 {} 保存对象

• 中括号 [] 保存数组

• 字符串必须使用双引号 ""（不能使用单引号）

• 值可以是：

  • 字符串（在双引号中）

  • 数字（整数或浮点数）

  • 布尔值（true 或 false）

  • 数组（在中括号中）

  • 对象（在大括号中）

  • null

示例：

"name": "张三", "age": 30, "isStudent": false, "hobbies": ["读书", "游泳", "编程"], "address": { "city": "北京", "street": "朝阳路" }, "scores": [85, 92, 78], "graduate": null }

三、JSON 的使用方法

1. 在 JavaScript 中使用 JSON

将 JSON 字符串转换为 JavaScript 对象（解析）

const jsonString = '{"name":"李四","age":25}';
const obj = JSON.parse(jsonString);
console.log(obj.name); // 输出: 李四

将 JavaScript 对象转换为 JSON 字符串（序列化）

const person = {
  name: "王五",
  age: 28,
  isEmployed: true
};
const jsonString = JSON.stringify(person);
console.log(jsonString); // 输出: {"name":"王五","age":28,"isEmployed":true}

2. 在前端与后端交互中使用 JSON

发送 JSON 数据到服务器（AJAX 示例）

const data = {
  username: "user123",
  password: "securepassword"
};

fetch('https://api.example.com/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

从服务器接收 JSON 数据

fetch('https://api.example.com/products')
  .then(response => response.json())
  .then(products => {
    console.log(products);
    // 在这里处理产品数据
  })
  .catch(error => console.error('Error:', error));

3. 在 Node.js 中使用 JSON

读取 JSON 文件

const fs = require('fs');

fs.readFile('data.json', 'utf8', (err, data) => {
  if (err) throw err;
  const jsonData = JSON.parse(data);
  console.log(jsonData);
});

写入 JSON 文件

const fs = require('fs');

const data = {
  users: [
    { id: 1, name: "Alice" },
    { id: 2, name: "Bob" }
  ]
};

fs.writeFile('output.json', JSON.stringify(data, null, 2), (err) => {
  if (err) throw err;
  console.log('Data written to file');
});

四、JSON 的常见应用场景

1. 前后端数据交互：API 请求和响应通常使用 JSON 格式

2. 配置文件：许多应用程序使用 JSON 格式的配置文件

3. 数据存储：NoSQL 数据库如 MongoDB 使用类似 JSON 的格式存储数据

4. 跨平台通信：不同编程语言系统间的数据交换

五、JSON 的注意事项

1. 安全性：解析来自不可信来源的 JSON 数据时要注意安全性问题

2. 循环引用：对象中存在循环引用时，JSON.stringify() 会抛出错误

3. 数据类型限制：JSON 不支持 JavaScript 的所有数据类型（如函数、undefined）

4. 日期对象：JSON 没有日期类型，通常将日期转换为字符串

六、JSON 工具

1. JSON 验证工具：验证 JSON 格式是否正确

   • JSONLint

2. JSON 格式化工具：美化 JSON 数据使其更易读

3. 浏览器扩展：如 JSON Viewer 等

七、JSON 与 XML 比较

特性	JSON	XML
数据体积	更小	更大
解析难度	更简单	更复杂
可读性	较好	较好
数据类型支持	基本类型	可通过模式定义复杂类型
命名空间	不支持	支持
注释	不支持	支持

八、JSON 进阶用法

1. 使用 reviver 函数定制解析

const jsonStr = '{"name":"John","birth":"1985-04-12"}';
const obj = JSON.parse(jsonStr, (key, value) => {
  if (key === 'birth') return new Date(value);
  return value;
});
console.log(obj.birth.getFullYear()); // 1985

2. 使用 replacer 函数定制序列化

const user = {
  name: "John",
  age: 30,
  password: "secret"
};

const jsonStr = JSON.stringify(user, (key, value) => {
  if (key === 'password') return undefined; // 排除密码字段
  return value;
});
console.log(jsonStr); // {"name":"John","age":30}

3. 格式化 JSON 输出

const data = {
  name: "John",
  age: 30,
  hobbies: ["sports", "music"]
};

console.log(JSON.stringify(data, null, 2));
/*
输出:
{
  "name": "John",
  "age": 30,
  "hobbies": [
    "sports",
    "music"
  ]
}
*/

JSON 是现代 Web 开发中不可或缺的数据格式，掌握它的使用对于前后端开发都非常重要。