本文详解如何使用 javascript 遍历包含城市（city）及其嵌套社区数组（societies）的 json 数据结构，准确提取每个城市的名称与全部社区值，并以结构化、可读性强的方式输出。
在实际开发中，我们常需处理层级化的 JSON 数据——例如一个城市列表，每个城市下关联多个社区（Society）。原始数据中字段命名不规范（如 City 和 Societies 首字母大写），为提升代码可维护性与语义清晰度，建议统一采用小驼峰命名法（camelCase），如将 City 改为 name、Societies 改为 societies。
以下是标准化后的示例数据：
const data = {
cities: [
{
name: "Islamabad",
societies: [
"Zaraj",
"River Garden",
"Soan Garden",
"CBR Town",
"PWD Society",
"Pakistan Town"
]
},
{
name: "Lahore",
societies: [
"Lahore Smart City",
"Bahria Town Lahore",
"Gulberg Lahore",
"Gulshan-e-Lahore"
]
}
]
};✅ 核心遍历逻辑：map() + 字符串模板
最简洁高效的方式是使用 Array.prototype.map() 遍历 data.cities，对每个城市对象生成格式化字符串：
const result = data.cities.map(city => {
return `City: ${city.name}\nSocieties:\n${city.societies.join('\n')}`;
});
console.log(result.join('\n\n'));输出效果如下：
City: Islamabad Societies: Zaraj River Garden Soan Garden CBR Town PWD Society Pakistan Town City: Lahore Societies: Lahore Smart City Bahria Town Lahore Gulberg Lahore Gulshan-e-Lahore
? 提示：join('\n') 确保社区名换行显示；若需 HTML 渲染，可替换为 并配合 innerHTML；若用于 CLI 或日志，\n 更自然。
⚠️ 注意事项与最佳实践
- 避免直接修改原始数据：如无法预改键名（如 API 返回固定大写字段），可不重命名，直接访问 city.City 和 city.Societies，但需注意属性名大小写敏感；
-
空值防护：生产环境建议添加安全访问，例如：
city?.name && Array.isArray(city?.societies) ? `City: ${city.name}\nSocieties:\n${city.societies.join('\n')}` : 'Invalid city entry' - 扩展性考虑：若后续需支持分页、搜索或过滤（如仅显示含“Town”的社区），建议先用 flatMap() 扁平化所有社区，再做聚合操作；
- 性能提示：对于超大数据集（>10,000 城市），避免在循环内频繁字符串拼接，可改用 Array.prototype.reduce() 或构建数组后一次性 join。
✅ 总结
遍历嵌套对象数组的关键在于：
① 结构认知：明确外层数组（cities）→ 内层对象（单个 city）→ 内嵌数组（societies）；
② 方法匹配：map() 适合生成新结构，forEach() 适合副作用操作（如 DOM 插入），flatMap() 适合跨层级扁平提取；
③ 输出可控：善用模板字符串与 join() 精确控制分隔符，兼顾可读性与兼容性。
掌握这一模式，即可轻松应对任意深度的「对象+嵌套数组」遍历需求。
