JavaScript缩写的if语句,不包含else部分

51

所以我在使用JavaScript的简写if/else语句(我在某个地方读到它们被称为三元运算符?)

this.dragHandle.hasClass('handle-low') ? direction = "left" : direction = "right"

这个方法很好用,但是如果我想以后只使用一个简写的 if ,而不需要 else 部分怎么办呢?像这样:

direction == "right" ? slideOffset += $(".range-slide").width()

这真的有可能吗?


4
这些片段的技术术语是“条件表达式”,它们使用条件运算符?:。由于这个运算符需要三个操作数,因此被称为三元运算符。 - Ray Toal
2
比原来快了两倍 http://jsperf.com/speed-test-for-conditions - Muhammad Umer
11个回答

93
你可以使用 && 运算符 - 只有在第一个操作数为真时才会执行第二个操作数表达式。
direction == "right" && slideOffset += $(".range-slide").width()

我认为if(condition) expressioncondition && expression更易读。


3
我会坚持使用 if(condition) expression 的语法,但了解到 && 运算符在这种情况下也可以使用,很好知道! - ahren
我之前使用过双引号并且运行正常...类似于 >>> direction == "right" ? slideOffset += $(".range-slide").width() : "" .... 那么这会有什么问题吗? - hsobhy
这种类型的行内赋值有一个名称吗? - ewahner
slideOffset += direction == "right" && $(".range-slide").width() 也可以工作,并且保持运算符在开头。 - omikes
3
这在 Angular 的生产版本中行不通。会抛出“无法测试类型为 'void' 的表达式是否为 true”的错误。 - Noob
@ewahner 这被称为“反模式” :-) - Bergi

9

不要把它看作控制块(如if-else或switch)。 它并不是真正用于在其中运行代码的。

你可以这样做。 但这会很快变得非常丑陋,从而失去了目的。

你真正想要使用它来进行的是赋值

将您最初的示例略微改一下,您会得到:

direction = (this.dragHandle.hasClass("handle-low")) ? "left" : "right";

看,现在我做的是,我把需要用 if/else 或 switch 分支语句来进行赋值的代码简化了。

你甚至可以使用 else-if 类型的三元运算符:

y = (x === 2) ? 1 : (x === 3) ? 2 : (x === 4) ? 7 : 1000;

你也可以使用它来执行代码,但是在一段时间之后,要知道哪里发生了什么变得非常困难(请参见上一个示例,以查看即使是赋值语句也会在一瞥之间开始变得奇怪)...

((this.dragHandle.hasClass("...")) ? fireMe(something) : noMe(somethingElse));

......这通常是有效的。

但它并不比if或分支立即调用函数更美观或更有用(而且非JS程序员或未接受过JS培训的程序员在维护你的代码时可能会很困难)。


1
“未经培训的JS程序员在维护你的代码时会感到非常困难”,我无法说得更好了。 - ajax333221

5
你所使用的方法行不通,但为什么不改用单行if语句呢? if(direction == "right") slideOffset += $(".range-slide").width(); 这比Ray建议的方法更省敲击键。当然,如果你真的想坚持那种格式,他的答案也是正确的。

5

条件运算符并不是if语句的缩写形式,它是一种运算符而非语句。

如果您使用它,应将其用作运算符而非语句。

只需使用第三个操作数的零值即可:

slideOffset += direction == "right" ? $(".range-slide").width() : 0;

3
您可以使用&&运算符。
direction == "right" && slideOffset += $(".range-slide").width()

2
不,这是不可能的,因为三元运算符需要三个操作数。
first-operand ? second-operand (if first evaluates to true) : third-operand (if false)

1

这并不完全回答了你的问题,但三元运算符允许你写比你展示的更少:

direction = this.dragHandle.hasClass('handle-low') ? "left" : "right";

现在我想起来了,是的,你也可以问问题:

slideOffset + direction == "right" ? = $(".range-slide").width() : = 0;

这是一个理论。下次我有机会使用+=三元运算符时,我会尝试一下。让我知道它的效果如何!


1
你可以使用这个简写:
if (condition) expression

0
我之前遇到了使用简写if语句的问题,但是我刚刚通过在第三个操作数中放置0、""或null来解决了这个问题。
this.dragHandle.hasClass('handle-low') ? direction = "left" : 0

0
你可以使用短路求值简写。如果你只想要 if 条件,那么就直接写 else 条件即可。

let 
a = 2,
b = a !== 2 || 'ok';

console.log(b);


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接