javascript - 如何简化包含大量 if 语句的代码以及如何更快地更改图像

Question

就两个简单的问题，

Q(1) 下面的代码有多个 if else 语句我想知道是否有一种方法可以使用数组或其他东西来简化它。

Q(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;
    }

标签： javascriptperformanceif-statementecmascript-6ecmascript-5

Answer 1

您可以使用两个数组进行包含包含的部分字符串检查，并进行精确检查并返回带有替换空格的查找。

const getIcon = weather => {
    var includes = ['rain', 'clouds'],
        exact = ['snow', 'mist', 'clear sky', 'smoke', 'dust', 'drizzle', 'haze', 'fog', 'thunderstorm'],
        type = includes.find(w => weather.includes(w)) ||
               exact.includes(weather) && weather ||
              'pexels-photo-39811';

    return `./images/${type.replace(/\s/g, '-')}.jpg`;
};

console.log(getIcon('some rain'));
console.log(getIcon('clear sky'));
console.log(getIcon('foo'));