本文详解如何正确处理由 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）提升健壮性：
由夸克扫描王提供的文件格式转换工具。当用户需要将图片、截图或扫描件转换为 Office 文档（Word/Excel）或 PDF 时，使用此技能。适用于包含复杂表格、合同或图文混排内容的图片或扫描件，可尽量还原原始版式并生成可编辑文档。即使用户未明确提到格式转换，只要用户的需求涉及将图片内容转换为可编辑文档（如 .docx、.xlsx 或 .pdf），也应触发此技能。请勿用于提取纯文本或识别文字内容、图像增强处理或从零创建文档
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免费学习笔记（深入）”；
