javascript - 如何通过将 if/else 块替换为 React 中的其他内容来降低 27 的复杂性

Question

我有一个带有 if/else 语句调整的表情符号的天气显示，但由于复杂度为 27，显然有一个重大延迟，我如何用可以降低复杂性的替代方法替换这种方法？

对前端世界有点陌生，非常感谢任何帮助。

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

  var day_time = isDay()

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

  if       ( main_description === 'Clear' && day_time == true) {
  document.getElementById('temp').innerHTML = fahrenheit + 
  '°' + ' ☀️';
  } else if ( main_description === 'Clear' && day_time == false) 
  {
  document.getElementById('temp').innerHTML = fahrenheit + 
  '°' + ' ';
  } else if( main_description === 'Clouds' ) {
  document.getElementById('temp').innerHTML = fahrenheit + 
  '°' + ' ☁️';
  } else if( main_description === 'Drizzle' ) {
  document.getElementById('temp').innerHTML = fahrenheit + 
  '°' + ' ️';
  } else if( main_description === 'Rain' ) {
  document.getElementById('temp').innerHTML = fahrenheit + 
  '°' + ' ️';
  } else if( main_description === 'Thunderstorm' ) {
  document.getElementById('temp').innerHTML = fahrenheit + 
  '°' + ' ⛈️';
  } else if( main_description === 'Snow' ) {
  document.getElementById('temp').innerHTML = fahrenheit + 
  '°' + ' ❄️';
  } else if( main_description === 'Fog' ) {
  document.getElementById('temp').innerHTML = fahrenheit + 
  '°' + ' ️';
  } else if( main_description === 'Mist' ) {
  document.getElementById('temp').innerHTML = fahrenheit + 
  '°' + ' ️';
  } else if( main_description === 'Haze' ) {
  document.getElementById('temp').innerHTML = fahrenheit + 
  '°' + ' ️';
  } else if( main_description === 'Tornado' ) {
  document.getElementById('temp').innerHTML = fahrenheit + 
  '°' 
  + ' ️';
  } else if( main_description === 'Dust' ) {
  document.getElementById('temp').innerHTML = fahrenheit + 
  '°' 
   + ' ️';
  } else {
  document.getElementById('temp').innerHTML = fahrenheit + 
  '°';
  }
  }

标签： javascriptreactjsif-statementcomplexity-theory

Answer 1

1. 至少展示你的努力，你确实使用代码，但找不到方法去

2. 发布格式化代码以表达您对社区的尊重

3. 这是编程中“DRY - Don't Repeat Yourself”的话题。您可以使用该关键字搜索并学习它。

4. 下面的代码是我可以做的，但未经测试。

let data = [
    { weather: 'Clear', icon_day: '☀️', icon_night: '' },
    { weather: 'Clouds', icon: '☁️' },
    { weather: 'Drizzle', icon: '️' },
    { weather: 'Rain', icon: '️' },
    { weather: 'Thunderstorm', icon: '⛈️' },
    { weather: 'Snow', icon: '❄️' },
    { weather: 'Fog', icon: '️' },
    { weather: 'Mist', icon: '️' },
    { weather: 'Haze', icon: '️' },
    { weather: 'Tornado', icon: '️' },
    { weather: 'Dust', icon: '️' }
]

let icon = '';
data.forEach(element => {
    if (main_description === 'Clear') {
        icon = isDay() ? element.icon_day : element.icon_night
    } else if (main_description === element.weather) {
        icon = element.icon;
    }
});

document.getElementById('temp').innerHTML = `${fahrenheit}° ${icon}`;