本文详解如何使用 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 渲染，可替换为 <br> 并配合 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() 精确控制分隔符，兼顾可读性与兼容性。

掌握这一模式，即可轻松应对任意深度的「对象+嵌套数组」遍历需求。