js中多个if else的优化方式?

前人的代码 通过后台返回的天气情况字段 来返回对应的天气图标

  document.getElementById("weather-font").innerHTML = "&nbsp" + weather;
          if (weather == "晴" || weather == "晴转多云") {
            //document.getElementById("weather-img").style.backgroundImage = "URL('../Images/right_weather_fine.png')";
            document.getElementById("weather-img").src = "../Images/right_weather_fine.png";
          } else if (weather == "多云" || weather == "多云转晴" || weather == "多云转阵雨" || weather == "多云转阴") {
            //document.getElementById("weather-img").style.backgroundImage = "URL('../Images/right_weather_cloudy.png')";
            document.getElementById("weather-img").src = "../Images/right_weather_cloudy.png";
          } else if (weather == "阴") {
            //document.getElementById("weather-img").style.backgroundImage = "URL('../Images/right_weather_sky.png')";
            document.getElementById("weather-img").src = "../Images/right_weather_sky.png";
          } else if (weather == "雾") {
            //document.getElementById("weather-img").style.backgroundImage = "URL('../Images/right_weather_fog.png')";
            document.getElementById("weather-img").src = "../Images/right_weather_fog.png";
          } else if (weather == "风") {
            //document.getElementById("weather-img").style.backgroundImage = "URL('../Images/right_weather_wind.png')";
            document.getElementById("weather-img").src = "../Images/right_weather_wind.png";
          } else if (weather == "小雨" || weather == "中雨" || weather == "小到中雨" || weather == "中到大雨" ||
            weather == "大雨" || weather == "暴雨" || weather == "小到暴雨" || weather == "中到暴雨") {
            //document.getElementById("weather-img").style.backgroundImage = "URL('../Images/right_weather_rainy.png')";
            document.getElementById("weather-img").src = "../Images/right_weather_rainy.png";
          } else if (weather == "大到暴雨") {
            //document.getElementById("weather-img").style.backgroundImage = "URL('../Images/right_weather_rainstorm.png')";
            document.getElementById("weather-img").src = "../Images/right_weather_rainstorm.png";
          } else if (weather == "阵雨") {
            //document.getElementById("weather-img").style.backgroundImage = "URL('../Images/right_weather_rainysh.png')";
            document.getElementById("weather-img").src = "../Images/right_weather_rainysh.png";
          } else if (weather == "雷雨" || weather == "雷阵雨") {
            //document.getElementById("weather-img").style.backgroundImage = "URL('../Images/right_weather_thunder.png')";
            document.getElementById("weather-img").src = "../Images/right_weather_thunder.png";
          } else if (weather == "雪") {
            //document.getElementById("weather-img").style.backgroundImage = "URL('../Images/right_weather_snow.png')";
            document.getElementById("weather-img").src = "../Images/right_weather_snow.png";
          } else if (weather == "雨加雪") {
            //document.getElementById("weather-img").style.backgroundImage = "URL('../Images/right_weather_raisnow.png')";
            document.getElementById("weather-img").src = "../Images/right_weather_raisnow.png'";
          }
          var PMvalue = str.split('"pm25":"')[1].split('",')[0];
          document.getElementById("pm").innerHTML = " " + PMvalue;
          if (quality == "重度污染") {
            document.getElementById("pm-color").style.color = "#be0606";
          } else if (quality == "轻度污染") {
            document.getElementById("pm-color").style.color = "#ff0000";
          } else if (quality == "良") {
            document.getElementById("pm-color").style.color = "#267405";
          } else {
            document.getElementById("pm-color").style.color = "#3dc404";
          }

这种代码 怎么优化

回复
阅读 1.8k
8 个回答

可以维护一份数据字典通过映射处理

var urlMap = {
   ‘晴’:'../Images/right_weather_fine.png',
  ‘多云’:'../Images/right_weather_fine.png',
}

document.getElementById("weather-img").style.backgroundImage = "URL("+urlMap[weather]+")";

做一个映射表

let srcs = {
    "晴": '../Images/right_weather_fine.png',
    "晴转多云": '../Images/right_weather_fine.png',
    "多云": '../Images/right_weather_cloudy.png',
    "多云转晴": '../Images/right_weather_cloudy.png',
    "多云转阵雨": '../Images/right_weather_cloudy.png',
    "多云转阴": '../Images/right_weather_cloudy.png'
}
document.getElementById("weather-img").src = srcs[weather] || ''

或者使用switch

let src = ''
switch(weather){
    case "晴":
    case "晴转多云":
        src = '../Images/right_weather_fine.png';
        break;
    case "多云":
    case "多云转晴":
    case "多云转阵雨":
    case "多云转阴":
        src = '../Images/right_weather_cloudy.png';
        break;
}
document.getElementById("weather-img").src = src

