我可以简化这个 javascript if 语句吗？答案

【问题标题】：Can I simplify this javascript if-statement?我可以简化这个 javascript if 语句吗？
【发布时间】：2017-07-15 20:54:59
【问题描述】：

我目前正在开发一个轮播类型的网站，从外观上看，我到目前为止编写的代码看起来非常相似，并且看起来好像可以以某种方式简化。

我只是指 if 语句部分，但欢迎提出任何其他建议。

提前致谢。

// scripts

function app() {

    console.log("App is running");

    // store elements in dom
    var numberButtons = document.querySelectorAll(".number");

    // loop to add event listener to each button
    for (var i = 0; i < numberButtons.length; i++) {

        // add click event listener
        numberButtons[i].addEventListener("click", changeButton);
    }

    function changeButton(e) {

        // get dataset value
        var target = e.target;
        var targetDataset = e.currentTarget.dataset.number;
        var backgroundImage = document.getElementById("background-image");
        var sections = document.querySelectorAll(".screen");
        var intro = document.getElementById("intro");
        var sectionNumbers = document.querySelectorAll(".section-number");

        for (var numberButton of numberButtons) {
            numberButton.classList.remove("number-active");
        }

        for (var section of sections) {
            section.classList.add("section-hidden");
        }

        for (var sectionNumber of sectionNumbers) {
            sectionNumber.classList.add("section-number-hidden");
        }

        if (targetDataset === "zero") {
            backgroundImage.removeAttribute("class");
            target.classList.add("number-active");
            backgroundImage.classList.add("position-" + targetDataset);

            setTimeout(function(){
            sections[0].classList.remove("section-hidden");
            sections[0].classList.add("sections-active");

			},1000);

        } else if (targetDataset === "one") {
            target.classList.add("number-active");
            backgroundImage.removeAttribute("class");
            backgroundImage.classList.add("position-" + targetDataset);
            intro.classList.remove("intro-active");
            intro.classList.add("intro-hidden");

            setTimeout(function(){
            sections[1].classList.remove("section-hidden");
            sections[1].classList.add("sections-active");
            sectionNumbers[0].classList.remove("section-number-hidden");
            sectionNumbers[0].classList.add("section-number-active");

			},1000);

        } else if (targetDataset === "two") {
            backgroundImage.removeAttribute("class");
            target.classList.add("number-active");
            backgroundImage.classList.add("position-" + targetDataset);
            intro.classList.remove("intro-active");
            intro.classList.add("intro-hidden");

            setTimeout(function(){
            sections[2].classList.remove("section-hidden");
            sections[2].classList.add("sections-active");

            sectionNumbers[1].classList.remove("section-number-hidden");
            sectionNumbers[1].classList.add("section-number-active");

			},1000);

        } else if (targetDataset === "three") {
            target.classList.add("number-active");
            backgroundImage.classList.add("position-" + targetDataset);
            intro.classList.remove("intro-active");
            intro.classList.add("intro-hidden");

            setTimeout(function(){
            sections[3].classList.remove("section-hidden");
            sections[3].classList.add("sections-active");

            sectionNumbers[2].classList.remove("section-number-hidden");
            sectionNumbers[2].classList.add("section-number-active");

			},1000);

        } else if (targetDataset === "four") {
            backgroundImage.removeAttribute("class");
            target.classList.add("number-active");
            backgroundImage.classList.add("position-" + targetDataset);
            intro.classList.remove("intro-active");
            intro.classList.add("intro-hidden");

            setTimeout(function(){

            sections[4].classList.remove("section-hidden");
            sections[4].classList.add("sections-active");
            sectionNumbers[3].classList.remove("section-number-hidden");
            sectionNumbers[3].classList.add("section-number-active");

			},1000);

        } else if (targetDataset === "five") {
            backgroundImage.removeAttribute("class");
            target.classList.add("number-active");
            backgroundImage.classList.add("position-" + targetDataset);
            intro.classList.remove("intro-active");
            intro.classList.add("intro-hidden");

            setTimeout(function(){

            sections[5].classList.remove("section-hidden");
            sections[5].classList.add("sections-active");
            sectionNumbers[4].classList.remove("section-number-hidden");
            sectionNumbers[4].classList.add("section-number-active");


			},1000);

        } else if (targetDataset === "six") {
            backgroundImage.removeAttribute("class");
            target.classList.add("number-active");
            backgroundImage.classList.add("position-" + targetDataset);
            intro.classList.remove("intro-active");
            intro.classList.add("intro-hidden");

            setTimeout(function(){

            sections[6].classList.remove("section-hidden");
            sections[6].classList.add("sections-active");
            sectionNumbers[5].classList.remove("section-number-hidden");
            sectionNumbers[5].classList.add("section-number-active");

			},1000);

        } else if (targetDataset === "seven") {
            backgroundImage.removeAttribute("class");
            target.classList.add("number-active");
            backgroundImage.classList.add("position-" + targetDataset);
            intro.classList.remove("intro-active");
            intro.classList.add("intro-hidden");

            setTimeout(function(){

            sections[7].classList.remove("section-hidden");
            sections[7].classList.add("sections-active");

            sectionNumbers[6].classList.remove("section-number-hidden");
            sectionNumbers[6].classList.add("section-number-active");

			},1000);

        } else if (targetDataset === "eight") {
            backgroundImage.removeAttribute("class");
            target.classList.add("number-active");
            backgroundImage.classList.add("position-" + targetDataset);
            intro.classList.remove("intro-active");
            intro.classList.add("intro-hidden");

            setTimeout(function(){

            sections[8].classList.remove("section-hidden");
            sections[8].classList.add("sections-active");

            sectionNumbers[7].classList.remove("section-number-hidden");
            sectionNumbers[7].classList.add("section-number-active");

			},1000);

        } else if (targetDataset === "nine") {
            backgroundImage.removeAttribute("class");
            target.classList.add("number-active");
            backgroundImage.classList.add("position-" + targetDataset);
            intro.classList.remove("intro-active");
            intro.classList.add("intro-hidden");

            setTimeout(function(){

            sections[9].classList.remove("section-hidden");
            sections[9].classList.add("sections-active");

            sectionNumbers[8].classList.remove("section-number-hidden");
            sectionNumbers[8].classList.add("section-number-active");

        },1000);

        }
    }
}

