Question

我的代码包含很多多个if语句。有没有其他方法可以摆脱这些陈述。例如，假设我有以下条件

if(t1 >= 1 && t2 == 0 && t3 == 0) $('div.b_class').fadeIn();
if(t1 == 0 && t2 >= 1 && t3 == 0) $('div.c_class').fadeIn();
if(t1 == 0 && t2 == 0 && t3 == 1) $('div.d_class').fadeIn();
if(t1 && t2 >= 1 && t3 == 0) $('div.b_class.c_class').fadeIn();
if(t1 && t3 >= 1&& t2 == 0) $('div.b_class.d_class').fadeIn();

有没有办法简化这些陈述？

Answer 1

您可以使用具有以下条件的开关案例结构：

switch(true)
{
 case (t1 >= 1 && t2 == 0 && t3 == 0) : $('div.b_class').fadeIn(); break;
 case (t1 == 0 && t2 >= 1 && t3 == 0) : $('div.c_class').fadeIn(); break;
 case (t1 == 0 && t2 == 0 && t3 == 1) : $('div.d_class').fadeIn(); break;
 case (t1 && t2 >= 1 && t3 == 0)      : $('div.b_class.c_class').fadeIn(); break;
 case (t1 && t3 >= 1&& t2 == 0)       : $('div.b_class.d_class').fadeIn(); break;
}

Answer 2

好的，假设你真的有很多if s，你的t是固定整数，并且主要目标是您的许多“规则”的可读性。然后你可以尝试以下方法。

首先，我要确保所有t都具有有效值并跳过未定义的情况。如果变量t是真实的逻辑值而不是数字，我也只会使用显式规则（例如，t1 == 0而不是>, <, >=, <=），尤其是如果您要实施的规则与if声明中表达的规则不同。

然后，您可以使用数字系统对逻辑进行编码，例如，使用小数字以获得良好的可读性。对于每个t，您使用编码逻辑的新“逻辑编号”的一个小数位：

111 means t1 == t2 == t1 == 1
201 means t1 == 2, t2 == 0, t3 == 1
etc.

可以通过t1，t2和t3轻松创建该号码：

num = t1*100 + t2*10 + t3

下面的开关案例实现了你的逻辑。它是您if规则的展开版本。通过不允许进行多值检查（通过>=等），我们需要为每个值指定一个规则你想要处理的组合。这可能会增加您必须指定的数量或规则但也可能使您的逻辑规则更具可读性和可维护性。

var getFadeInClass = function(t1,t2,t3) {
    // for the sake of shortness I use ".b" instead of ".b_class" etc.
    var num = t1*100 + t2*10 + t3

    switch(logic_state){
    case 100:; case 200:; case 300: return ".b"
    case  10:; case  20:; case  30: return ".c"

    case   1:                       return ".d"

    case 110:; case 120:; case 130:;
    case 210:; case 220:; case 230:;
    case 310:; case 320:; case 330: return ".b.c"

    case 101:; case 102:; case 103:;
    case 201:; case 202:; case 203:;
    case 301:; case 302:; case 303: return ".b.d"
}
return ""

}

您还可以使用数学或其他类型的测试来推断数字。

var x = t1*100 + t2*10 + t3
if ( x != 0 && x%100    == 0)  return "b"
if ( x != 0 && x%100%10 == 0)  return "c"
if ( x == 1 )                  return "d"

但我更喜欢切换机箱，因为它读得更好。我希望这是你想要实现的目标。：）

您可以在this fiddle中查看此十进制逻辑的运行版本。

干杯，尤文

Answer 3

这应该有效：

var selector = 'div';
if (t1) {
    selector += '.b_class';
}
if (t2) {
    selector += '.c_class';
}
if (t3) {
    selector += '.d_class';
}
$(selector).fadeIn();

它依赖于tX的“truthy / falsy”值（0为假，1-3为真，请参阅http://11heavens.com/falsy-and-truthy-in-javascript以获取有关“truthy / falsy”的更多详细信息。）

此方法的唯一警告是selector，'div.b_class.c_class.d_class'和{{1}允许t1为t2都是非零的。

如果在这种情况下不接受t3，请将selector条件更改为t3。

当if (t3 && !(t1 || t2))条件修改为t3时，if (t3 && !(t1 || t2))附加selector的唯一方式是d_class非零且两者{ {1}}和t3为零。

t1

<强>更新

最初的答案是我怀疑OP实际上的意图（因为OP意味着代码是假设的），所以感谢Juve发现它。为了满足cbayram，这将复制OP的逻辑（虽然我不确定你是否可以称之为“简化”，因为它只删除了一个t2比较并且更难以阅读）。

var selector = 'div';
if (t1) {
    selector += '.b_class';
}
if (t2) {
    selector += '.c_class';
}
if (t3 && !(t1 || t2)) { //modified conditional
    selector += '.d_class';
}
$(selector).fadeIn();

这里有一个小提琴：http://jsfiddle.net/dX7AK/

Answer 4

如果t1，t2和t3为0到正无穷大，修改后的逻辑有点浓缩：

<!DOCTYPE html>
<html>
   <head>
      <script type="text/javascript">
        function orig(t1, t2, t3) {
            var hits = "";
            if(t1 >= 1 && t2 == 0 && t3 == 0) hits += 'div.b_class\n';
            if(t1 == 0 && t2 >= 1 && t3 == 0) hits += 'div.c_class\n'; 
            if(t1 == 0 && t2 == 0 && t3 == 1) hits += 'div.d_class\n';
            if(t1 && t2 >= 1 && t3 == 0) hits += 'div.b_class.c_class\n';
            if(t1 && t3 >= 1 && t2 == 0) hits += 'div.b_class.d_class\n';
            return hits;
        }
        function modified(t1, t2, t3) {
            var hits = "";
            if(t2 >= 1 && t3 == 0)
                hits += (t1 == 0)?'div.c_class\n':'div.b_class.c_class\n';
            if(t1 >= 1 && t2 == 0) 
                hits += (t3 == 0)?'div.b_class\n':'div.b_class.d_class\n';          
            if(t1 == 0 && t2 == 0 && t3 == 1)   
                hits += 'div.d_class\n';
            return hits;
        }

        function runTest() {
            for(var i = 0; i < 3; i++) {
                for(var j = 0; j < 3; j++) {
                    for(var k = 0; k < 3; k++) {                    
                        var o = orig(i, j, k);
                        var m = modified(i, j, k);
                        if(o != m)
                            console.info(o + " | " + m);
                        console.warn("t1="+i+", t2="+j+", t3="+k + ": " + ((o == m)?"PASS":"FAIL"));            
                    }       
                }       
            }       

        }
      </script>
   </head>
   <body onload="runTest()">
   </body>
</html>

在任何一种情况下，这都是测试您的修改与原始修改的好方法。

多个if语句的替代方案

4 个答案: