【问题标题】:How to write an inline IF statement in JavaScript?如何在 JavaScript 中编写内联 IF 语句?
【发布时间】:2012-05-03 11:06:38
【问题描述】:

如何在 JavaScript 中使用内联 if 语句?是否也有内联 else 语句?

类似这样的:

var a = 2;
var b = 3;

if(a < b) {
    // do something
}

【问题讨论】:

  • 这里的 jQuery 在哪里?而且我还是不太明白这个问题。
  • jquery 部分可能是这样的 $(document).ready(function(){ var a = 2; var b = 3; if(a
  • 这也是一个淘汰赛题
  • 这也是一个 Angular 1 和 2 以及所有其他 js 框架(包括 vanilla.js)的问题

标签: javascript if-statement ternary-operator conditional-operator


【解决方案1】:

你可以在 JavaScript 中这样做:

a < b ? passed() : failed();

【讨论】:

    【解决方案2】:

    您不一定需要 jQuery。仅 JavaScript 就可以做到这一点。

    var a = 2;
    var b = 3;    
    var c = ((a < b) ? 'minor' : 'major');
    

    如果值为true,则c 变量将为minor,如果值为false,则为major


    这称为条件(三元)运算符。

    https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/Conditional_Operator

    【讨论】:

    • 它说明了如何使用内联 IF,它可以准确地回答问题。
    • 请注意,这种情况下的所有括号都是可选的。通常是个人偏好/编码风格决定何时使用它们。
    • @khany,这是一个 JavaScript 问题。表达式在其他语言中的计算方式可能不同。
    • @MattW 这没有展示如何使用内联 IF,它展示了如何使用 IF ELSE
    • @getName 不是真的,但如果你想要if (a &lt; b) c = 'major';,你可以使用单行 if 语句
    【解决方案3】:

    有一个三元运算符,像这样:

    var c = (a < b) ? "a is less than b"  : "a is not less than b";
    

    【讨论】:

    • 它实际上不必分配给任何东西。右边的元素可以简单地是函数调用。
    • 它们甚至不必是函数调用...0 &lt; 1 : 5 : 120; 是一个完全有效的声明。不过,除非您按线路付费,否则有点没用。
    • @jfriend00 不过,在几乎所有情况下,我都会建议不要这样做。如果您不使用表达式的值,那么您真正想要的是副作用; statements 最擅长的是副作用。在这种情况下使用平淡无味的 if 语句可能会使您的代码更易于阅读和理解,并且不太可能因以后的更改而中断。
    【解决方案4】:

    为了写if内联语句,里面的代码应该只有一个语句:

    if ( a < b ) // code to be executed without curly braces;
    

    【讨论】:

      【解决方案5】:
      <div id="ABLAHALAHOO">8008</div>
      <div id="WABOOLAWADO">1110</div>
      
      parseInt( $( '#ABLAHALAHOO' ).text()) > parseInt( $( '#WABOOLAWADO ).text()) ? alert( 'Eat potato' ) : alert( 'You starve' );
      

      【讨论】:

      • 我什至不知道我刚刚读了什么,但我笑得很厉害。
      【解决方案6】:

      用简单的英语解释语法:

      if(condition){
          do_something_if_condition_is_met;
      }
      else{
          do_something_else_if_condition_is_not_met;
      }
      

      可以写成:

      condition ? do_something_if_condition_is_met : do_something_else_if_condition_is_not_met;
      

      【讨论】:

      • 是否可以在没有“else”语句的情况下执行此操作?即condition ? true
      • @ScottBeeson 当然。这也取决于您对条件的使用。 true false"" 应该都可以忽略 else 部分。
      • 所以2 == 2 ? doSomething() 将与if (2 == 2) doSomething() 相同?
      • 可以,但是else部分不能完全省略。至少 : false: "" 应该在那里,因为 javascript 期待这个。
      • 哦。因此,如果没有 else 语句,不可能做到这一点。
      【解决方案7】:

      要添加到此,您还可以使用带有 && 和 || 的内联 if 条件运营商。 像这样

      var a = 2;
      var b = 0;
      
      var c = (a > b || b == 0)? "do something" : "do something else";
      

      【讨论】:

        【解决方案8】:

        您也可以仅使用逻辑运算符来近似 if/else。

        (a && b) || c
        

        上面说的大致相同:

        a ? b : c
        

        当然,大致相同:

        if ( a ) { b } else { c }
        

        我粗略地说是因为这种方法有一个区别,那就是您必须知道b 的值将评估为真,否则您将始终得到c。基本上,您必须意识到将出现 if () { here } 的部分现在是您放置 if ( here ) { } 的条件的一部分。

        由于 JavaScript 传递/返回形成逻辑表达式的原始值之一的行为,上述情况是可能的,这取决于运算符的类型。某些其他语言,如 PHP,会执行操作的实际结果,即 true 或 false,这意味着结果始终为 true 或 false;例如:

        14 && 0          /// results as 0,  not false
        14 || 0          /// results as 14, not true
        1 && 2 && 3 && 4 /// results as 4,  not true
        true && ''       /// results as ''
        {} || '0'        /// results as {}
        

        与普通 if 语句相比,一个主要好处是前两个方法可以在参数的右侧操作,即作为赋值的一部分。

        d = (a && b) || c;
        d = a ? b : c;
        
        if `a == true` then `d = b` else `d = c`
        

        使用标准 if 语句实现此目的的唯一方法是复制分配:

        if ( a ) { d = b } else { d = c }
        

        您可能会问为什么只使用Logical Operators 而不是Ternary Operator,对于简单的情况您可能不会,除非您想确保ab 都是正确的。您还可以使用逻辑运算符实现更简化的复杂条件,使用嵌套的三元运算可能会变得非常混乱......如果您希望您的代码易于阅读,那么两者都不是那么直观。

        【讨论】:

          【解决方案9】:

          如果你只想要一个内联 IF(没有 ELSE),你可以使用逻辑 AND 运算符:

          (a < b) && /*your code*/;
          

          如果您还需要 ELSE,请使用其他人建议的三元运算。

          【讨论】:

            【解决方案10】:

            问题本质上不是:我可以写以下内容吗?

            if (foo)
              console.log(bar)
            else
              console.log(foo + bar)
            

            答案是,是的,上面会翻译。

            但是,请注意以下操作

            if (foo)
              if (bar)
                console.log(foo)
              else 
                console.log(bar)
            else 
              console.log(foobar)
            

            请务必将不明确的代码包含在大括号中,因为上述代码会引发异常(并且类似的排列会产生不希望的行为。)

            【讨论】:

              【解决方案11】:

              仅供参考,您可以撰写conditional operators

              var a = (truthy) ? 1 : (falsy) ? 2 : 3;
              

              如果您的逻辑足够复杂,那么您可以考虑使用IIFE

              var a = (function () {
                if (truthy) return 1;
                else if (falsy) return 2;
                return 3;
              })();
              

              当然,如果您打算多次使用此逻辑,那么您应该将其封装在一个函数中以保持良好和干燥。

              【讨论】:

                【解决方案12】:

                我经常需要在每个条件下运行更多代码,通过使用:( , , ) 多个代码元素可以执行:

                var a = 2;
                var b = 3;
                var c = 0;
                
                ( a < b ?  ( alert('hi'), a=3, b=2, c=a*b ) : ( alert('by'), a=4, b=10, c=a/b ) );
                

                【讨论】:

                  【解决方案13】:

                  内联如果:

                  (('hypothesis') ? 'truthy conclusion' : 'falsey conclusion')
                  

                  真实结论:假设为真时执行的语句

                  错误结论:假设为假时执行的语句

                  你的例子:

                  var c = ((a < b) ? 'a<b statements' : '!(a<b) statements');
                  

                  【讨论】:

                    【解决方案14】:

                    简化三元运算符

                    var locked = 1;
                    var canChange = locked != 1 ? true : false;
                    

                    如果locked为1,则canChange变量设置为false,否则设置为true。 在这种情况下,您可以使用布尔表达式来简化它,如下所示:

                    var locked = 1;
                    var canChange = locked != 1;
                    

                    对于多个 JavaScript 三元运算符 下面的例子展示了如何在同一个表达式中使用两个三元运算符:

                    var speed = 90;
                    var message = speed >= 120 ? 'Too Fast' : (speed >= 80 ? 'Fast' : 'OK');
                    console.log(message);
                    

                    当它使代码更易于阅读时,最好使用三元运算符。如果逻辑包含许多 if...else 语句,则不应使用三元运算符。

                    【讨论】:

                      【解决方案15】:

                      JavaScript 中的内联 if 很简单,不需要大括号:

                      if (a < b) doSomething()
                      

                      从技术上讲,您可以在同一行中添加一个else,但它需要一个分号:

                      if (a < b) doSomething(); else doSomethingElse()
                      

                      上述示例可能不符合您团队的编码标准。最重要的是您遵循适用于您的团队的约定。就个人而言,在许多情况下,我更喜欢if 语句而不是三元语句,因为我发现它们更易于阅读。

                      【讨论】:

                        猜你喜欢
                        • 2020-01-08
                        • 2023-03-24
                        • 1970-01-01
                        • 1970-01-01
                        • 2016-06-28
                        • 1970-01-01
                        • 2022-07-03
                        • 2022-07-07
                        • 2021-10-13
                        相关资源
                        最近更新 更多