当作一个学习经历的分享吧。
每次做优化,有两点:

  1. 要注意就是一次优化一个点,优化好了再进行下一次优化。这样自己理解成本会降低,就像解不等式,约分和去括号不要一次性算完,因为自己的算力可能不够,容易出错。
  2. 先观察,再修改。

然后我们一起来尝试优化。

重复的语句进行封装

我们提取出两个函数


function 设置天气(weather) {
    document.getElementById("weather-img").src = `../Images/right_weather_${weather}.png`;
}
function 设置污染(quality) {
    document.getElementById("pm-color").style.color = quality;
}

那么原文变成了

document.getElementById("weather-font").innerHTML = "&nbsp" + weather;
if (weather == "晴" || weather == "晴转多云") {
    设置天气('fine')
} else if (weather == "多云" || weather == "多云转晴" || weather == "多云转阵雨" || weather == "多云转阴") {
    设置天气('cloudy')
} else if (weather == "阴") {
    设置天气('sky')
} else if (weather == "雾") {
    设置天气('fog')
} else if (weather == "风") {
    设置天气('wind')
} else if (weather == "小雨" || weather == "中雨" || weather == "小到中雨" || weather == "中到大雨" ||
    weather == "大雨" || weather == "暴雨" || weather == "小到暴雨" || weather == "中到暴雨") {
    设置天气('rainy')
} else if (weather == "大到暴雨") {
    设置天气('rainstorm')
} else if (weather == "阵雨") {
    设置天气('rainysh')
} else if (weather == "雷雨" || weather == "雷阵雨") {
    设置天气('thunder')
} else if (weather == "雪") {
    设置天气('snow')
} else if (weather == "雨加雪") {
    设置天气('raisnow')
}
var PMvalue = str.split('"pm25":"')[1].split('",')[0];
document.getElementById("pm").innerHTML = " " + PMvalue;
if (quality == "重度污染") {
    设置污染( "#be0606")
} else if (quality == "轻度污染") {
    设置污染( "#ff0000")
} else if (quality == "良") {
    设置污染( "#267405")
} else {
    设置污染( "#3dc404")
}

重复的判断词使用 swich语句


function 设置天气(weather) {
    document.getElementById("weather-img").src = `../Images/right_weather_${weather}.png`;
}
function 设置污染(quality) {
    document.getElementById("pm-color").style.color = quality;
}

switch (weather) {
    case "晴": case "晴转多云":
        设置天气('fine')
        break;
    case "多云": case "多云转晴": case "多云转阵雨": case "多云转阴":
        设置天气('cloudy')
        break;
    case "阴":
        设置天气('sky')
        break;
    case "雾":
        设置天气('fog')
        break;
    case "风":
        设置天气('wind')
        break;
    case "小雨": case "中雨": case "小到中雨": case "中到大雨":
    case "大雨": case "暴雨": case "小到暴雨": case "中到暴雨":
        设置天气('rainy')
        break;
    case "大到暴雨":
        设置天气('rainstorm')
        break;
    case "阵雨":
        设置天气('rainysh')
        break;
    case "雷雨": case "雷阵雨":
        设置天气('thunder')
        break;
    case "雪":
        设置天气('snow')
        break;
    case "雨加雪":
        设置天气('raisnow')
        break;
}
document.getElementById("weather-font").innerHTML = "&nbsp" + weather;

var PMvalue = str.split('"pm25":"')[1].split('",')[0];
document.getElementById("pm").innerHTML = " " + PMvalue;
switch (quality) {
    case '重度污染':
        设置污染("#be0606")
        break;
    case '轻度污染':
        设置污染("#ff0000")
        break;
    case '良':
        设置污染("#267405")
        break;
    default:
        设置污染("#3dc404")
        break;
}

再次观察,发现其实就是多个值对一个值的映射关系

那我们处理办法就是用Object,但如何设计,就是一个要考虑的问题了。内存和效率必然会损失一个。
我选择枚举封装到函数中


function 设置天气(weather) {
    const 天气 = {
        fine: ["晴", "晴转多云",],
        cloudy: ["多云", "多云转晴", "多云转阵雨", "多云转阴",],
        sky: ['阴'],
    }
    let today = Object.entries(天气)
        .find(([word, chinese]) => chinese.includes(weather))
        [0]
    
    return `../Images/right_weather_${today}.png`;
}
function 设置污染(quality) {
    const 污染 = {
        重度污染: 'be0606',
        轻度污染: 'ff0000',
        良: '267405',
        default:'3dc404'
    }
    let today = 污染[quality] || 污染.default
    return `#${today}`;
}

