【js篇】对 JSON 的理解：前后端数据交换的桥梁在现代 Web 开发中，JSON（JavaScript Object

在现代 Web 开发中，JSON（JavaScript Object Notation） 是一种非常重要的数据交换格式，广泛用于前后端之间的数据传输。它以轻量、易读、跨语言的特点，成为 RESTful API 和前后端通信的标准格式。

✅ 一句话总结

JSON 是一种轻量级的数据交换格式，基于文本、易于解析，广泛用于前后端之间传递结构化数据。虽然语法源自 JavaScript，但它是独立于编程语言的通用格式。

✅ 一、JSON 是什么？

🔹 定义：

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，基于文本，易于人阅读和编写，也易于机器解析和生成。

🔹 特点：

基于文本（不是二进制）
支持多种数据类型（字符串、数字、布尔值、数组、对象、null）
跨语言支持（几乎所有编程语言都支持 JSON）
语法结构清晰，适合结构化数据的传输

✅ 二、JSON 的基本语法结构

🔹 1. 键值对（对象）

{
  "name": "Tom",
  "age": 25,
  "isStudent": false
}

键名必须用双引号括起来；
值可以是字符串、数字、布尔值、对象、数组、null；
不允许函数、undefined、NaN 等 JavaScript 特有值；

🔹 2. 数组

[
  { "name": "Tom", "age": 25 },
  { "name": "Jerry", "age": 30 }
]

数组元素可以是任意合法的 JSON 值；
支持嵌套结构；

✅ 三、JSON 与 JavaScript 对象的区别

特性	JSON	JavaScript 对象
键名	必须用双引号包裹	可以用单引号或无引号
值类型	仅支持：字符串、数字、布尔值、对象、数组、null	支持函数、undefined、NaN、Symbol 等
可执行性	不能包含函数或表达式	可以包含函数和表达式
用途	数据传输、存储	程序逻辑处理
是否可执行	不可执行	可执行

📌 举例说明：

// JavaScript 对象
const obj = {
  name: "Tom",
  sayHello: function() { console.log("Hello"); },
  age: NaN
};

// JSON 格式（不合法）
{
  "name": "Tom",
  "sayHello": function() {}, // ❌ 不允许
  "age": NaN // ❌ 不允许
}

✅ 四、JavaScript 中 JSON 的常用操作

🔹 1. `JSON.stringify()`：将 JS 对象转换为 JSON 字符串

const obj = {
  name: "Tom",
  age: 25,
  isStudent: false
};

const jsonStr = JSON.stringify(obj);
console.log(jsonStr);
// 输出：{"name":"Tom","age":25,"isStudent":false}

特殊值处理：

JS 值	JSON.stringify 输出
`undefined`	被忽略
`function`	被忽略
`Symbol`	被忽略
`NaN` / `Infinity`	转换为 `null`

🔹 2. `JSON.parse()`：将 JSON 字符串解析为 JS 对象

const jsonStr = '{"name":"Tom","age":25,"isStudent":false}';
const obj = JSON.parse(jsonStr);
console.log(obj.name); // Tom

📌 注意：

如果传入的字符串不是标准 JSON 格式，会抛出错误；
适合用于从后端接口接收到的数据解析；

✅ 五、JSON 在项目中的典型应用场景

🔹 1. 前后端数据交互

前端发送请求时，将 JS 对象通过 JSON.stringify() 转换为 JSON 字符串；
后端接收后解析为语言对应的结构（如 Java 的 Map、Python 的 dict）；
后端返回数据时也以 JSON 格式发送；
前端通过 JSON.parse() 将其还原为 JS 对象进行处理；

🔹 2. 本地数据存储

使用 localStorage 或 sessionStorage 存储复杂数据结构时，需要先转换为 JSON 字符串；
示例：

localStorage.setItem("user", JSON.stringify({ name: "Tom", age: 25 }));
const user = JSON.parse(localStorage.getItem("user"));

🔹 3. 配置文件

JSON 也常用于配置文件（如 package.json、webpack.config.json）；
结构清晰、易于读写；

✅ 六、一句话总结

JSON 是一种轻量、通用、结构清晰的数据交换格式，广泛用于前后端通信、数据存储和配置管理。虽然语法上与 JavaScript 对象相似，但它是独立的语言无关格式，使用时要注意值类型的限制。

💡 进阶建议

使用 try...catch 处理 JSON.parse() 的异常；
使用 JSON.stringify() 的第三个参数进行格式化输出；
使用 JSON Schema 验证 JSON 数据结构；
在 Vue、React 中使用 JSON 作为组件通信或状态管理的数据格式；
使用在线工具如 JSONLint 校验 JSON 格式；

【js篇】对 JSON 的理解：前后端数据交换的桥梁