Various techniques for using the JavaScript ternary operator

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 ;

}else{

     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:

$('.item')['addClass']('hover')

So this is the same thing.

$('.item').addClass('hover')

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

        target.addClass('has-img');

        self.removeClass('has-img')

    }
    var btn_next = $('#item-photo-panel a.next')

    btn_next.click(function(){

        action_turn(this, 'next');

        return false;

    });

    var btn_prev = $('#item-photo-panel a.prev')

    btn_prev.click(function(){

        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 

0
tip:
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.