document.onload = app();

【问题讨论】：

您使用 switch 语句而不是 if 语句来使代码更具可读性。如果您有大量的 if else 语句，那么使用 switch 语句总是一个好主意。 w3schools.com/js/js_switch.asp
更好的是，将所有 if-else 比较转换为遍历数组并检查
@frozen 是的，这样会更好

标签： javascript loops

【解决方案1】：

由于您对数字的所有迭代都具有相同的主体，因此您可以检查数组中的数字，并进行一次主体检查。

var arr = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine"];

for(let i=0; i<arr.length; i++)
    if (targetDataset === arr[i]) {
        backgroundImage.removeAttribute("class");
        target.classList.add("number-active");
        backgroundImage.classList.add("position-" + targetDataset);
        intro.classList.remove("intro-active");
        intro.classList.add("intro-hidden");

        setTimeout(function(){

            sections[i].classList.remove("section-hidden");
            sections[i].classList.add("sections-active");
            if(i>0){
            sectionNumbers[i-1].classList.remove("section-number-hidden");
            sectionNumbers[i-1].classList.add("section-number-active");
            }
        },1000);

    }
});

如果你愿意使用ES6（强烈推荐），那就更好了：

const arr = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine"];

for (let i = 0; i < arr.length; i++) {
  if (targetDataset !== arr[i])
    continue;
  backgroundImage.removeAttribute("class");
  target.classList.add("number-active");
  backgroundImage.classList.add("position-" + targetDataset);
  intro.classList.remove("intro-active");
  intro.classList.add("intro-hidden");

  setTimeout(() => {
    let sect = sections[i].classList;
    sect.remove("section-hidden");
    sect.add("sections-active");
    if (i > 0) {
      let sectNum = sectionNumbers[i-1].classList;
      sectNum.remove("section-number-hidden");
      sectNum.add("section-number-active");
    }
  }, 1000);
}

上面的代码比你原来的更易读和清晰：

