带有函数的 JavaScript 三元运算符示例答案

【问题标题】：JavaScript ternary operator example with functions带有函数的 JavaScript 三元运算符示例
【发布时间】：2012-04-25 21:08:18
【问题描述】：

我使用的是 jQuery 1.7.1

我刚刚开始使用 JavaScript 三元运算符来替换简单的 if/else 语句。我已经在几个地方成功地做到了。当我成功地让其他东西工作时我感到很惊讶，而我认为它肯定不会，但我还是尝试了。

这是原始声明：

function updateItem() {
    $this = $(this);
    var IsChecked = $this.hasClass("IsChecked");
    if (IsChecked == true){
        removeItem($this);
    } else {
        addItem($this);
    }
}

下面是使用三元运算符的相同函数：

function updateItem() {
    $this = $(this);
    var IsChecked = $this.hasClass("IsChecked");
    (IsChecked == true) ? removeItem($this) : addItem($this);
}

我很惊讶，因为我看到的所有示例都只是像这样设置变量：

x = (1 < 2) ? true : false;

我的问题是这是否是“正常”使用，它是否适用于大多数版本的 JavaScript？它会在哪里失败？它还有其他不太明显的用途吗？

更新 -- 感谢“真实世界”的建议！！！

我将其用作我的功能：

function updateItem() {
    $this = $(this);
    $this.hasClass("IsChecked") ? removeItem($this) : addItem($this);
}

【问题讨论】：

这是正常的，它会工作得很好。一般来说，使用三元运算符时可读性很难，但在你的情况下它看起来很好。
嗯.... 你也可以这样做，因为它们都接受相同的参数(IsChecked ? removeItem : addItem)($this)。但是，要回答您的问题，是的，这是正常的，使用三元运算符没有任何问题，只要它们在需要的情况下不会降低可维护性或可读性。 jsfiddle.net/vsB3f
if($this.hasClass("IsChecked")) removeItem($this); else addItem($this) 是正确的方法。三元运算符不适用于此类情况，而是用于 foo(isChecked ? 'bar' : meow()); 之类的事情（即，当您关心您在 then/else 块中所做的任何事情的“返回值”时）
在您的示例中，跳过第一行以支持这一点：$(this).hasClass("IsChecked") ? removeItem($this) : addItem($this); 我可以在一行上按原样理解您的代码，因此它符合我的经验法则（请参阅下面的帖子）。为我工作。
using ternary operator in javascript to invoke two functions?的可能重复

标签： javascript jquery

【解决方案1】：

嘿，你的问题中有一些非常令人兴奋的三元语法用法；我最喜欢最后一个...

x = (1 < 2) ? true : false;

这里完全不需要使用三元 - 你可以简单地写

x = (1 < 2);

同样，三元语句的条件元素总是被评估为布尔值，因此您可以表示：

(IsChecked == true) ? removeItem($this) : addItem($this);

简单来说：

(IsChecked) ? removeItem($this) : addItem($this);

事实上，我也会删除 IsChecked 临时地址，这样你就可以：

($this.hasClass("IsChecked")) ? removeItem($this) : addItem($this);

至于这是否是可接受的语法，肯定是！这是在不影响可读性的情况下将四行代码减少到一个的好方法。我要给你的唯一建议是避免在同一行嵌套多个三元语句（这种方式很疯狂！）

【讨论】：

请注意，您可能希望避免在类名中使用大写字母（IsChecked 变为 is-checked）stackoverflow.com/questions/1547986/…
JS有一流的功能：($this.hasClass("isChecked") ? removeItem : addItem)($this)

【解决方案2】：

三元样式一般用于节省空间。从语义上讲，它们是相同的。我更喜欢使用完整的 if/then/else 语法，因为我不喜欢牺牲可读性 - 我是老派，我更喜欢大括号。

完整的 if/then/else 格式用于几乎所有内容。如果您在每个分支中进入较大的代码块，则它特别受欢迎，您有一个多分支的 if/else 树，或者一个长字符串中有多个 else/if。

当您基于一个简单的条件为变量赋值或者您正在做出具有非常简短结果的多个决策时，三元运算符很常见。您引用的示例实际上没有意义，因为表达式将评估为两个值之一而没有任何额外的逻辑。

