JavaScript 简写 if 语句，没有 else 部分

Posted 2023-02-23

【中文标题】JavaScript 简写 if 语句，没有 else 部分

【英文标题】：JavaScript shorthand if statement, without the else portion

【发布时间】：2012-07-18 06:18:37

【问题描述】：

所以我使用简写 javascript if/else 语句（我在某处读到它们被称为三元语句？）

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

这很好用，但如果以后我只想使用速记 if，而没有 else 部分。喜欢：

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

这可能吗？

【问题讨论】：

这些片段的技术术语是条件表达式，它使用条件运算符_?:。因为这个运算符需要三个操作数，所以称为三元运算符。

快 2 倍 jsperf.com/speed-test-for-conditions

【参考方案1】：

您可以使用&& 运算符 - 只有当第一个为真时才执行第二个操作数表达式

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

在我看来，if(conditon) expression 比 condition && expression 更具可读性

【讨论】：

可能会坚持使用if(condition) expression - 但很高兴知道&& 运算符在这种情况下工作！

我在双引号之前使用过并且工作过......类似于 >>> direction == "right" ？ slideOffset += $(".range-slide").width() : "" .... 那么这有什么问题吗？

这种内联赋值有名称吗？

slideOffset += direction == "right" && $(".range-slide").width() 也可以，并将运算符保持在开头。

这在 Angular 生产构建中不起作用。它将抛出'无法测试'void'类型的表达式的真实性'

【参考方案2】：

不要把它想象成一个控制块（即：if-else 或开关）。 它并不是真正用于在其中运行代码。

你可以。它只是变得非常丑陋，非常快，这违背了目的。

您真正想要使用它的是分配值。

以你最初的例子为例，稍微改变一下，你会得到：

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 程序员会在试图维护您的代码时搞砸自己）。

【讨论】：

“未经训练的 JS 程序员会为了维护你的代码而自欺欺人”我说得再好不过了

【参考方案3】：

条件运算符不是if 语句的简写。它是一个运算符，而不是一个语句。

如果你使用它，你应该把它当作一个运算符，而不是一个语句。

只需对第三个操作数使用零值：

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

【参考方案4】：

你所拥有的将不起作用，但为什么不使用单行 if 语句来代替。

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

这涉及比 Ray 建议的方法更少的输入。当然，如果您真的想坚持这种格式，他的回答是有效的。

【参考方案5】：

不，这是不可能的，因为三元运算符需要三个操作数。

first-operand ? second-operand (if first evaluates to true) : third-operand (if false)

【参考方案6】：

这并不能完全回答你的问题，但三元组允许你写的比你展示的要少：

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

现在我想了想，是的，你也可以提出你的问题：

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

这是一个理论。下次有机会+=三元组我会试试这个。告诉我它是如何工作的！

【参考方案7】：

您可以使用&& 运算符

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

【参考方案8】：

你可以使用这个速记：

if (condition) expression

【参考方案9】：

如果在某些情况下您真的想使用 if 速记。尽管它可能不是最好的选择，但它是可能的。

condition ? fireMe() : ""

看起来很奇怪，确实有效。在像 Vue 这样的框架中可能会派上用场，您可以在模板中编写它。