如何减少 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 = [&nbsp; &nbsp; {color: "Red", size: "Big", cmp: "==", bananas: 10, fb: "Gog -1?!?!?!", img: "gog-1.gif"},&nbsp; &nbsp; {color: "Red", size: "Big", cmp: "<", bananas: 5, fb: "You are gog 720!", img: "gog720.gif"},&nbsp; &nbsp; {color: "Red", size: "Big", cmp: "none", fb: "You are Gog 6!", img: "gog6.gif"},&nbsp; &nbsp; {color: "Red", size: "Medium", cmp: ">", bananas: 5, fb: "You are Gog 51!", img: "gog51pog-min.gif"},&nbsp; &nbsp; // continue on like this&nbsp; &nbsp; // we need some special ones that can't be easily expressed&nbsp; &nbsp; {special: true, cond: (color, size, bananas) => color == "Black" || bananas < 5, fb: "You are Gog 23!", img: "gog23.gif"},&nbsp; &nbsp; {special: true, cond: (color, size, bananas) => bananas > 5 && size != "Big", fb: "You are Gog 12!", img: "gog12.gif"},&nbsp; &nbsp; {special: true, cond: () => true, fb: "You are not a Gog yet!", img: "gogprequil.gif"}];const cmps = {&nbsp; &nbsp; "=="(a, b) { return a == b; },&nbsp; &nbsp; ">"(a, b) { return a > b; },&nbsp; &nbsp; "<"(a, b) { return a < b; },&nbsp; &nbsp; ">="(a, b) { return a >= b; },&nbsp; &nbsp; "<="(a, b) { return a <= b; }};// later in your code when checking gogsfor (const gog of gogs) {&nbsp; &nbsp; if (gog.special) {&nbsp; &nbsp; &nbsp; &nbsp; if (!gog.cond(color, size, bananas)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; continue;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; if (gog.color != color || gog.size != size) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; continue;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; if (gog.cmp != "none" && !cmps[gog.cmp](bananas, gog.bananas)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; continue;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; setText("feedbackOutput", gog.fb);&nbsp; &nbsp; setImageURL("gog", gog.img);&nbsp; &nbsp; break;}

Answer 2

您想尝试将数据与逻辑分开。这简化了数据更新以及逻辑处理。首先，定义您的数据集：const gogs = [&nbsp; { color: 'black', size: 'small', minBananas: 0, imgUrl: 'gog12-2.gif' },&nbsp; { color: 'black', size: 'small', minBananas: 6, imgUrl: 'gog34.gif' },&nbsp; // etc.];现在，当您想要处理数据时，可以执行以下操作：const gog = gogs.find((gog) => {&nbsp; gog.color === color &&&nbsp; gog.size === size &&&nbsp; gog.miniBananas <= bananaCount});if (!gog) {&nbsp; return;}setImageURL(gog.imgUrl);另请参阅： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find

Answer 3

您有很多重复的color和size参数。您可以按照 Aplet123 的建议进行操作，但这可能无法帮助您思考对 if 语句进行分组的一般策略。更简单的方法可能是这样的&nbsp; &nbsp; if (color == "Red") { // group by "Red" first--anything that is "Red" will go into this block&nbsp; &nbsp; &nbsp; &nbsp; if (size == "Big") { // next group by "Big" -- anything "Red" + "Big" will go into this block&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (bananas == 10) { // so if we get true here, we know we are Red + Big + bananas = 10&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setText("feedbackOutput", "Gog -1?!?!?!");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setImageURL("gog", "gog-1.gif");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else if (bananas < 5) { // if we get true here, we know we are Red + Big + bananas < 5&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setText("feedbackOutput", "You are Gog 720!");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setImageURL("gog", "gog720.gif");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setText("feedbackOutput", "You are Gog 6!");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setImageURL("gog", "gog6.gif");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; } // end of block of conditions for "Big" + "Red"&nbsp; &nbsp; &nbsp; &nbsp; else if (size == "Medium" ) { // group by "Medium"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (bananas > 6) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setText("feedbackOutput", "You are Gog 51!");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setImageURL("gog", "gog51pog-min.gif");&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else if ( bananas < 4){&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setText("feedbackOutput", "You are Gog 5!");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setImageURL("gog", "gog5.gif");&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setText("feedbackOutput", "You are Gog 33!");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setImageURL("gog", "gog33.gif");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; } // end of Red + Medium&nbsp; &nbsp; &nbsp; // next we would try the "Small" ones (left as an exercise to reader)&nbsp; }&nbsp; else if (color == "Brown") {&nbsp; &nbsp; // similar to above, group by sizes then for each size check banana conditions&nbsp; }&nbsp;// etc&nbsp;这根本不会节省长度，但可以节省每个if语句的复杂性，这可能是初学者应该考虑的问题。