Various techniques for using the JavaScript ternary operator

  • 2020-05-30 19:25:38
  • OfStack

When you find that you are slowly writing too much code, you will unconsciously replace if else with 3 yuan, just to make the code more concise and incistive. Of course, some people say that 3 yuan can make you feel orgasmic. I felt the same way when I wrote js recently, and collected some tips to share.

Big bird please skip the following paragraph, big bird help correct ^

==== universal line ====

Expression (expr1) ? (expr2) : (expr3)

The value is expr2 when expr1 is TRUE, and expr3 when expr1 is FALSE.


Common usage

When you find yourself using if else a lot

if( Thanks brother chun || Thanks to exam the emperor ){
    Don't fail ;
    MOE hang ;

So the notation for 3 dollars is

Thanks brother chun || Thanks to exam the emperor ? Don't fail : MOE hang

It's nice to find that the code is so much better.

This if else judgment is often used in daily life, especially when there are more nested 3 yuan is more harmonious, can make your code look cleaner and clearer structure.

A slightly smarter use
Through constant change, many USES of 3 yuan can be derived. The following is a snippet of jquery code

flag ? $('body').addClass('hover') : $('body').removeClass('hover') ;

Even more perverted.

$('.item')[ flag ? 'addClass' : 'removeClass']('hover')

The code above looks confusing. Because when flag = true, the code becomes the following:


So this is the same thing.


Let me sublimate it one more time

You can call your desired function as needed to handle more things.

function a(){
      do something
function b(){
      do something
} flag ? a() : b();

So for all the teachers

So here's a case where you have two buttons, one for forward, one for backward. The operations are all pretty much the same.

    var action_turn = function(e, type){
        var self = $(e).closest('li');
        var target = self[type === 'prev' ? 'prev' : 'next']();
    }     var btn_next = $('#item-photo-panel'){
        action_turn(this, 'next');
        return false;
    var btn_prev = $('#item-photo-panel a.prev'){
        action_turn(this, 'prev');
        return false;

Try to avoid the situation

alert( true ? 'true' : false ? 't' : 'f' )

I mean try to avoid the 3 yuan nested above, because in js the statement goes from right to left, and the code above is the same

alert( true ? 'true' : ( false ? 't' : 'f' ) )

As in php, this result is not at all 1, 3 yuan nesting is preferred to the left.

Thanks brother chun || Thanks to exam the emperor ? Don't fail : MOE hang
In addition, 3 yuan in php is found to have such a hint

Note: note that the 3 meta operator is a statement, so its evaluation is not a variable, but the result of the statement. This is important if you want to return a variable by reference. In a function returned by reference return $var == 42 ? $a: $b; It will not work, and future versions of PHP will issue a warning for this.

However, through experiments, it is found that the above method can work in javascript, which is probably because js is less rigorous than php compared with BT.

Related articles: