JSON解析需用JSON.parse()并配合try...catch;访问嵌套属性应使用可选链操作符(?.)或逻辑运算符(??)避免TypeError;对不确定结构可用递归函数提取目标字段;还需进行类型校验与存在性判断以确保结构容错。

JavaScript 解析 JSON 数据本身很简单,用 JSON.parse() 就行;真正容易出问题的,是后续对复杂嵌套结构的安全访问和提取。
基础解析:先转成对象,再谨慎访问
JSON 字符串必须是合法格式,否则 JSON.parse() 会直接报错。建议始终用 try...catch 包裹:
let jsonString = '{"user":{"profile":{"name":"张三","address":{"city":"北京","district":"朝阳"}}}}';
try {
const data = JSON.parse(jsonString);
// ✅ 正确:逐层检查是否存在再取值
const city = data?.user?.profile?.address?.city;
console.log(city); // "北京"
} catch (e) {
console.error('JSON 解析失败:', e.message);
}
处理深层嵌套:避免 TypeError 和 undefined 链式报错
直接写 data.user.profile.address.city 在某一层为 null 或 undefined 时会抛 TypeError。推荐以下方式:
- 可选链操作符(?.):现代浏览器和 Node.js 14+ 支持,最简洁安全
-
逻辑运算符(|| 或 ??):提供默认值,例如
data?.items?.[0]?.title ?? '无标题' - 自定义安全取值函数:适合老环境或需统一错误处理的场景
遍历不确定结构:用递归或工具函数提取目标字段
当 JSON 结构不固定(比如后端返回的树形菜单、动态表单配置),可用递归搜索特定 key:
立即学习“Java免费学习笔记(深入)”;
function findValues(obj, targetKey) {
const results = [];
if (obj && typeof obj === 'object') {
if (targetKey in obj) {
results.push(obj[targetKey]);
}
Object.values(obj).forEach(val => {
results.push(...findValues(val, targetKey));
});
}
return results;
}
// 示例:提取所有 "id" 字段
const allIds = findValues(data, 'id');
类型校验与结构预期:提前防御性判断
别假设后端永远返回理想结构。简单校验能大幅降低运行时错误:
- 用
Array.isArray()确认是数组再.map() - 用
typeof x === 'string'或typeof x === 'number'校验字段类型 - 对关键路径做存在性断言:
if (!data || !data.user || !data.user.profile) throw new Error('缺失必要字段')
不复杂但容易忽略:解析只是第一步,安全访问和结构容错才是处理嵌套 JSON 的核心。











