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