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

发布于
2022-11-14 山东

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

  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 = "&nbsp;" + 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";
          }

这种代码怎么优化

javascript vue.js

阅读 4.9k

8 个回答

得票最新

Kapok

451115

发布于
2022-11-14 广东

更新于
2022-11-14

✓ 已被采纳

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

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

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

hfhan

29k72241

发布于
2022-11-14 安徽

做一个映射表

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.8k1633

发布于
2022-11-14 北京

更新于
2022-11-14

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('晴'));

西索酱

40211752

发布于
2022-11-17 湖北

更新于
2022-11-17

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

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

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

重复的语句进行封装

我们提取出两个函数


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 = "&nbsp;" + 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 = "&nbsp;" + 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 = "&nbsp;" + PMvalue;
document.getElementById("pm-color").style.color = 设置污染(quality)

何以旧林

597117

发布于
2022-11-14 浙江

更新于
2022-11-14

function getImage(text) {
  const imageMap = {
    '多云': 'image1',
    '雷雨': 'image2',
    '雷阵雨': 'image2'
  }

  return imageMap[text] || 'defaultImage'
}

陟上晴明

21.6k145091

发布于
2022-11-14 浙江

更新于
2022-11-14

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

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)
}

香芋好好吃

34014

发布于
2022-11-14 广东

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]

扬帆启航

4.3k2721

发布于
2022-11-15 云南

更新于
2022-11-17

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 = "&nbsp;" + PMvalue;
document.getElementById("pm-color").style.color = getPmColor(PMvalue);

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

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

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

重复的语句进行封装

重复的判断词使用 swich语句

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

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

vue2.6，打包后app.js，8M,chunk.js，6M，加载打开页面很慢，有什么办法减少，打开页面快一些？

Element Plus表格组件如何呈现复杂布局如图？

多个vue项目，后台接口都是一样的，每个vue项目的同一个页面都只是一小部分修改，怎样把公共的代码提出来复用？