17370845950

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：

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 的核心。