Various techniques for using JavaScript ternary operator_javascript techniques

I find that when I write too much code, I will unconsciously replace if else with ternary. It just makes the code more concise and incisive. Of course, some people say that using ternary can make you have a climax. I also felt this way when I was writing js recently, and I collected some tips to share.

Big Bird, please skip the following paragraph, Big Bird can help correct it ^__^

====Popular Line====

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

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

============

Common usage

When you find that you often use if else

Copy code The code is as follows:

if(Thank you, Brother Chun || Thank you, Exam Emperor){
Don’t fail;
}else{
Door hanging;
}

Then the representation of ternary is

Copy code The code is as follows:

Worship Brother Chun || Worship the exam emperor? Don’t fail the exam: Menmenhang

It's very cool to find a lot of insightful code.

There are often such if else judgments in daily life, especially when there are many nestings. It is more harmonious to use ternary, which can make your code look more refreshing and have a clear structure.

Slightly smarter usage
Through constant changes, many usages of ternary can be derived. The following jquery code

Copy code The code is as follows:

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

Even more perverted.

Copy code The code is as follows:

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

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

Copy code The code is as follows:

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

This way of writing is equivalent to.

Copy code The code is as follows:

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

Upgrade it again

You can call the functions you want as needed to handle more things.

Copy code The code is as follows:

function a(){
do something
}
function b(){
do something
}

flag ? a() : b();

Then the complete body of the teacher

So there is such a case, two buttons, one for forward behavior and one for backward behavior. The operating functions are almost the same.

Copy code The code is as follows:

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

Things to avoid

Copy code The code is as follows:

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

What I mean is to try to avoid the nested ternary as above, because in js the statements are from right to left, and the above code is equivalent to

Copy code The code is as follows:

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

For example, in PHP, the result is completely different. When nesting three elements, the left one is given priority.

Copy code The code is as follows:

echo (( true ? 'true' : false ) ? 't' : 'f' ) //php

tip：
In addition, I found that the ternary in php has such a prompt

Note: Note that the ternary 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. The statement return $var == 42 ? $a : $b; in a function that returns by reference will not work, and a future version of PHP will issue a warning about this.

However, after testing, I found that the above approach can work in javascript. This is probably because js is not as rigorous as BT compared to php.