JavaScript三值运算符示例及其函数

我正在使用jQuery1.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;

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

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

---

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

在三元运算符中，计算第一个参数（条件），如果结果为

true

，则计算并返回第二个参数，否则计算并返回第三个参数。每个参数都可以是任何有效的代码块，包括函数调用

这样想：

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

var x=（1<2）？真：假；

也可以写成：

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

var x=（1<2）？getTrueValue（）：getFalseValue（）；

这是完全有效的，并且这些函数可以包含任意代码，不管它是否与返回值有关。此外，三元运算的结果不必指定给任何对象，就像函数结果不必指定给任何对象一样：

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

（1<2）？getTrueValue（）：getFalseValue（）；

现在，只需用任意函数替换这些函数，就可以得到类似示例的结果：

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

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

（1<2）？removeItem（$this）：addItem（$this）；

现在，您的最后一个示例实际上根本不需要三元，因为它可以这样编写：

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

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

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

x=（1<2）；//x将设置为“真”

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

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

简而言之：

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

事实上，我还将删除

IsChecked

临时选项，这将给您留下：

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

---

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

三元样式通常用于节省空间。在语义上，它们是相同的。我更喜欢使用完整的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;
}

---

一个非常基本的经验法则-你能在一行中理解整个事情吗？没问题。否则将其展开。

如果要嵌套三元运算符，我相信您会希望执行以下操作：

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

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

---

和所有优秀的编程一样，对于那些在项目完成后必须阅读代码的人来说，空白使一切都变得很好。

我知道问题已经得到了回答

但让我在这里补充一点。这不是唯一正确或错误的情况。见下文：

var val="Do";

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

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

---

这实际上是该运算符的另一个透视图。

我还想从我这里添加一些内容

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

(condition ? fn1 : fn2)();

如果必须将相同的参数列表传递给这两个函数，那么它非常方便，因此只需编写一次

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

您甚至可以将三元运算符与成员函数名一起使用，我个人非常喜欢使用三元运算符来节省空间：

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

或

另一个例子：

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

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

---

这是正常的，而且会很好地工作。。一般来说，使用三元运算符时可读性很难，但在您的情况下，它看起来很好。嗯。。。。您也可以这样做，因为它们都接受相同的参数

（IsChecked？removietem:addItem）（$this）

。然而，为了回答您的问题，是的，这是正常的，使用三元运算符没有什么错，只要它们在需要的情况下不会降低可维护性或可读性<代码>如果（$this.hasClass（“IsChecked”））删除项目（$this）；else addItem（$this）是正确的方法。三元运算符不是用于这种情况，而是用于

foo（isChecked？'bar'：meow（））

（即，当您关心在then/else块中执行的任何操作的“返回值”时）在您的示例中，跳过第一行以支持以下内容：

$（this）.hasClass（“IsChecked”）？removeItem（$this）：addItem（$this）我可以像一行代码一样理解你的代码，所以它符合我的经验法则（见下文）。对我来说很有用。可能的副本强烈不同意你上面关于嵌套三元更易于阅读和调试的评论。就个人而言，我更愿意看到嵌套的else/if块被替换为a或switch语句。@JonnyReeves同意-通常在检查不同条件时最好使用嵌套的三元语法（例如）。请注意，您可能希望避免在类名中使用大写字母（如果选中，则变为选中）。JS具有第一类函数：
（$this.hasClass（“isChecked”）？removietem:addItem）（$this）