Javascript 中的条件运算符

Posted 2023-02-21

【中文标题】Javascript 中的条件运算符

【英文标题】：Conditional Operators in Javascript

【发布时间】：2010-10-26 13:42:31

【问题描述】：

像这样的语句可以使用条件运算符吗？

(x == y) ? alert("yo!") : alert("meh!");

或者像这样使用它来分配值更正确？

z = (x == y) ? "yo!" : "meh!";

如果像语句一样使用它并没有错，那么是否可以像这样添加多行代码来执行？多行代码使用 ifthen 和 switch 语句是否更正确？

(x == y) ? (alert("yo!"), document.write("woot!")) : (alert("meh!"), document.write("blah!"));

【问题讨论】：

语法存在是有原因的——没关系。

我知道的足够多，知道有一种有效或更合适的方法来做事。我只是不知道他们大部分时间是什么！谢谢大家，为插话！因此条件运算符和多个语句可以但可能不应该混合使用。明白了。

【参考方案1】：

这两种方法中的任何一种都是可以接受的，尽管你也可以这样写：

alert((x == y) ? "yo!" : "meh!");

除此之外，我绝不建议对多行语句使用内联条件，只需使用标准 if/else 块。鉴于您输入的语法也不是有效的 JS，您可以将多个语句放入匿名方法和 yada yada 中，然后您会进入一个几乎无法管理和不必要的困难代码的混乱混乱。再说一遍，标准 if/else。

【讨论】：

谢谢！我没有考虑如何优化它，但这很棒。我仍然需要让它沉入其中，因为它们可以在表达式中使用。

【参考方案2】：

javascript 不会阻止您这样做，但这是一种非常不寻常的做法，会让任何阅读您的代码的人感到困惑。

条件运算符几乎总是用于选择两个替代值，而不是语句。语句的条件分支首选if 语句。

至于你的最后一个问题，是的，如果你真的必须，你可以滥用[] 构造：

(x == y) ? [alert("yo!"), document.write("woot!")] : otherstuff();

但请不要。 8-)

【参考方案3】：

这完全取决于你，你可以做任何一种方式。不过，您只需要问问自己，这种风格是否符合公司准则，以及您希望这段代码的可读性如何？

使用 if 语句更具可读性。

就我个人而言，我只将三元运算符用于简单而快速的真/假条件——这样做是有意义的——或者我需要“内联”的东西。

【参考方案4】：

条件运算符有意简洁，对赋值特别有用：

var a = x ? 1 : 2;

使用它们来有条件地运行函数，虽然可能，但为了可读性，应该使用 IF/ELSE 语句来完成：

// This is possible but IMO not best practice:
X ? doSomething() : doSomethingElse();

虽然冗长，但大多数时候，这是更好的解决方案：

if (X) 
    doSomething();
 else 
    doSomethingElse();

IF/ELSE 结构的一个显着好处是，您可以轻松地在每种情况下添加额外的任务。

你的最后一个 sn-p 也是可能的，但它看起来有点冗长，而且可能更适合更传统的逻辑结构；就像一个 IF/ELSE 块。

也就是说，条件运算符仍然是可读的，例如

(something && somethingElse > 2) ?
   doSomeLongFunctionName()
   : doSomeOtherLongFunctionName();

最后，就像许多事情一样，这取决于个人喜好。永远记住，你编写的代码不只是为你而写的；其他开发人员将来可能不得不涉足它；尝试使其尽可能可读。

【参考方案5】：

我同意 Chris 和 J-P 的观点：

条件运算符对于简短的语句很方便。 J-P 的变量赋值就是一个很好的例子：var a = x ? 1 : 2; 为了便于阅读，多语句子句应分隔为单独的行。 条件运算符可以作为具有正确缩进的多行语句可读，但大多数开发人员更熟悉if/else 语法。可读性是指符合读者的期望，因此熟悉度很重要。

我要补充一点，多行条件运算符会让您容易遇到分号插入错误。查看JSLint documentation（参见“换行”部分）了解更多信息。如果必须使用多行条件运算符，请确保运算符位于每行的末尾。因此，我将修改 J-P 的多行示例：

(something && somethingElse > 2) ?
   doSomeLongFunctionName() :
   doSomeOtherLongFunctionName();

如前所述，那里有许多样式指南，您可以选择您喜欢的任何一个。然而，有些选择比其他选择更容易出错。一定要仔细看看JSLint documentation；这是一个经过深思熟虑的风格指南，如果你坚持下去，你甚至可以使用 JSLint 工具自动检查你的代码是否存在潜在问题。