blocks|key|232459|text|关于您发布的示例，没有什么特别的技巧。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|232460|在三元运算符中，计算第一个参数(条件)，如果结果为true，则计算并返回第二个参数，否则计算并返回第三个参数。每个参数都可以是任何有效的代码块，包括函数调用。|offset|length|style|CODE|232461|这样想吧：|232462|var+x+=+(1+<+2)+?+true+:+false;|code-block|syntax|javascript|232463|也可以写成：|232464|var+x+=+(1+<+2)+?+getTrueValue()+:+getFalseValue();|232465|这是完全有效的，并且这些函数可以包含任何任意代码，无论它是否与返回值相关。此外，三元运算的结果不必赋值给任何东西，就像函数结果不必赋值给任何东西一样：|232466|(1+<+2)+?+getTrueValue()+:+getFalseValue();|232467|现在，只需将它们替换为任意函数，就会得到类似于示例的结果：|232468|(1+<+2)+?+removeItem($this)+:+addItem($this);|232469|现在你的最后一个例子真的不需要三元组了，因为它可以这样写：|232470|x+=+(1+<+2);++//+x+will+be+set+to+"true"|232471|entityMap^0|0|P|4|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@$D|18|E|19|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1A|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|1B|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|1C|8|@]|9|@]|A|$]]|$1|Q|3|R|5|L|7|1D|8|@]|9|@]|A|$M|N]]|$1|S|3|T|5|6|7|1E|8|@]|9|@]|A|$]]|$1|U|3|V|5|L|7|1F|8|@]|9|@]|A|$M|N]]|$1|W|3|X|5|6|7|1G|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|L|7|1H|8|@]|9|@]|A|$M|N]]|$1|10|3|11|5|6|7|1I|8|@]|9|@]|A|$]]|$1|12|3|13|5|L|7|1J|8|@]|9|@]|A|$M|N]]|$1|14|3|-4|5|6|7|1K|8|@]|9|@]|A|$]]]|15|$]]

There is nothing particularly tricky about the example you posted.

In a ternary operator, the first argument (the conditional) is evaluated and if the result is <code>true</code>, the second argument is evaluated and returned, otherwise, the third is evaluated and returned. Each of those arguments can be any valid code block, including function calls.

Think of it this way:

<pre><code>var x = (1 &lt; 2) ? true : false;
</code></pre>

Could also be written as:

<pre><code>var x = (1 &lt; 2) ? getTrueValue() : getFalseValue();
</code></pre>

This is perfectly valid, and those functions can contain any arbitrary code, whether it is related to returning a value or not. Additionally, the results of the ternary operation don't have to be assigned to anything, just as function results do not have to be assigned to anything:

<pre><code>(1 &lt; 2) ? getTrueValue() : getFalseValue();
</code></pre>

Now simply replace those with any arbitrary functions, and you are left with something like your example:

<pre><code>(1 &lt; 2) ? removeItem($this) : addItem($this);
</code></pre>

Now your last example really doesn't need a ternary at all, as it can be written like this:

<pre><code>x = (1 &lt; 2); // x will be set to "true"
</code></pre>

blocks|key|231084|text|嘿，在你的问题中有一些非常令人兴奋的三元语法用法；我最喜欢最后一个……|type|unstyled|depth|inlineStyleRanges|entityRanges|data|231085|x+=+(1+<+2)+?+true+:+false;|code-block|syntax|javascript|231086|在这里使用三元是完全不必要的--你可以简单地写成|231087|x+=+(1+<+2);|231088|同样，三元语句的condition元素总是作为布尔值进行计算，因此您可以表示：|231089|(IsChecked+==+true)+?+removeItem($this)+:+addItem($this);|231090|简单地说：|231091|(IsChecked)+?+removeItem($this)+:+addItem($this);|231092|实际上，我还会删除IsChecked临时代码，这样就只剩下：|offset|length|style|CODE|231093|($this.hasClass("IsChecked"))+?+removeItem($this)+:+addItem($this);|231094|至于这是否是可接受的语法，它肯定是可接受的！这是一种很好的方法，可以将四行代码减少到一行，而不会影响可读性。我要给你的唯一的建议是避免在同一行上嵌套多个三元语句(那样会让人发疯！)|231095|entityMap^0|0|0|0|0|0|0|0|0|9|9|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|16|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|18|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|19|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|1A|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|1B|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|6|7|1C|8|@$U|1D|V|1E|W|X]]|9|@]|A|$]]|$1|Y|3|Z|5|D|7|1F|8|@]|9|@]|A|$E|F]]|$1|10|3|11|5|6|7|1G|8|@]|9|@]|A|$]]|$1|12|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|13|$]]

