如何用JavaScript编写内联IF语句?


285

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

像这样:

var a = 2;
var b = 3;

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

12
jQuery在哪里?而且我还是不太明白这个问题。
Marc

jQuery部分可能像这样$(document).ready(function(){var a = 2; var b = 3; if(a <b){//做某事}}));
takeItEasy 2012年

这也是一个淘汰赛问题
Martin Capodici 2014年

1
这也是一个有角度的1和2,以及其他所有js框架(包括vanilla.js)的问题
Ben Taliadoros,

Answers:


640

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

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

c变量将是minor如果该值true,并且major如果该值是false


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

https://developer.mozilla.org/zh-CN/docs/JavaScript/Reference/Operators/Conditional_Operator


59
它说明了如何使用内联IF,它可以准确回答问题。
MattW 2012年

26
请注意,在这种情况下,所有括号都是可选的。通常,个人喜好/编码风格决定了何时使用它们。
Will Klein'4

3
@khany,这是一个JavaScript问题。表达式在其他语言中的计算结果可能有所不同。
威尔·克莱因

1
@MattW这没有显示如何使用内联IF,而是显示了如何使用IF ELSE
Finlay Percy,

1
@getName不是真的,但是如果需要,可以使用if语句作为一行if (a < b) c = 'major';
MattW

44

对于if内联编写语句,其中的代码应仅是一个语句:

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

43

有一个三元运算符,如下所示:

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

4
实际上,它不必分配给任何东西。右侧元素可以只是函数调用。
jfriend00 2012年

7
它们甚至不必是函数调用... 0 < 1 : 5 : 120;是完全有效的语句。不过,除非您按行支付薪水,否则它会毫无用处。
Ry-

好的,@ jfriend00,minitech,谢谢您的提示。
Mahmoud Gamal 2012年

@ jfriend00我几乎在所有情况下都建议这样做。如果您不使用表达式的值,那么您真正想要的是副作用。副作用是陈述最适合的。if在这种情况下,使用无聊的旧语句可能会使您的代码更易于阅读和理解,并且不太可能在以后的更改中被破坏。
埃米尔·伦德伯格

35

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

(a && b) || c

上面的内容与说的大致相同:

a ? b : c

当然,与以下内容大致相同:

if ( a ) { b } else { c }

我之所以这么说是因为这种方法有一个区别,即您必须知道的值b将被评估为true,否则您将始终得到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 }

您可能会问为什么在某些简单情况下您可能不会使用逻辑运算符而不是三元运算符,除非您想确定a并且b都正确。您还可以使用Logical运算符实现更简化的复杂条件,使用嵌套三元运算会变得很混乱……然后再次重申,如果您希望代码易于阅读,那么两者都不是那么直观。


32

用简单的英语,语法说明:

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;

5
没有“ else”语句,是否可以这样做?即condition ? true
魔鬼的代言人

@ScottBeeson当然。这也取决于您对条件的使用。true false并且""应该都可以忽略else部分。
Onimusha

2 == 2 ? doSomething()会是一样的if (2 == 2) doSomething()吗?
魔鬼的代言人

1
是的,但是其他部分不能完全省略。租用: false: ""应该在那里,如javascript预期的那样。
Onimusha

5
哦。所以这是能够做到这一点,而不用else语句。
魔鬼的代言人

21
<div id="ABLAHALAHOO">8008</div>
<div id="WABOOLAWADO">1110</div>

parseInt( $( '#ABLAHALAHOO' ).text()) > parseInt( $( '#WABOOLAWADO ).text()) ? alert( 'Eat potato' ) : alert( 'You starve' );

48
我什至不知道我刚刚读过什么,但我笑得很辛苦。
Jazz

20

如果只需要内联IF(不带ELSE),则可以使用逻辑AND运算符:

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

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


17

您可以在JavaScript中这样做:

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

8

仅供参考,您可以编写条件运算符

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

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

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

当然,如果您打算多次使用此逻辑,则需要将其封装在一个函数中以保持美观和DRY。


6

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

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 ) );

4

要添加此内容,您还可以使用带&&和||条件的内联条件 操作员。像这样

var a = 2;
var b = 0;

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

0

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

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)

请确保将歧义代码包装在大括号中,因为上面的代码将引发异常(并且类似的排列会产生不良行为)。


0

内联,如果:

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

真实结论:假设成立时执行的陈述

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

你的例子:

var c = ((a < b) ? 'a<b statements' : '!(a<b) statements');
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.