好主意：

this > that ? alert(this) : alert(that);  //nice and short, little loss of meaning

if(expression)  //longer blocks but organized and can be grasped by humans
{
    //35 lines of code here
}
else if (something_else)
{
    //40 more lines here
}
else if (another_one)  /etc, etc
{
    ...

不太好：

this > that ? testFucntion() ? thirdFunction() ? imlost() : whathappuh() : lostinsyntax() : thisisprobablybrokennow() ? //I'm lost in my own (awful) example by now.
//Not complete... or for average humans to read.

if(this != that)  //Ternary would be done by now
{
    x = this;
}
else
}
    x = this + 2;
}

一个非常基本的经验法则 - 你能在一行中理解整个事情或更好地理解吗？三元没问题。否则展开它。

【讨论】：

因为这是一个关于风格的答案，我强烈不建议在 else if 之后使用 stringing else if。如果您有超过 1 个 else，请使用 switch()。或者只使用多个原子 IF。

【解决方案3】：

我还想从我这里添加一些东西。

使用三元运算符调用函数的其他可能语法是：

(condition ? fn1 : fn2)();

如果您必须将相同的参数列表传递给两个函数，这会很方便，因此您只需编写一次。

(condition ? fn1 : fn2)(arg1, arg2, arg3, arg4, arg5);

即使成员函数名也可以使用三元运算符，我个人非常喜欢这样以节省空间：

$('.some-element')[showThisElement ? 'addClass' : 'removeClass']('visible');

或

$('.some-element')[(showThisElement ? 'add' : 'remove') + 'Class']('visible');

另一个例子：

var addToEnd = true; //or false
var list = [1,2,3,4];
list[addToEnd ? 'push' : 'unshift'](5);

【讨论】：

【解决方案4】：

您发布的示例没有什么特别棘手的地方。

在三元运算符中，计算第一个参数（条件），如果结果为true，则计算并返回第二个参数，否则计算并返回第三个参数。这些参数中的每一个都可以是任何有效的代码块，包括函数调用。

这样想：

var x = (1 < 2) ? true : false;

也可以写成：

var x = (1 < 2) ? getTrueValue() : getFalseValue();

这是完全有效的，这些函数可以包含任意代码，无论是否与返回值有关。此外，三元运算的结果不必分配给任何东西，就像函数结果不必分配给任何东西一样：

(1 < 2) ? getTrueValue() : getFalseValue();

现在只需用任意函数替换它们，就可以得到类似示例的内容：

(1 < 2) ? removeItem($this) : addItem($this);

现在你的最后一个例子根本不需要三元，因为它可以这样写：

x = (1 < 2);  // x will be set to "true"

【讨论】：

【解决方案5】：

如果你要嵌套三元运算符，我相信你会想做这样的事情：

   var audience = (countrycode == 'eu') ? 'audienceEU' :
                  (countrycode == 'jp') ? 'audienceJP' :
                  (countrycode == 'cn') ? 'audienceCN' :
                  'audienceUS';

写/读比：

var audience = 'audienceUS';
if countrycode == 'eu' {
   audience = 'audienceEU';
} else if countrycode == 'jp' {
   audience = 'audienceJP';
} else if countrycode == 'cn' {
   audience = 'audienceCN';
}

与所有优秀的编程一样，对于在项目完成后必须阅读代码的人来说，空白会让一切变得美好。

【讨论】：

非常不同意您上面关于嵌套三元更易于阅读和调试的评论。就个人而言，我宁愿看到嵌套的 else/if 块替换为 lookup table 或 switch 语句。
@JonnyReeves 同意 - 通常在检查不同条件时最好使用嵌套三元语法（例如 modulo of numbers）

【解决方案6】：

我知道问题已经回答了。

但让我在这里补充一点。这不仅是真假的情况。见下文：

var val="Do";

Var c= (val == "Do" || val == "Done")
          ? 7
          : 0

这里如果 val 是 Do 或 Done 那么 c 将为 7 否则它将为零。在这种情况下，c 将为 7。

这其实是这个算子的另一个视角。

【讨论】：