如何为多变量使用switch语句？Yahoo Weather多日期天气适配优化

嘿，重复写四个switch确实太冗余了，完全没必要！咱们可以通过抽离通用逻辑+状态映射表的方式，把代码简化到极致，而且后续维护也方便很多。下面是具体的实现思路：

1. 先做一个天气状态与图标/内容的映射表 #

把0-47的天气状态码和对应的图标（不管是CSS类名还是图片URL）做成一个键值对对象，替代冗长的switch判断。这样以后要修改对应关系，直接改这个对象就行，不用翻找多处代码。

比如如果用CSS类名来控制图标：

// 示例：根据Yahoo Weather的状态码对应图标类名
const weatherStatusMap = {
  0: "icon-tornado",
  1: "icon-tropical-storm",
  2: "icon-hurricane",
  // ... 依次补全0到47的所有对应关系
  46: "icon-snow-showers-day",
  47: "icon-thunderstorms-night"
};

如果是用img标签的图片URL，就把值换成对应的图片路径即可。

2. 编写通用的渲染函数 #

写一个可以复用的函数，接收两个参数：天气状态码，以及要渲染到的DOM元素。函数内部通过映射表找到对应内容，然后更新DOM。

function renderWeatherStatus(statusCode, targetElement) {
  // 处理异常情况：如果状态码不在0-47范围内，显示默认图标
  const iconContent = weatherStatusMap[statusCode] || "icon-unknown";
  
  // 假设你的HTML用<i>标签承载图标，可根据实际结构调整
  targetElement.innerHTML = `<i class="${iconContent}"></i>`;
  
  // 如果是img标签，就改成：
  // targetElement.src = iconContent;
}

3. 调用函数渲染四天的天气 #

不管是今日还是未来3天，直接调用这个通用函数就行，不用再写重复的switch：

// 假设你已经获取到四天的状态码变量，以及对应的DOM元素ID
renderWeatherStatus(todayStatus, document.getElementById("today-icon"));
renderWeatherStatus(day1Status, document.getElementById("day1-icon"));
renderWeatherStatus(day2Status, document.getElementById("day2-icon"));
renderWeatherStatus(day3Status, document.getElementById("day3-icon"));

为什么这比写四个switch好？ #

• 代码复用：只写一次逻辑，四次调用，避免大量重复代码
• 易维护：要修改图标对应关系，只需要更新weatherStatusMap，不用找四个switch的位置
• 扩展性强：以后要加未来第4天、第5天的天气，直接加一行函数调用就行

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