什么是 JSON.parse()？它到底在做什么？
你有没有遇到过这样的场景：从服务器拿到一段数据，看起来像这样：
{
"name": "张三",
"age": 28,
"skills": ["JavaScript", "Vue 3.0", "Node.js"],
"isEmployed": true
}
这段数据看起来像是 JavaScript 对象，但它是以字符串的形式存在的。我们不能直接用点语法访问它，比如 data.name，因为它是字符串，不是对象。
这时候，JSON.parse() 就登场了。它的作用就是把一个符合 JSON 格式的字符串，转换成真正的 JavaScript 对象。你可以把它想象成“解码器”——把一串压缩过的信息还原成可读、可操作的数据结构。
⚠️ 注意：只有完全符合 JSON 标准的字符串才能被成功解析。如果字符串中包含
undefined、函数、正则表达式等，JSON.parse()会抛出错误。
语法与基本用法
JSON.parse() 的语法非常简单：
JSON.parse(string, reviver)
string：必须是一个合法的 JSON 字符串。reviver：可选参数，是一个函数，用于在解析过程中对每个键值对进行处理。
基础示例
const jsonString = '{"name": "李四", "age": 30, "city": "北京"}';
// 使用 JSON.parse() 将字符串转为对象
const userData = JSON.parse(jsonString);
// 现在可以像操作普通对象一样使用
console.log(userData.name); // 输出：李四
console.log(userData.age); // 输出：30
console.log(userData.city); // 输出：北京
💡 提示：
JSON.parse()是同步方法，不会阻塞主线程，但如果你处理的是超大 JSON 数据，仍需注意性能问题。
常见错误与解决方案
错误 1：字符串格式不合法
如果你的字符串中多了一个逗号，或者用了单引号，JSON.parse() 就会报错。
// ❌ 错误示例：使用单引号
const badString = "{'name': '王五'}";
JSON.parse(badString); // 报错：Unexpected token ' in JSON at position 1
✅ 正确写法必须使用双引号：
// ✅ 正确示例
const goodString = '{"name": "王五"}';
const result = JSON.parse(goodString);
console.log(result.name); // 输出：王五
错误 2：包含非法值
JSON 不支持 undefined、NaN、Infinity 这些值。
// ❌ 错误示例
const invalidJson = '{"value": undefined}';
JSON.parse(invalidJson); // 报错：Unexpected token u in JSON at position 12
✅ 解决方案：在发送数据前，将这些值替换为 null 或其他合法值。
const data = { value: undefined };
const safeString = JSON.stringify(data); // {"value":null}
const parsed = JSON.parse(safeString); // value 为 null，安全解析
处理嵌套结构：对象与数组
JSON.parse() 能处理复杂的嵌套结构，比如包含数组的对象。
示例：解析带数组的 JSON
const jsonString = `{
"students": [
{"name": "小明", "grade": 95},
{"name": "小红", "grade": 87},
{"name": "小刚", "grade": 92}
],
"class": "高三（1）班"
}`;
const classData = JSON.parse(jsonString);
// 遍历学生数组
classData.students.forEach(student => {
console.log(`${student.name} 的成绩是：${student.grade}`);
});
// 输出：
// 小明 的成绩是：95
// 小红 的成绩是：87
// 小刚 的成绩是：92
🌟 这就是为什么
JSON.parse()是前后端通信的“桥梁”——前端接收字符串，后端发送 JSON 字符串，JSON.parse()让前端能真正“读懂”数据。
使用 reviver 参数进行高级处理
reviver 参数允许你在解析过程中对每个键值对进行自定义处理。它是一个函数，接收两个参数：key 和 value。
场景：自动将字符串数字转为数字类型
有时服务器返回的数字是字符串形式，比如 "123"，我们希望自动转为数字。
const jsonString = `{
"id": "1001",
"score": "98.5",
"isActive": "true"
}`;
// 使用 reviver 自动处理数值类型
const parsedData = JSON.parse(jsonString, (key, value) => {
// 如果值是字符串，且看起来像数字，就转为数字
if (typeof value === 'string') {
// 检查是否为纯数字（包含小数点）
if (/^\d+(\.\d+)?$/.test(value)) {
return Number(value); // 转为数字
}
// 检查是否为布尔字符串
if (value === 'true') return true;
if (value === 'false') return false;
}
return value; // 其他情况保持原样
});
console.log(typeof parsedData.id); // number
console.log(typeof parsedData.score); // number
console.log(typeof parsedData.isActive); // boolean
✅ 这种方式非常实用，尤其在处理来自 API 的不规范数据时，可以避免后续手动转换。
实际应用场景：前端接收 API 数据
在真实项目中，JSON.parse() 几乎每时每刻都在使用。
示例：从 fetch 请求中解析响应
fetch('/api/user/profile')
.then(response => response.text()) // 先获取文本
.then(text => {
try {
const userData = JSON.parse(text); // 解析 JSON 字符串
console.log('用户姓名：', userData.name);
console.log('用户邮箱：', userData.email);
} catch (error) {
console.error('解析失败：', error.message);
}
})
.catch(err => {
console.error('请求失败：', err);
});
🔒 重要提示：永远使用
try...catch包裹JSON.parse()，防止因数据异常导致程序崩溃。
性能与安全考虑
虽然 JSON.parse() 非常高效，但也要注意以下几点：
- 不要解析不可信数据：如果 JSON 来自用户输入或不受信任的源，可能存在恶意代码注入风险。建议使用白名单校验或使用更安全的解析库（如
safe-json）。 - 大 JSON 文件处理：对于超过 10 MB 的 JSON 数据，解析会占用大量内存。可考虑流式解析（如
JSONStream）。 - 避免频繁调用：如果多个地方重复解析相同数据，建议缓存解析结果。
与 JSON.stringify() 的配合使用
JSON.parse() 是“解码”，而 JSON.stringify() 是“编码”。两者常常成对出现。
const obj = {
name: "赵六",
hobbies: ["编程", "阅读", "旅行"],
score: 99.5
};
// 1. 转为字符串（编码）
const jsonString = JSON.stringify(obj);
// 2. 再转回对象（解码）
const parsedObj = JSON.parse(jsonString);
console.log(parsedObj.name); // 赵六
console.log(parsedObj.hobbies); // ["编程", "阅读", "旅行"]
🔄 这种“编码 → 解码”模式是前后端数据交换的标准流程。
总结：掌握 JSON.parse() 的关键点
- 它是将 JSON 字符串转为 JavaScript 对象的核心方法。
- 必须保证输入是合法的 JSON 格式，否则会抛错。
- 使用
try...catch包裹，提升程序健壮性。 - 利用
reviver实现灵活的数据处理。 - 在 API 请求、配置读取、数据存储等场景中高频使用。
无论你是初学者还是中级开发者，只要涉及前后端交互，JSON.parse() 都是你必须掌握的“基本功”。它看似简单，却承载着整个数据流动的起点。
下次你看到一段花括号包裹的字符串时，别忘了：它可能正等着你用 JSON.parse() 唤醒它的生命。