本文详解如何使用 javascript 遍历包含城市及其嵌套社区数组的 json 数据结构，精准提取每个城市的名称及所有社区名称，并以结构化、可读性强的方式输出结果。

在实际前端开发或数据处理场景中，我们常遇到类似如下结构的嵌套 JSON 数据：顶层为 cities 数组，每个城市对象包含 City（城市名）和 Societies（社区字符串数组）两个关键字段。目标是逐个城市展开，并列出其下所有社区，而非简单扁平化拼接——尤其当需渲染为多级列表、生成报告或构建下拉联动时，清晰的层级表达至关重要。

首先，建议对原始键名进行语义优化（如 City → name，Societies → societies），既提升代码可读性，也符合 JavaScript 命名惯例（小驼峰）。以下是规范化后的示例数据：

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"
      ]
    }
  ]
};

接下来，使用 Array.prototype.map() 遍历 data.cities，对每个城市对象执行格式化处理。注意：若需保留换行与缩进以匹配题目中“City: X / Societies: / A / B / C”的排版风格，应使用模板字符串配合 \n 和缩进，而非简单 join(' ')：

const formattedOutput = data.cities.map(city => {
  return `City: ${city.name}\nSocieties:\n${city.societies.map(s => `  ${s}`).join('\n')}`;
});

console.log(formattedOutput.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

✅ 关键要点说明：

• 使用 map() 而非 forEach()，确保返回新数组，便于链式处理或后续渲染；
• 社区列表内层 map() 添加前缀空格（" ${s}"）实现视觉缩进，增强可读性；
• 若需输出为 HTML 列表，可将内层 join('\n') 替换为 join('</li><li>') 并包裹 <ul><li>...</li></ul>；
• 实际项目中建议增加空值防护：city.societies?.length && city.societies.map(...)，避免 undefined 报错。

该方案简洁、可扩展、符合现代 JavaScript 实践，适用于控制台调试、服务端文本生成或前端动态渲染等多场景。