JavaScript JSON知识点汇总
编程小白也能看懂的JSON详细指南，包含基础概念、使用方法和实际示例
1. 什么是JSON？
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。它基于JavaScript的一个子集，但完全独立于编程语言。
💡 简单理解：JSON是一种用于存储和传输数据的文本格式，就像快递单一样，让不同系统之间可以轻松传递数据。
JSON的主要特点：
- 易于人阅读和编写
- 易于机器解析和生成
- 完全独立于语言（几乎所有编程语言都支持JSON）
- 通常用于Web应用中服务器和客户端之间的数据交换
为什么需要JSON？
在Web开发中，浏览器（客户端）和服务器需要交换数据。JSON提供了一种简单、标准化的格式，使得数据交换变得简单高效。
2. JSON的基本结构
JSON数据由两种基本结构组成：
对象（Object）
用花括号{}包裹，包含多个键值对（key: value pairs）。键必须是字符串，值可以是JSON支持的任何数据类型。
{
"name": "张三",
"age": 28,
"isStudent": false,
"hobbies": ["读书", "旅行", "摄影"],
"address": {
"city": "北京",
"street": "朝阳路"
}
}
数组（Array）
用方括号[]包裹，包含多个值（可以是不同类型），值之间用逗号分隔。
[
"苹果",
"香蕉",
"橙子",
123,
true,
null
]
📌 重要规则：
- 键名必须用双引号包裹（单引号无效）
- 字符串值必须用双引号包裹
- 最后一个元素后面不能有逗号
3. JSON支持的数据类型
字符串（String）
"Hello, World!"
必须用双引号包裹
数字（Number）
45 3.14 -10
整数、小数、负数都可以
布尔值（Boolean）
true false
只有这两个值
空值（null）
null
表示空值
对象（Object）
{"name": "李四", "age": 30}
键值对集合
数组（Array）
[1, 2, "three", true]
有序的值列表
🚫 JSON不支持的类型：函数(function)、日期(Date)、undefined等，这些类型在转换时会丢失或被处理为null。
4. 在JavaScript中使用JSON
JavaScript提供了两个处理JSON的核心方法：
JSON.parse() – 解析JSON字符串
将JSON字符串转换为JavaScript对象（从字符串到对象）
const jsonString = '{"name": "王五", "age": 25}';
const person = JSON.parse(jsonString);
console.log(person.name); // 输出: 王五
console.log(person.age); // 输出: 25
JSON.stringify() – 转换为JSON字符串
将JavaScript对象转换为JSON字符串（从对象到字符串）
const personObj = {
name: "赵六",
age: 32,
isEmployed: true
};
const jsonStr = JSON.stringify(personObj);
console.log(jsonStr);
// 输出: {"name":"赵六","age":32,"isEmployed":true}
🔍 实用技巧：
JSON.stringify()可以接受两个额外参数：replacer函数（转换结果）和space（缩进空格数）- 使用
JSON.parse(JSON.stringify(obj))可以创建对象的深拷贝
5. 常见错误和注意事项
常见错误：
SyntaxError: Unexpected token– JSON格式错误（如缺少逗号、引号）TypeError: Converting circular structure to JSON– 对象存在循环引用- 使用单引号而不是双引号
- 最后一个属性后面多了一个逗号
注意事项：
- JSON.stringify()会忽略函数和undefined属性
- 日期对象会被转换为ISO格式的字符串
- JSON不支持注释（在JSON中添加注释会报错）
- JSON文件通常以.json作为扩展名
✅ 最佳实践：
- 使用JSON验证工具（如JSONLint）检查JSON格式
- 在AJAX请求中，使用JSON作为数据交换格式
- 在复杂应用中使用try-catch处理JSON解析错误
6. JSON实际应用场景
🌐 AJAX请求
从服务器获取数据：
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data));
📝 配置文件
存储应用配置：
// config.json
{
"apiUrl": "https://api.example.com",
"maxItems": 50,
"features": {
"darkMode": true,
"notifications": false
}
}
💾 本地存储
在浏览器中存储数据：
// 存储
const userSettings = { theme: 'dark', fontSize: 16 };
localStorage.setItem('settings',
JSON.stringify(userSettings));
// 读取
const settings = JSON.parse(
localStorage.getItem('settings'));
📤 API通信
发送数据到服务器：
const newUser = {
name: '钱七',
email: 'qian@example.com'
};
fetch('https://api.example.com/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(newUser)
});
7. JSON与其他数据格式
了解JSON与其他常见数据格式的关系：
JSON vs XML
JSON更轻量、更易读：
// JSON
{"person": {"name": "张三", "age": 30}}
// XML
<person>
<name>张三</name>
<age>30</age>
</person>
JSON vs JavaScript对象
JSON是字符串，JS对象是数据结构：
// JSON字符串（文本）
'{"name": "李四"}'
// JavaScript对象（数据结构）
{ name: "李四" }
总结：JSON核心要点
键必须用双引号
字符串值用双引号
不支持注释
JSON.parse() 解析
JSON.stringify() 转换
数据交换格式
轻量级
跨语言
键值对结构
🎓 学习建议：
- 熟练掌握JSON.parse()和JSON.stringify()的使用
- 使用在线JSON验证工具检查你的JSON格式
- 在Chrome开发者工具中练习JSON的解析和序列化
- 尝试创建自己的JSON配置文件并在项目中读取