Javascript 如何简化包含大量if语句的代码，以及如何更快地更改映像

只有两个简单的问题

Q1下面的代码有多个if-else语句，我想知道是否有一种方法可以使用数组或其他方法来简化此过程

问题2：有没有办法更快地更改bgImg.src，因为更改src需要更长的时间

const bgImg = document.querySelector('#element-body img');
let icon = "";

if(weatherName.includes("rain")){
           icon = "./images/rain.jpg";
        }
        else if(weatherName.includes("clouds")){
           icon = "./images/clouds.jpg";
        }
        else if(weatherName.includes("snow")){
           icon = "./images/snow.jpg";
        }
        else if(weatherName === "mist"){
           icon = "./images/mist.jpg";
        }
        else if(weatherName === "clear sky"){
           icon = "./images/clear-sky.jpg";
        }
        else if(weatherName === "smoke"){
           icon = "./images/smoke.jpg";
        }
        else if(weatherName === "dust"){
           icon = "./images/dust.jpg";
        }
        else if(weatherName === "drizzle"){
           icon = "./images/rain.jpg";
        }
        else if(weatherName === "haze"){
           icon = "./images/haze.jpg";
        }
        else if(weatherName === "fog"){
           icon = "./images/foggy.jpg";
        }
        else if(weatherName === "thunderstorm"){
           icon = "./images/thunderstorm.jpg";
        }
        else{
           icon = "./images/pexels-photo-39811.jpg";
        }
      }
     bgImg.src = icon;
    }

---

使用由比较字符串和循环图标列表所需的方法分隔的数组。如果需要修改列表，可以在数组中进行修改

const bgImg = document.querySelector('#element-body img');
const iconListInclude = [
  'rain',
  'clouds',
  'snow',
]
const iconListEqual = [
  'mist',
  'clear sky',
  'smoke',
  'dust',
  'drizzle',
  'haze',
  'fog',
  'thunderstorm',
]
let icon = "./images/pexels-photo-39811.jpg"
iconListInclude.forEach(i => {
  if (weatherName.includes(i)) icon = "./images/"+i+".jpg"
})
iconListEqual.forEach(i => {
  if (weatherName === i) icon = "./images/"+i+".jpg"
})
bgImg.src = icon

---

您可以使用两个数组来检查包含的部分字符串，并进行精确检查，然后返回一个包含替换空格的查找结果

const getIcon=weather=>{ 变量包括=['雨'，'云']， 精确=[“雪”、“雾”、“晴空”、“烟”、“灰尘”、“毛毛雨”、“薄雾”、“雾”、“雷雨”]， type=includes.findw=>weather.includesw|| 准确。包括天气和天气|| ‘pexels-photo-39811’； 返回`./images/${type.replace/\s/g'-'}.jpg`； }; 控制台。loggetIcon“有雨”； 控制台。loggetIcon“晴朗的天空”；

---

console.loggetIcon'foo' 您可以使用关联数组并遍历键以找到匹配项。按天气模式的频率排序键可能会加快速度，但不会显著加快

为了安全起见，此代码段将weatherName中的空格替换为-并将字符串改为小写

const weatherName=晴朗的天空； const bgImg=document.querySelector'element-body img'； const localWeather=weatherName.replace/\s/，'-'.toLowerCase； //默认图标名称 let icon='pexels-photo-39811'； 常量图标名={ ‘云’：‘云’， “晴朗的天空”：“晴朗的天空”， "毛毛雨":"雨",， "尘埃":"尘埃",， ‘雾’：‘雾’， "霾":"霾",， “薄雾”：“薄雾”， "雨":"雨",， ‘雪’：‘雪’， “烟”：“烟”， "雷雨":"雷雨",， } 对于Object.keysiconNames的let键{ 如果localWeather.includeskey{ 图标=图标名称[键]； //找到图标，因此退出'for'循环 打破 } } bgImg.src=`./images/${icon}.jpg`；

---

详细信息在演示的每一行都有注释

演示

/* 使用块元素，例如。。。容纳 背景图像。块元素允许更好的控制。 */ const bkg=document.querySelector'.bkg'； /* 有一个图像数组。仅使用每个组件的唯一部分 url，通常是文件名ex../images/UNIQUE_PART.jpg。 */ const白名单=[雨、云、雪、雾、晴、雾、尘、雾、雾、风暴]； //假设API提供了一个字符串数组。 const weatherName=[‘垃圾’、‘垃圾码头’、‘五级’、‘闪发洪水’、‘雾’、‘烟雾’、‘垃圾’、‘沼泽驴’]； /* 过滤器电阻阵列1，阵列2 返回数组中的所有匹配项，如果存在，则返回空数组 没有火柴。 */ const filterList=arr1，arr2=>arr1.filterele=>arr2.includesele； //将结果存储在变量中。 常量图标=过滤器列表白名单，weatherName； /* 如果没有匹配项[？]，请使用默认图像文件名[：] 否则，请使用返回数组的第一个图像文件名。 */ 让图像=图标===[]`pexels-photo-39811`：图标[0]； /* 将图像文件名插入到包含 url的公共部分。 */ 常量url=`https://i.ibb.co/y4Ctj4p/${image}.jpg`； /* 将CSS样式属性backgroundImage指定给[style] 块元素的属性。有两个原因可以解释[风格] 属性被使用： 1.使用[style]属性是设置任何样式的最简单方法 DOM元素。 2.几乎不可能推翻它，它推翻了它 一切都好，所以没有意外。 */ bkg.style.backgroundImage=`url${url}`； html， 身体{ 宽度：100%； 身高：100%； 字体：40016px/1.45verdana； } 身体{ 溢出x：隐藏； 溢出y：滚动； 字号：1rem； } .bkg{ 宽度：100%； 身高：100%； 保证金：0自动； 背景重复：无重复； 背景位置：中心； 背景尺寸：封面； }

---

不要一次问两个不同的问题。写这篇文章之前我问过这个问题，但是如果没有提到它是哪一个问题，回答的代码对我来说不起作用，这不是一个好主意，如果我不知道其他答案是什么，为什么我要花时间回答这个问题。这看起来并不复杂。为什么你觉得它需要简化？这看起来很简单。是什么让你认为这段代码没有效率？这将需要非常非常非常小的时间来计算，几乎不需要CPU。真的不清楚你为什么这么反对这段代码？@Liam问题不是执行速度，问题是重复的代码。@Liam啊，我忽略了第二个问题…@Liam我问如何更快地加载bgImg的原因是，当API发出新请求时，图像加载速度没有加快，更改图像src需要1到2秒，我认为这不是一个好的性能，这就是我问的原因。注意：这决不会比OP已经拥有的速度快

---

我们应该匹配smoke，但给定代码中的条件是weatherName==smoke，因此它必须是精确匹配。@t.niese这里我编辑它以正确检查条件并给出正确的结果。我认为这是一个更复杂的解决方案，肯定不会更快