Multiple usage tips for JavaScript ternary operators _ javascript skills

This article mainly introduces a variety of usage techniques of JavaScript ternary operators. This article describes common usage, usage of a little smarter, and even more unusual usage, if you need more code, you may unconsciously replace if else with three elements when you find that the code is too much to write. This simply does not make the code more concise and incisive, of course, some people say that the use of three yuan can make you feel a climax. I recently felt this way when I was writing JavaScript, And I collected some tips and shared them.

Please skip the following section, and the big bird will help you correct it ^__ ^

==== Popularity ====

Expression (expr1 )? (Expr2): (expr3)

When the value of expr1 is TRUE, the value is expr2, and when the value of expr1 is FALSE, the value is expr3.

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

Common usage

When you find that you often use if else

The Code is as follows:

If (Bai chunge | Bai xuedi ){
Do not go to the subject;
} Else {
Door mounting;
}

The three-element representation is

The Code is as follows:

Baichun brother | Baishi test emperor? No mounting: Door mounting

The code is brilliant.

Such if else judgments are often made in daily use. In particular, it is more harmonious to use the ternary element when there are many nesting elements, which can make your code look more fresh and have a clear structure.

Usage with a little cleverness
Through constant changes, many ternary usage can be derived. The following jquery code

The Code is as follows:

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

Even more abnormal.

The Code is as follows:

$ ('. Item') [flag? 'Addclass': 'removeclass '] ('hover ')

The above code looks confusing. When flag is set to true, the Code becomes the following code:

The Code is as follows:

$ ('. Item') ['addclass'] ('hover ')

This statement is equivalent.

The Code is as follows:

$ ('. Item'). addClass ('hover ')

Please try again

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

The Code is as follows:

Function (){
Do something
}
Function B (){
Do something
}

Flag? A (): B ();

Therefore, it is the complete body of the teacher.

So in this case, two buttons act forward and backward. The operation functions are similar.

The Code is as follows:

Var action_turn = function (e, type ){
Var self = $ (e). closest ('lil ');
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;
});

Situations to be avoided as much as possible

The Code is as follows:

Alert (true? 'True': false? 'T': 'F ')

I mean try to avoid the three elements nested above, because in js, the statements are from right to left, and the above Code is equivalent

The Code is as follows:

Alert (true? 'True': (false? 'T': 'F '))

For example, the results in php are completely different, and the left-side priority is given when the three elements are nested.

The Code is as follows:

Echo (true? 'True': false )? 'T': 'F') // php

Tip:
In addition, we found that the Trielement in php had such a prompt.

Note: The ternary operator is a statement. Therefore, the result is not a variable but a statement. It is important to return a variable through reference. Return $ var = 42? $ A: $ B; will not work, and a warning will be issued for future PHP versions.

However, after testing, it is found that the above practices in javascript can work, probably because js is relatively BT and its degree of rigor is not as big as php.