JavaScript：如何将对应州与城市的两个数组合并为指定结构对象

给定两个长度相等的数组，array1存储州名，array2存储对应位置的城市名，需要将它们转换为州作为键、对应城市数组作为值的映射对象，用于实现州选择的联动下拉菜单。

核心实现方案 #

方法1：使用Array.reduce()（简洁高效） #

这是最常用的数组分组方式，代码简洁且可读性强：

const array1 = ["Alabama", "Alabama", "Georgia", "Georgia", "Georgia", "California"];
const array2 = ["Mobile", "Montgomery", "Atlanta", "Savannah", "Montgomery", "San Francisco"];

const citiesByState = array1.reduce((acc, state, index) => {
  // 如果当前州还没在映射对象里，先初始化空数组
  if (!acc[state]) {
    acc[state] = [];
  }
  // 将对应位置的城市添加到该州的数组中
  acc[state].push(array2[index]);
  return acc;
}, {});

console.log(citiesByState);
// 输出结果：
// {
//   Alabama: ["Mobile","Montgomery"],
//   Georgia: ["Atlanta","Savannah","Montgomery"],
//   California: ["San Francisco"]
// }

方法2：使用forEach循环（直观易懂） #

如果对reduce不熟悉，用普通循环也能实现相同效果：

const array1 = ["Alabama", "Alabama", "Georgia", "Georgia", "Georgia", "California"];
const array2 = ["Mobile", "Montgomery", "Atlanta", "Savannah", "Montgomery", "San Francisco"];

const citiesByState = {};
array1.forEach((state, index) => {
  if (!citiesByState[state]) {
    citiesByState[state] = [];
  }
  citiesByState[state].push(array2[index]);
});

联动下拉菜单的简单实现思路 #

拿到映射对象后，就可以快速实现联动逻辑：

1. 先渲染州选择下拉框的选项
2. 监听州选择框的change事件，根据选中的州名，从citiesByState中取出对应城市数组，渲染城市下拉框的选项

示例代码（结合DOM操作）：

<select id="stateSelect"></select>
<select id="citySelect"></select>

<script>
// 先生成映射对象（用上面的代码）
const array1 = ["Alabama", "Alabama", "Georgia", "Georgia", "Georgia", "California"];
const array2 = ["Mobile", "Montgomery", "Atlanta", "Savannah", "Montgomery", "San Francisco"];
const citiesByState = array1.reduce((acc, state, index) => {
  if (!acc[state]) acc[state] = [];
  acc[state].push(array2[index]);
  return acc;
}, {});

// 渲染州选项
const stateSelect = document.getElementById('stateSelect');
Object.keys(citiesByState).forEach(state => {
  const option = document.createElement('option');
  option.value = state;
  option.textContent = state;
  stateSelect.appendChild(option);
});

// 监听州选择变化，更新城市选项
stateSelect.addEventListener('change', () => {
  const citySelect = document.getElementById('citySelect');
  // 清空现有城市选项
  citySelect.innerHTML = '';
  const selectedState = stateSelect.value;
  citiesByState[selectedState].forEach(city => {
    const option = document.createElement('option');
    option.value = city;
    option.textContent = city;
    citySelect.appendChild(option);
  });
});

// 初始化默认显示第一个州的城市
stateSelect.dispatchEvent(new Event('change'));
</script>

注意事项 #

• 两个数组的长度必须严格相等，否则会出现索引不匹配的问题
• 如果需要对同一州下的重复城市去重，可以在push前加判断：if (!acc[state].includes(array2[index])) acc[state].push(array2[index])

内容的提问来源于stack exchange，提问作者JSNoob