带函数的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);

同样,三元语句的condition元素总是被评估为布尔值,因此您可以表达:

(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/ifs在一个长字符串中,它会特别受欢迎.

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

好主意:

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"

Answer 4

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

   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';
}

与所有良好的编程一样,空白使得对于那些在完成项目后必须阅读代码的人来说,这一切都很好.

Answer 5

我还想从我身上添加一些东西。

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

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