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

IT技术 javascript jquery
2021-01-21 01:41:12

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

呵呵,你的问题中有一些非常令人兴奋的三元语法用法;我最喜欢最后一张。。。

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/...
2021-03-21 01:41:12
JS 具有一流的功能: ($this.hasClass("isChecked") ? removeItem : addItem)($this)
2021-04-13 01:41:12

三元样式一般用于节省空间。在语义上,它们是相同的。我更喜欢使用完整的 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 串起来。如果您有超过 1 个 else,请使用 switch()。或者只是使用多个原子 IF。
2021-03-26 01:41:12

我也想从我这里补充一些东西。

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

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

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

在三元运算符中,计算第一个参数(条件),如果结果为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"

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

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

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

@JonnyReeves 同意 - 通常在检查不同条件时最好使用嵌套的三元语法(例如数字的模数
2021-03-23 01:41:12
强烈不同意您上面关于嵌套三元更易于阅读和调试的评论。就个人而言,我宁愿看到嵌套的 else/if 块替换为查找表或 switch 语句。
2021-04-08 01:41:12