那么原文就变成了

document.getElementById("weather-font").innerHTML = "&nbsp" + weather;
document.getElementById("weather-img").src = 设置天气(weather)

var PMvalue = str.split('"pm25","')[1].split('",')[0];
document.getElementById("pm").innerHTML = " " + PMvalue;
document.getElementById("pm-color").style.color = 设置污染(quality)
function getImage(text) {
  const imageMap = {
    '多云': 'image1',
    '雷雨': 'image2',
    '雷阵雨': 'image2'
  }

  return imageMap[text] || 'defaultImage'
}

我就写一段,你自己推就行。

function ABCDEFG(){
  const el = document.getElementById("weather-img")
  if(['晴','晴转多云'].includes(weather)){
    ...
  } else if(['多云','多云转晴','多云转阵雨','多云转阴'].includes(weather)){ ...
  ...

也可以提取出来

const weatherDictList = [
  { typeList:['晴','晴转多云'], img: "./Images/right_weather_fine.png"},
  ...
}
const getWeatherInfo = (typeLabel) => {
  return weatherDictList.find(item=>item.typeList.includes(typeLabel))
}

业务代码里面就只需要这样写就行了:

function ABCDEFG(){
  const el = document.getElementById("weather-img")
  const weatherData = getWeatherInfo(weather)
  el.src(weatherData.img)
}
let srcs = {
    '晴|晴转多云': '../Images/right_weather_fine.png',
    '多云|多云转晴|多云转阵雨|多云转阴': '../Images/right_weather_yun.png',
    '阴': '../Images/right_weather_yin.png',
}

function transMap (srcs) {
  const res = {}
  Object.entries(srcs).forEach(([key, value]) => {
    const ckeys = key.split('|')
    ckeys.forEach(ckey => {
      res[ckey] = value
    })
  })
  return res
}

const srcMap = transMap(srcs)
document.getElementById("weather-img").src = srcMap[weather]

1、扩展性强
2、可读、可维护性强
3、你说的 weather === '晴' || weather === '晴转多云' 这种方式也解决了

const map = [
  {
    filter: (weather: string) => weather === '阵雨',
    image: '../Images/right_weather_fine.png',
  },
  {
    filter: (weather: string) => weather === '晴' || weather === '晴转多云',
    image: '../Images/right_weather_fine.png',
  },
  {
    filter: (weather: string) =>
      weather === '多云' ||
      weather === '多云转晴' ||
      weather === '多云转阵雨' ||
      weather === '多云转阴',
    image: '../Images/right_weather_cloudy.png',
  },
  {
    filter: (weather: string) =>
      weather === '小雨' ||
      weather === '中雨' ||
      weather === '小到中雨' ||
      weather === '中到大雨' ||
      weather === '大雨' ||
      weather === '暴雨' ||
      weather === '小到暴雨' ||
      weather === '中到暴雨',
    image: '../Images/right_weather_rainy.png',
  },
];
export const filterMap = (weather: string) => {
  const filterMapItem = map.find((item) => item.filter(weather));
  if (!filterMapItem) {
    return '';
  }
  return filterMapItem.image;
};
console.log('filterMap', filterMap('晴'));

image.png

function getWeatherImg(weather) {
  let weatherMap = new Map([
    [['晴', '晴转多云'], '../Images/right_weather_fine.png'],
    [['多云', '多云转晴', '多云转阵雨', '多云转阴'], '../Images/right_weather_cloudy.png']
  ]);
  // 直接通过 has 获取对象,如果不存在则遍历查找,还找不到则赋值为空字符
  let [key = [], src = ''] = weatherMap.get([weather]) || [...weatherMap.entries()].find(([key = []]) => key.includes(weather)) || [[], ''];
  return src;
}

let weather = '多云';

document.getElementById("weather-font").innerHTML = "&nbsp" + weather;
document.getElementById("weather-img").src = getWeatherImg(weather);

function getPmColor(PMvalue) {
  let pmMap = new Map([
    ["重度污染", "#be0606"],
    ["轻度污染", "#ff0000"],
    ["良", "#267405"],
  ]);
  // 如果找不到则默认颜色
  return pmMap.get(PMvalue) || "#3dc404"
}
var PMvalue = str.split('"pm25":"')[1].split('",')[0];
document.getElementById("pm").innerHTML = " " + PMvalue;
document.getElementById("pm-color").style.color = getPmColor(PMvalue); 

使用了 Map 数组解构等新语法。
https://developer.mozilla.org...

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