if (targetDataset === "zero") {
        backgroundImage.removeAttribute("class");
        target.classList.add("number-active");
        backgroundImage.classList.add("position-" + targetDataset);

        setTimeout(function(){
        sections[0].classList.remove("section-hidden");
        sections[0].classList.add("sections-active");

        },1000);

    } else if (targetDataset === "one") {
        target.classList.add("number-active");
        backgroundImage.removeAttribute("class");
        backgroundImage.classList.add("position-" + targetDataset);
        intro.classList.remove("intro-active");
        intro.classList.add("intro-hidden");

        setTimeout(function(){
        sections[1].classList.remove("section-hidden");
        sections[1].classList.add("sections-active");
        sectionNumbers[0].classList.remove("section-number-hidden");
        sectionNumbers[0].classList.add("section-number-active");

        },1000);

    } else if (targetDataset === "two") {
        backgroundImage.removeAttribute("class");
        target.classList.add("number-active");
        backgroundImage.classList.add("position-" + targetDataset);
        intro.classList.remove("intro-active");
        intro.classList.add("intro-hidden");

        setTimeout(function(){
        sections[2].classList.remove("section-hidden");
        sections[2].classList.add("sections-active");

        sectionNumbers[1].classList.remove("section-number-hidden");
        sectionNumbers[1].classList.add("section-number-active");

        },1000);

    } else if (targetDataset === "three") {
        target.classList.add("number-active");
        backgroundImage.classList.add("position-" + targetDataset);
        intro.classList.remove("intro-active");
        intro.classList.add("intro-hidden");

        setTimeout(function(){
        sections[3].classList.remove("section-hidden");
        sections[3].classList.add("sections-active");

        sectionNumbers[2].classList.remove("section-number-hidden");
        sectionNumbers[2].classList.add("section-number-active");

        },1000);

    } else if (targetDataset === "four") {
        backgroundImage.removeAttribute("class");
        target.classList.add("number-active");
        backgroundImage.classList.add("position-" + targetDataset);
        intro.classList.remove("intro-active");
        intro.classList.add("intro-hidden");

        setTimeout(function(){

        sections[4].classList.remove("section-hidden");
        sections[4].classList.add("sections-active");
        sectionNumbers[3].classList.remove("section-number-hidden");
        sectionNumbers[3].classList.add("section-number-active");

        },1000);

    } else if (targetDataset === "five") {
        backgroundImage.removeAttribute("class");
        target.classList.add("number-active");
        backgroundImage.classList.add("position-" + targetDataset);
        intro.classList.remove("intro-active");
        intro.classList.add("intro-hidden");

        setTimeout(function(){

        sections[5].classList.remove("section-hidden");
        sections[5].classList.add("sections-active");
        sectionNumbers[4].classList.remove("section-number-hidden");
        sectionNumbers[4].classList.add("section-number-active");


        },1000);

    } else if (targetDataset === "six") {
        backgroundImage.removeAttribute("class");
        target.classList.add("number-active");
        backgroundImage.classList.add("position-" + targetDataset);
        intro.classList.remove("intro-active");
        intro.classList.add("intro-hidden");

        setTimeout(function(){

        sections[6].classList.remove("section-hidden");
        sections[6].classList.add("sections-active");
        sectionNumbers[5].classList.remove("section-number-hidden");
        sectionNumbers[5].classList.add("section-number-active");

        },1000);

    } else if (targetDataset === "seven") {
        backgroundImage.removeAttribute("class");
        target.classList.add("number-active");
        backgroundImage.classList.add("position-" + targetDataset);
        intro.classList.remove("intro-active");
        intro.classList.add("intro-hidden");

        setTimeout(function(){

        sections[7].classList.remove("section-hidden");
        sections[7].classList.add("sections-active");

        sectionNumbers[6].classList.remove("section-number-hidden");
        sectionNumbers[6].classList.add("section-number-active");

        },1000);

    } else if (targetDataset === "eight") {
        backgroundImage.removeAttribute("class");
        target.classList.add("number-active");
        backgroundImage.classList.add("position-" + targetDataset);
        intro.classList.remove("intro-active");
        intro.classList.add("intro-hidden");

        setTimeout(function(){

        sections[8].classList.remove("section-hidden");
        sections[8].classList.add("sections-active");

        sectionNumbers[7].classList.remove("section-number-hidden");
        sectionNumbers[7].classList.add("section-number-active");

        },1000);

    } else if (targetDataset === "nine") {
        backgroundImage.removeAttribute("class");
        target.classList.add("number-active");
        backgroundImage.classList.add("position-" + targetDataset);
        intro.classList.remove("intro-active");
        intro.classList.add("intro-hidden");

        setTimeout(function(){

        sections[9].classList.remove("section-hidden");
        sections[9].classList.add("sections-active");

        sectionNumbers[8].classList.remove("section-number-hidden");
        sectionNumbers[8].classList.add("section-number-active");

    },1000);

    }

【讨论】：

只是想知道，对于您共享的第一个代码，为什么使用 var 而不是 let 不起作用？
@norrrisollie 可以，但如果您的浏览器支持 es6，则使用let 被认为是更好的编码习惯。
好的，谢谢。我确实尝试过，但使用 var 似乎对我不起作用。

【解决方案2】：

您可以获得targetDataset 字符串的数值，它对应于您在sections 数组中使用的索引。然后你不再需要if，也不需要循环。然后if...else...else...else... 部分变为：

    var targetDatasetNo = ["zero", "one", "two", "three", "four", "five",
            "six", "seven", "eight", "nine"].indexOf(targetDataset);
    backgroundImage.setAttribute("class", "position-" + targetDataset);
    target.classList.add("number-active");
    if (targetDatasetNo) {
        intro.classList.remove("intro-active");
        intro.classList.add("intro-hidden");
    }
    setTimeout(function(){
        sections[targetDatasetNo].classList.remove("section-hidden");
        sections[targetDatasetNo].classList.add("sections-active");
        if (targetDatasetNo) {
            sectionNumbers[targetDatasetNo-1].classList.remove("section-number-hidden");
            sectionNumbers[targetDatasetNo-1].classList.add("section-number-active");
        }
    },1000);

【讨论】：

【解决方案3】：

我建议像这样添加else if 语句：

// add targets up to "nine" with "OR" ( || ) 
if (targetDataset === "one" || targetDataset === "two") {
  arget.classList.add("number-active");
            backgroundImage.removeAttribute("class");
            backgroundImage.classList.add("position-" + targetDataset);
            intro.classList.remove("intro-active");
            intro.classList.add("intro-hidden");

            setTimeout(function(){
            sections[1].classList.remove("section-hidden");
            sections[1].classList.add("sections-active");
            sectionNumbers[0].classList.remove("section-number-hidden");
            sectionNumbers[0].classList.add("section-number-active");

            },1000);
}

因为您正在为这些条件执行相同的代码。

【讨论】：