JavaScript 中解析嵌套 JSON 字符串数组的正确方法

本文详解如何正确处理由 json 字符串组成的数组（如 [“{“id”:”1″}”, “…”]），避免因误将字符串当对象访问而导致的 undefined 错误，并提供安全解析、错误处理及现代写法示例。

你遇到的问题非常典型：表面上看 locations 是一个对象数组，但实际上它的每个元素都是jsON 格式的字符串（例如 “{“location_id”:”1″,”location_name”:”Main office”}”），而非原生 javaScript 对象。因此，直接使用 locations[i].location_id 会失败——因为字符串不支持点号属性访问，”…” 没有 location_id 这个属性，结果自然是 undefined。

? 问题根源分析

• ✅ locations 是一个数组（长度为 2）；
• ❌ 但数组内每个元素是 字符串类型（typeof locations[0] === “String”）；
• ❌ locations[i].location_id 尝试在字符串上取属性 → 返回 undefined；
• ✅ console.log(locations[i]) 能打印内容，是因为字符串本身可输出，不代表它已是结构化对象。

✅ 正确解决方案：逐项解析 json 字符串

你需要对每个字符串调用 JSON.parse()，将其转换为真正的对象后再访问属性：

// 假设原始数据结构如下（注意：locations 是外层对象的属性） const data = {   "locations": [     "{"location_id":"1","location_name":"Main Office"}",     "{"location_id":"6","location_name":"Secondary"}"   ] };  // ✅ 安全遍历并解析 for (let i = 0; i < data.locations.length; i++) {   try {     const locObj = JSON.parse(data.locations[i]); // 解析单个字符串     console.log(`ID: ${locObj.location_id}, Name: ${locObj.location_name}`);   } catch (e) {     console.error(`解析第 ${i} 项失败：`, e.message);   } }

? 更现代、更简洁的写法（推荐）

使用 Array.prototype.map() + JSON.parse()，配合可选链（Optional Chaining）提升健壮性：

const parsedLocations = data.locations   .map(str => {     try {       return JSON.parse(str);     } catch (e) {       console.warn("跳过无效 JSON 字符串:", str);       return null;     }   })   .filter(Boolean); // 移除解析失败的项  // 安全访问（即使某字段缺失也不报错） parsedLocations.forEach(loc => {   console.log(`${loc?.location_id || 'N/A'} — ${loc?.location_name || 'Unknown'}`); });

⚠️ 重要注意事项

• 永远不要信任外部 JSON 字符串：务必用 try...catch 包裹 JSON.parse()，防止语法错误导致脚本中断；
• 避免重复解析：若需多次访问，应一次性解析并缓存为对象数组，而非每次循环都 parse；
• 理想数据格式应由后端修正：最优解是让 API 直接返回结构化数组（如 [{location_id: 1, location_name: "Main Office"}, ...]），而非嵌套 JSON 字符串——这属于数据建模缺陷，前端解析只是临时补救；
• 警惕 xss 风险：若字符串来源不可信，JSON.parse() 相对安全（不执行代码），但仍建议服务端做严格校验与转义。

✅ 总结

当你看到 ["{...}", "{...}"] 这样的数组时，请牢记：这是「字符串的数组」，不是「对象的数组」。只需一步关键操作——JSON.parse()——即可打通访问路径。结合错误处理与现代语法，既能写出健壮代码，也为后续维护打下基础。

立即学习“Java免费学习笔记（深入）”；