React中如何替换if/else块以降低圈复杂度为27的代码复杂度

你当前代码的高复杂度和运行延迟完全来自多分支的串行条件判断，用查找映射的方式可以把圈复杂度直接降到1，同时消除判断延迟，代码也更易维护。

优化后完整代码 #

// 天气-emoji映射表提前定义在函数外，全局只初始化一次
const weatherEmojiMap = {
  Clear: {
    day: '☀️',
    night: '🌔'
  },
  Clouds: '☁️',
  Drizzle: '🌦️',
  Rain: '🌧️',
  Thunderstorm: '⛈️',
  Snow: '❄️',
  Fog: '🌫️',
  Mist: '🌫️',
  Haze: '🌫️',
  Tornado: '🌫️',
  Dust: '🌫️'
}

function drawWeather(d) {
  const celcius = Math.round(parseFloat(d.main.temp)-273.15);
  const fahrenheit = Math.round(((parseFloat(d.main.temp)-273.15)*1.8)+32);
  const main_description = d.weather[0].main; 
  const day_time = isDay();

  document.getElementById('location').innerHTML = d.name;

  // 单次查表获取对应emoji
  let emoji = ''
  const matchResult = weatherEmojiMap[main_description]
  if (matchResult) {
    // 单独处理晴天需要区分昼夜的场景
    emoji = main_description === 'Clear' ? matchResult[day_time ? 'day' : 'night'] : matchResult
  }
  // 温度拼接逻辑统一写一处，避免重复代码
  document.getElementById('temp').innerHTML = `${fahrenheit}°${emoji ? ' ' + emoji : ''}`
}

优化说明 #

• 所有匹配规则都存在weatherEmojiMap对象中，后续新增天气类型只要加一行键值对即可，不需要修改逻辑代码
• 运行时仅需要一次对象属性查找就能拿到对应emoji，时间复杂度为O(1)，不管后续加多少种天气都不会出现匹配延迟
• 重复的温度拼接逻辑合并为一处，修改展示格式时只需要改一行，不会出现多分支修改漏改的问题
• 不会被二次修改的变量统一用const声明，避免意外赋值导致的隐性bug

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