JSON.parse() 完全指南
JavaScript小白也能理解的JSON解析方法详解
什么是JSON.parse()？
JSON.parse() 是JavaScript中一个内置的方法，它的作用是将一个JSON格式的字符串转换成对应的JavaScript对象。
简单来说：当你从服务器获取数据或从文件中读取数据时，数据通常是以JSON字符串的形式存在的。JSON.parse()就是把这个字符串”变回”JavaScript可以操作的对象。
举个例子：
// JSON字符串（注意：属性名必须用双引号）
const jsonString = ‘{“name”: “张三”, “age”: 25, “isStudent”: true}’;
// 使用JSON.parse()转换为JavaScript对象
const person = JSON.parse(jsonString);
console.log(person.name); // 输出: 张三
console.log(person.age); // 输出: 25
const jsonString = ‘{“name”: “张三”, “age”: 25, “isStudent”: true}’;
// 使用JSON.parse()转换为JavaScript对象
const person = JSON.parse(jsonString);
console.log(person.name); // 输出: 张三
console.log(person.age); // 输出: 25
为什么需要JSON.parse()？
在Web开发中，数据通常需要在客户端（浏览器）和服务器之间传递。但网络传输只能发送字符串，不能直接发送JavaScript对象。
所以我们需要：
- 在发送数据时：使用
JSON.stringify()将对象转为JSON字符串 - 在接收数据时：使用
JSON.parse()将JSON字符串转回对象
| 传输过程 | 发送方 | 传输内容 | 接收方 |
|---|---|---|---|
| 发送数据 | 对象 → JSON字符串 | 字符串 | JSON字符串 → 对象 |
| 示例 | {name: “张三”} → ‘{“name”:”张三”}’ | ‘{“name”:”张三”}’ | ‘{“name”:”张三”}’ → {name: “张三”} |
JSON.parse()的基本语法
JSON.parse(text)
JSON.parse(text, reviver)
JSON.parse(text, reviver)
参数说明：
text：必需，要解析的有效JSON字符串
reviver：可选，一个转换结果的函数，用来修改解析生成的原始值（后面会详细解释）
返回值：
返回解析后的JavaScript对象或数组
基础用法示例
// 解析JSON字符串为对象
const obj = JSON.parse(‘{“name”:”李四”,”age”:30}’);
console.log(obj.name); // 输出: 李四
// 解析JSON字符串为数组
const arr = JSON.parse(‘[1, 2, 3, true, “hello”]’);
console.log(arr[0]); // 输出: 1
const obj = JSON.parse(‘{“name”:”李四”,”age”:30}’);
console.log(obj.name); // 输出: 李四
// 解析JSON字符串为数组
const arr = JSON.parse(‘[1, 2, 3, true, “hello”]’);
console.log(arr[0]); // 输出: 1
JSON字符串的格式要求
JSON字符串必须符合严格的格式要求，否则解析会失败：
- 所有字符串必须使用双引号（单引号无效）
- 属性名称必须用双引号包裹
- 不能包含注释
- 不能有尾随逗号
- 支持的数据类型：对象、数组、字符串、数字、布尔值、null
有效与无效JSON对比
// 有效的JSON字符串
‘{“name”: “王五”, “age”: 28}’
// 无效的JSON字符串（属性名没用双引号）
‘{name: “王五”, age: 28}’
// 无效的JSON字符串（用了单引号）
“{‘name’: ‘王五’}”
// 无效的JSON字符串（有尾随逗号）
‘{“name”: “王五”, “hobbies”: [“篮球”,”阅读”,],}’
‘{“name”: “王五”, “age”: 28}’
// 无效的JSON字符串（属性名没用双引号）
‘{name: “王五”, age: 28}’
// 无效的JSON字符串（用了单引号）
“{‘name’: ‘王五’}”
// 无效的JSON字符串（有尾随逗号）
‘{“name”: “王五”, “hobbies”: [“篮球”,”阅读”,],}’
小贴士：如果遇到复杂的JSON字符串，可以使用在线JSON验证工具检查格式是否正确
错误处理
如果JSON.parse()解析的字符串不是有效的JSON格式，会抛出一个SyntaxError异常。
在实际开发中，一定要对JSON.parse()进行错误处理，否则无效的JSON会导致整个程序崩溃！
使用try-catch处理错误
try {
const obj = JSON.parse(‘无效的JSON字符串’);
} catch (error) {
console.error(“解析JSON出错:”, error.message);
// 实际开发中这里可以显示用户友好的错误信息
}
const obj = JSON.parse(‘无效的JSON字符串’);
} catch (error) {
console.error(“解析JSON出错:”, error.message);
// 实际开发中这里可以显示用户友好的错误信息
}
reviver函数（第二个参数）
JSON.parse()的第二个参数是一个可选的reviver函数，它可以在返回解析结果前，对每个属性值进行转换处理。
reviver函数接收两个参数：
- key：当前属性的键名
- value：当前属性的值
使用reviver函数转换日期
const jsonString = ‘{“name”:”小明”,”birthday”:”1998-12-20T00:00:00.000Z”}’;
const obj = JSON.parse(jsonString, (key, value) => {
if (key === “birthday”) {
return new Date(value); // 将字符串转换为Date对象
}
return value; // 其他属性直接返回
});
console.log(obj.birthday.getFullYear()); // 输出: 1998
const obj = JSON.parse(jsonString, (key, value) => {
if (key === “birthday”) {
return new Date(value); // 将字符串转换为Date对象
}
return value; // 其他属性直接返回
});
console.log(obj.birthday.getFullYear()); // 输出: 1998
JSON.parse() 使用场景
1. 处理服务器返回的数据
从API接口获取的数据通常是JSON字符串
fetch(‘https://api.example.com/data’)
.then(response => response.json()) // 内部使用了JSON.parse()
.then(data => console.log(data));
.then(response => response.json()) // 内部使用了JSON.parse()
.then(data => console.log(data));
2. 解析本地存储的数据
localStorage中存储的数据只能是字符串
const userData = localStorage.getItem(‘user’);
if (userData) {
const user = JSON.parse(userData);
console.log(user.name);
}
if (userData) {
const user = JSON.parse(userData);
console.log(user.name);
}
3. 解析配置文件
许多配置文件使用JSON格式
const config = JSON.parse(fs.readFileSync(‘config.json’, ‘utf8’));
JSON.parse() 注意事项
- 安全风险：不要解析来自不可信来源的JSON字符串，可能包含恶意代码
- 性能考虑：解析非常大的JSON字符串可能影响性能（使用流式解析器处理大文件）
- 数据类型限制：JSON不支持JavaScript的所有类型（如函数、undefined、Symbol等）
- 循环引用：JSON不支持对象间的循环引用
JSON.parse() 在线演示
在下面输入JSON字符串，查看解析结果：
请点击上面的”解析JSON”按钮