if/else if/else怎么写成简写形式？答案

【问题标题】：How to write in shorthand form if / else if / else?if/else if/else怎么写成简写形式？
【发布时间】：2014-11-04 15:35:12
【问题描述】：

是否有 if / else if / else 语句的简写？例如，我知道有一个 if / else 语句：

var n = $("#example div").length;
$("body").css("background", (n < 2) ? "green" : "orange");

但是我该如何用上面的简写语法写出以下内容呢？

var n = $("#example div").length;

if (n < 2) {
    $("body").css("background", "green");
}
else if (n > 2) {
    $("body").css("background", "blue");
}
else {
    $("body").css("background", "orange");
}

【问题讨论】：

cond1 ? expr1 : (cond2 ? expr2 : expr3);（在这种情况下不需要括号）。
您在第一种情况下使用三元是合适的。但我不会在第二种情况下（有三种或更多可能性）使用这样的陈述，因为以后阅读起来要困难得多。
@Zeta 这正是我会避免的那种三元。嵌套三元组通常被认为是代码异味/不好的做法。
同意，嵌套的三元组更难阅读。您可以考虑一件事（使代码更干燥，以后可能更容易更改）：有一个colour 变量，使用 if/elseif/else 设置colour 变量，然后只调用一次$("body").css(...)。跨度>
不管怎样，它都会被调用一次，但冗余较少。

标签： javascript jquery if-statement shorthand shorthand-if

【解决方案1】：

没有速记。

我还想指出，?: 运算符不是简写。一个是表达式，另一个是语句。

如果你想让这段代码更简洁，我建议去掉大括号：

if (n < 2)      $("body").css("background", "green");
else if (n > 2) $("body").css("background", "blue");
else            $("body").css("background", "orange");

【讨论】：

【解决方案2】：

如果你使用换行符，三元组很好：

$( 'body' ).css( 'background',
      (n < 2) ? 'green'
    : (n > 2) ? 'blue'
    :           'orange'
);

每个人都有自己的语法偏好，但我认为这是完全可读的。

【讨论】：

【解决方案3】：

它存在，但强烈推荐联合国，因为它很难阅读和维护。

var n = $("#example div").length,
    color;

color = (n < 2) ? 'green' : 
        (n > 2) ? 'blue'  : 'orange';

$("body").css("background", color);

【讨论】：

@GTSJoe 就像他说的，不推荐。我认为这比仅使用 if 语句更糟糕。
如果您打算使用这种方法，我建议您将每个三元操作嵌套起来以使其可读。最终，一旦超出几个条件，使用 if/else if/else 可能会更好。

【解决方案4】：

您可以为此使用三元组，但我建议不要这样做（这是不好的风格）。你也可以使用 switch 语句：

switch(true) {
    case (n<2):
        $("body").css("background", "green");
        break;
    case (n>2):
        $("body").css("background", "blue");
        break;
    default:
       $("body").css("background", "orange");
}

但这并不比仅仅坚持if更好

【讨论】：