具有函数的JavaScript三元运算符示例

Question

我正在使用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);}

Answer 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);

至于这是可以接受的语法，那肯定是！这是在不影响可读性的情况下将四行代码简化为一行的好方法。我唯一要提的建议是避免在同一行上嵌套多个三元语句（这就是疯狂！）

Answer 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;

}

一条非常基本的经验法则-您能一口气理解整个事情还是更好？三元还可以。否则，将其展开。

Answer 3

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

在三元运算符中，将评估第一个参数（条件条件），如果结果为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"