如何减少 If 语句？

Question

我是一个超级初学者程序员，我正在制作一个简单的应用程序，它根据高中项目的输入选择猴子（gog）。我查过这个问题，所有的答案似乎都是针对具体情况的，或者超出了我的理解范围，所以 ELI5 的答案将不胜感激。这是我的代码供参考：    //variables    var bananas;    var color;    var size;        //updates color on click    onEvent("colorDD", "click", function( ) {      updateScreen();    });        //updates size on click    onEvent("sizeDD", "click", function( ) {      updateScreen();    });        //updates bananas consumed on slider move    onEvent("bananaSlider", "mousemove", function( ) {      updateScreen();    });        //Updates the screen with all info including bananas, color, and size to display Gog image        function updateScreen() {            //color storer      color = getText("colorDD");            //size storer      size = getText("sizeDD");              //banana storer      bananas = getNumber("bananaSlider");                  //If statement for bottom text      if (color == "Red" && bananas == 10 && size == "Big"){ // Big Red Gogs        setText("feedbackOutput", "Gog -1?!?!?!");        setImageURL("gog", "gog-1.gif");            } else if ( color == "Red" && size == "Big" && bananas < 5){        setText("feedbackOutput", "You are Gog 720!");        setImageURL("gog", "gog720.gif");            } else if ( color == "Red" && size == "Big"){        setText("feedbackOutput", "You are Gog 6!");        setImageURL("gog", "gog6.gif");              } else if ( color == "Red" && size == "Medium" && bananas > 6){ // Medium Red Gogs        setText("feedbackOutput", "You are Gog 51!");        setImageURL("gog", "gog51pog-min.gif");                } else if ( color == "Red" && size == "Medium" && bananas < 4){         setText("feedbackOutput", "You are Gog 5!");        setImageURL("gog", "gog5.gif");                } 可以看出，有香蕉、颜色和大小三个变量，为每个变量选择特定值将在屏幕上给出不同的图像。

Answer 1

您可以将信息存储在对象中，然后迭代它们并检查：

const gogs = [

    {color: "Red", size: "Big", cmp: "==", bananas: 10, fb: "Gog -1?!?!?!", img: "gog-1.gif"},

    {color: "Red", size: "Big", cmp: "<", bananas: 5, fb: "You are gog 720!", img: "gog720.gif"},

    {color: "Red", size: "Big", cmp: "none", fb: "You are Gog 6!", img: "gog6.gif"},

    {color: "Red", size: "Medium", cmp: ">", bananas: 5, fb: "You are Gog 51!", img: "gog51pog-min.gif"},

    // continue on like this

    // we need some special ones that can't be easily expressed

    {special: true, cond: (color, size, bananas) => color == "Black" || bananas < 5, fb: "You are Gog 23!", img: "gog23.gif"},

    {special: true, cond: (color, size, bananas) => bananas > 5 && size != "Big", fb: "You are Gog 12!", img: "gog12.gif"},

    {special: true, cond: () => true, fb: "You are not a Gog yet!", img: "gogprequil.gif"}

];

const cmps = {

    "=="(a, b) { return a == b; },

    ">"(a, b) { return a > b; },

    "<"(a, b) { return a < b; },

    ">="(a, b) { return a >= b; },

    "<="(a, b) { return a <= b; }

};

// later in your code when checking gogs

for (const gog of gogs) {

    if (gog.special) {

        if (!gog.cond(color, size, bananas)) {

            continue;

        }

    } else {

        if (gog.color != color || gog.size != size) {

            continue;

        }

        if (gog.cmp != "none" && !cmps[gog.cmp](bananas, gog.bananas)) {

            continue;

        }

    }

    setText("feedbackOutput", gog.fb);

    setImageURL("gog", gog.img);

    break;

}

Answer 2

您想尝试将数据与逻辑分开。这简化了数据更新以及逻辑处理。首先，定义您的数据集：

const gogs = [

  { color: 'black', size: 'small', minBananas: 0, imgUrl: 'gog12-2.gif' },

  { color: 'black', size: 'small', minBananas: 6, imgUrl: 'gog34.gif' },

  // etc.

];

现在，当您想要处理数据时，可以执行以下操作：

const gog = gogs.find((gog) => {

  gog.color === color &&

  gog.size === size &&

  gog.miniBananas <= bananaCount

});

if (!gog) {

  return;

}

setImageURL(gog.imgUrl);

另请参阅： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find

Answer 3

您有很多重复的color和size参数。您可以按照 Aplet123 的建议进行操作，但这可能无法帮助您思考对 if 语句进行分组的一般策略。

更简单的方法可能是这样的

    if (color == "Red") { // group by "Red" first--anything that is "Red" will go into this block

        if (size == "Big") { // next group by "Big" -- anything "Red" + "Big" will go into this block

            if (bananas == 10) { // so if we get true here, we know we are Red + Big + bananas = 10

                setText("feedbackOutput", "Gog -1?!?!?!");

                setImageURL("gog", "gog-1.gif");

            }

            else if (bananas < 5) { // if we get true here, we know we are Red + Big + bananas < 5

                setText("feedbackOutput", "You are Gog 720!");

                setImageURL("gog", "gog720.gif");

            } 

            else {

                setText("feedbackOutput", "You are Gog 6!");

                setImageURL("gog", "gog6.gif");

            } 

        } // end of block of conditions for "Big" + "Red"

        else if (size == "Medium" ) { // group by "Medium" 

            if (bananas > 6) {

                setText("feedbackOutput", "You are Gog 51!");

                setImageURL("gog", "gog51pog-min.gif");  

        

            } 

            else if ( bananas < 4){ 

                setText("feedbackOutput", "You are Gog 5!");

                setImageURL("gog", "gog5.gif");  

        

            } 

            else {

                setText("feedbackOutput", "You are Gog 33!");

                setImageURL("gog", "gog33.gif");

            }

      } // end of Red + Medium

      // next we would try the "Small" ones (left as an exercise to reader)

  }

  else if (color == "Brown") {

    // similar to above, group by sizes then for each size check banana conditions

  }

 // etc 

这根本不会节省长度，但可以节省每个if语句的复杂性，这可能是初学者应该考虑的问题。