Heh, there are some pretty exciting uses of ternary syntax in your question; I like the last one the best...
<pre><code>x = (1 &lt; 2) ? true : false;
</code></pre>
The use of ternary here is totally unnecessary - you could simply write
<pre><code>x = (1 &lt; 2);
</code></pre>
Likewise, the condition element of a ternary statement is always evaluated as a Boolean value, and therefore you can express:
<pre><code>(IsChecked == true) ? removeItem($this) : addItem($this);
</code></pre>
Simply as:
<pre><code>(IsChecked) ? removeItem($this) : addItem($this);
</code></pre>
In fact, I would also remove the <code>IsChecked</code> temporary as well which leaves you with:
<pre><code>($this.hasClass(&quot;IsChecked&quot;)) ? removeItem($this) : addItem($this);
</code></pre>
As for whether this is acceptable syntax, it sure is! It's a great way to reduce four lines of code into one without impacting readability. The only word of advice I would give you is to avoid nesting multiple ternary statements on the same line (that way lies madness!)

blocks|key|3102420|text|三元样式通常用于节省空间。在语义上，它们是相同的。我更喜欢使用完整的if/then/else语法，因为我不喜欢牺牲可读性--我是老派，我更喜欢大括号。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3102421|几乎所有内容都使用完整的if/then/else格式。如果你在每个分支中有更大的代码块，你有一个多分支的if/else树，或者在一个很长的字符串中有多个else/+if，那么它就特别流行。|3102422|当你根据一个简单的条件给一个变量赋值，或者你在做多个决策，结果非常简短时，三元运算符是很常见的。您引用的示例实际上没有任何意义，因为表达式将在没有任何额外逻辑的情况下计算为两个值中的一个。|3102423|好主意：|3102424|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
{
++++...|code-block|syntax|javascript|3102425|不太好的地方：|3102426|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+%2B+2;
}|3102427|一条非常基本的经验法则--你能在一行中理解整个事情甚至更好吗？三元是可以的。否则，将其展开。|offset|length|style|BOLD|3102428|entityMap^0|0|0|0|0|0|0|0|2|5|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|11|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|12|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|14|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|15|8|@$S|16|T|17|U|V]]|9|@]|A|$]]|$1|W|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|X|$]]

The ternary style is generally used to save space. Semantically, they are identical. I prefer to go with the full if/then/else syntax because I don't like to sacrifice readability - I'm old-school and I prefer my braces.

The full if/then/else format is used for pretty much everything. It's especially popular if you get into larger blocks of code in each branch, you have a muti-branched if/else tree, or multiple else/ifs in a long string.

The ternary operator is common when you're assigning a value to a variable based on a simple condition or you are making multiple decisions with very brief outcomes. The example you cite actually doesn't make sense, because the expression will evaluate to one of the two values without any extra logic.

Good ideas:

<pre><code>this &gt; 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
{
 ...
</code></pre>

Less good:

<pre><code>this &gt; 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;
}
</code></pre>

A really basic rule of thumb - can you understand the whole thing as well or better on one line? Ternary is OK. Otherwise expand it.

blocks|key|227349|text|如果你要嵌套三进制运算符，我相信你会想要这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|227350|+++var+audience+=+(countrycode+==+'eu')+?+'audienceEU'+:
++++++++++++++++++(countrycode+==+'jp')+?+'audienceJP'+:
++++++++++++++++++(countrycode+==+'cn')+?+'audienceCN'+:
++++++++++++++++++'audienceUS';|code-block|syntax|javascript|227351|写/读比以下代码更高效：|227352|var+audience+=+'audienceUS';
if+countrycode+==+'eu'+{
+++audience+=+'audienceEU';
}+else+if+countrycode+==+'jp'+{
+++audience+=+'audienceJP';
}+else+if+countrycode+==+'cn'+{
+++audience+=+'audienceCN';
}|227353|就像所有优秀的编程一样，对于那些在你完成项目后必须阅读你的代码的人来说，空白使一切都变得美好起来。|227354|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

If you're going to nest ternary operators, I believe you'd want to do something like this:

<pre><code> var audience = (countrycode == 'eu') ? 'audienceEU' :
 (countrycode == 'jp') ? 'audienceJP' :
 (countrycode == 'cn') ? 'audienceCN' :
 'audienceUS';
</code></pre>

It's a lot more efficient to write/read than:

