Multiple usage tips for JavaScript ternary operators, javascript Operators

Multiple usage tips for JavaScript ternary operators, javascript Operators

When I find that the code is too much to write, I will unconsciously Replace the if else with three elements, just without making 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
Copy codeThe Code is as follows:
If (Bai chunge | Bai xuedi ){
Do not go to the subject;
} Else {
Door mounting;
}

The three-element representation is
Copy codeThe 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
Copy codeThe Code is as follows:
Flag? $ ('Body'). addClass ('hover '): $ ('body'). removeClass ('hover ');

Even more abnormal.
Copy codeThe 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:
Copy codeThe Code is as follows:
$ ('. Item') ['addclass'] ('hover ')

This statement is equivalent.
Copy codeThe Code is as follows:
$ ('. Item'). addClass ('hover ')

Please try again

You can call the desired function as needed to handle more things.
Copy codeThe 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.
Copy codeThe 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
Copy codeThe 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
Copy codeThe 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.
Copy codeThe 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.