<pre><code>var audience = 'audienceUS';
if countrycode == 'eu' {
 audience = 'audienceEU';
} else if countrycode == 'jp' {
 audience = 'audienceJP';
} else if countrycode == 'cn' {
 audience = 'audienceCN';
}
</code></pre>

As with all good programming, whitespace makes everything nice for people who have to read your code after you're done with the project.

blocks|key|232535|text|我知道问题已经回答了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|232536|但让我在这里补充一点。这不仅仅是真或假的情况。如下所示：|232537|var+val="Do";

Var+c=+(val+==+"Do"+%7C%7C+val+==+"Done")
++++++++++?+7
++++++++++:+0|code-block|syntax|javascript|232538|这里，如果val是Do或Do，那么c将是7，否则将是0。在这种情况下，c将是7。|232539|这实际上是这个运算符的另一个视角。|232540|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I know question is already answered.

But let me add one point here. This is not only case of true or false. See below:

<pre><code>var val="Do";

Var c= (val == "Do" || val == "Done")
 ? 7
 : 0
</code></pre>

Here if val is Do or Done then c will be 7 else it will be zero. In this case c will be 7.

This is actually another perspective of this operator.

blocks|key|2888396|text|我也想从我这里补充一些东西。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2888397|使用三元运算符调用函数的其他可能语法为：|2888398|(condition+?+fn1+:+fn2)();|code-block|syntax|javascript|2888399|如果您必须将相同的参数列表传递给两个函数，那么它会很方便，因此您只需编写一次。|2888400|(condition+?+fn1+:+fn2)(arg1,+arg2,+arg3,+arg4,+arg5);|2888401|您甚至可以对成员函数名使用三元运算符，我个人非常喜欢这一点，以节省空间：|2888402|$('.some-element')[showThisElement+?+'addClass'+:+'removeClass']('visible');|2888403|或|2888404|$('.some-element')[(showThisElement+?+'add'+:+'remove')+%2B+'Class']('visible');|2888405|另一个例子：|2888406|var+addToEnd+=+true;+//or+false
var+list+=+[1,2,3,4];
list[addToEnd+?+'push'+:+'unshift'](5);|2888407|entityMap^0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|13|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|15|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|16|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|17|8|@]|9|@]|A|$]]|$1|S|3|T|5|F|7|18|8|@]|9|@]|A|$G|H]]|$1|U|3|V|5|6|7|19|8|@]|9|@]|A|$]]|$1|W|3|X|5|F|7|1A|8|@]|9|@]|A|$G|H]]|$1|Y|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|Z|$]]

I would also like to add something from me. 

Other possible syntax to call functions with the ternary operator, would be:

<pre><code>(condition ? fn1 : fn2)();
</code></pre>

It can be handy if you have to pass the same list of parameters to both functions, so you have to write them only once.

<pre><code>(condition ? fn1 : fn2)(arg1, arg2, arg3, arg4, arg5);
</code></pre>

You can use the ternary operator even with member function names, which I personally like very much to save space:

<pre><code>$('.some-element')[showThisElement ? 'addClass' : 'removeClass']('visible');
</code></pre>

or 

<pre><code>$('.some-element')[(showThisElement ? 'add' : 'remove') + 'Class']('visible');
</code></pre>

Another example:

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

I am using jQuery 1.7.1

I am just starting to use the JavaScript ternary operator to replace simple if/else statements. I have done so successfully in several places. I was surprised when I successfully made something else work when I thought for sure it wouldn't, but I tried anyway.

Here's the original statement:

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

Here's the same function using the ternary operator:

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

I was surprised because all of the examples I saw being used were merely setting variables like this:

<pre><code>x = (1 &lt; 2) ? true : false;
</code></pre>

My question is whether this is "normal" use and will it work in most versions of JavaScript? Where will it fail? Are there other less obvious uses for it?

UPDATE -- Thanks for the "real world" advice!!!

I am using this as my function:

<pre><code>function updateItem() {
 $this = $(this);
 $this.hasClass("IsChecked") ? removeItem($this) : addItem($this);
}
</code></pre>

JavaScript ternary operator example with functions

jQuery

我使用的是jQuery 1.7.1我刚刚开始使用JavaScript三元运算符来替换简单的if/else语句。我已经在几个地方成功地做到了这一点。当我认为肯定不会成功地让其他东西工作时，我很惊讶，但我还是尝试了。以下是原始语句：function updateItem() {    $this = $(this);   ...

问使用函数的JavaScript三元运算符示例
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用函数的JavaScript三元运算符示例EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用函数的JavaScript三元运算符示例
EN