JS and OR operator

The growth rate is assumed to be as follows: The growth speed is 5 to show 1 arrows, the growth speed is 10 to show 2 arrows, the growth speed is 12 to show 3 arrows, the growth rate is 15 to show 4 arrows, and the others show 0 arrows. How is the code implemented?
An almost IF,ELSE:JS code

Copy CodeThe code is as follows: var add_level = 0; if (Add_step = = 5) {add_level = 1;} else if (Add_step = =) {Add_level = 2;}
else if (Add_step = =) {add_level = 3;} else if (Add_step = =) {add_level = 4;} else {add_level = 0;}

A slightly better SWITCH:JS code

Copy CodeThe code is as follows: var add_level = 0; Switch (add_step) {
Case 5:add_level = 1; Break Case 10:add_level = 2; Break
Case 12:add_level = 3; Break Case 15:add_level = 4; Break
Default:add_level = 0; Break

If the requirement is changed to:
Growth speed of >12 display 4 arrows, growth speed of >10 display 3 arrows; growth speed of >5 display 2 arrows;
Growth speed shows 1 arrows for >0, and 0 arrows for growth speed of <=0.
Then using switch to implement it is also very troublesome.
So have you ever thought of using a single line to implement the code? OK, let's take a look at JS powerful expressive bar: JS code

Copy CodeThe code is as follows: var add_level = (add_step==5 && 1) | | (add_step==10 && 2) | | (add_step==12 && 3) | | (add_step==15 && 4) | | 0;

More powerful, but also more excellent:
JS Code

Copy CodeThe code is as follows: Var add_level={' 5 ': 1, ' Ten ': 2, ' $ ': 3, ' []: 4}[add_step] | | 0;

A second requirement:
JS Code

Copy CodeThe code is as follows: var add_level = (add_step>12 && 4) | | (add_step>10 && 3) | | (add_step>5 && 2) | | (add_step>0 && 1) | | 0;

First of all, let us comb a concept, you must remember: in the JS logic operation, 0, "", null, False, undefined, Nan will be sentenced to false, the others are true (as if there is no missing, please confirm below). This must be remembered, otherwise the application | | And && will have problems.
Here by the way: Often people ask me, see a lot of code if (!!). attr), why not write directly if (attr); in fact, this is a more rigorous way of writing: please test typeof 5 and typeof!! 5 the difference.!! The function is to convert a variable of another type to the bool type. The following is the main discussion of logical operators && and | | |.
In almost all languages | | and && Follow the principle of "short circuit", such as the first expression in && is false to not handle the second expression, and | | Just the opposite.
JS also follows the above principles. But what's interesting is the value they return. Code: var attr = True && 4 && "AAA"; Then the result of the run attr is not simple true or this false, but "AAA" to see again | | : code: var attr = attr | | This operation is often used to determine whether a variable is defined, and to give an initial value if there is no definition, which is useful when defining a default value for a function's parameters. Since JS is not like PHP, you can define func directly on the type parameter ($attr =5). Again remind you to remember the above principle: if the argument needs to be 0, "", null, False, undefined, Nan, it will also be false to handle.
if (a >=5) {alert ("Hello"), can be written as: a >= 5 && alert ("Hello");
This is done with a single line of code. But one thing to be aware of is: JS | | And && features help us streamline the code while also bringing down the readability of the code. This needs to be weighed on our own.
On the one hand, the simplification of JS code, can substantially reduce network traffic, especially a large number of applications JS Common library. Personally, it is recommended that if it is a relatively complex application, please write some comments appropriately. This is the same as being an expression, able to streamline the code, but the readability will be reduced, the person who reads the code is higher, the best way is to write comments.
We can not use these techniques, but we must be able to understand, because these techniques have been widely used, especially like jquery, such as JS box code, do not understand these you will be difficult to understand the code of others.
like var yahoo = Yahoo | | {}; This is very widely used. OK, let's take a look at the code in jquery:
JS Code

Copy CodeThe code is as follows: var wrap =//Option or Optgroup
!tags.indexof ("<opt") && [1, "<select multiple= ' multiple ' >", "</select>"] | |
!tags.indexof ("<leg") && [1, "<fieldset>", "</fieldset>"] | |
Tags.match (/^< (THEAD|TBODY|TFOOT|COLG|CAP)/) && [1, "<table>", "</table>"] | |
!tags.indexof ("<tr") && [2Jnkll|;gu6j|;mbng|;VNFJ|;U8tu|;Kjhui|;Nbn8|;GTR5|;54FGGDF|;67FDG|;187FGDF|;fd65|;324e|;DFSE|;dfess|;, "<table><tbody>", "</tbody></table>" | |
<thead> matched above
(!tags.indexof ("<td") | |!tags.indexof ("<th") &&
[3, "<table><tbody><tr>", "</tr></tbody></table>"] | |
!tags.indexof ("<col") && [2, "<table><tbody></tbody><colgroup>", "</colgroup ></table> "] | |
IE can ' t serialize <link> and <script> tags normally
!jquery.support.htmlserialize && [1, "div<div>", "</div>"] | |
[0, "", ""];
Go to HTML and back, then peel off extra wrappers div.innerhtml = wrap[1] + elem + wrap[2];
Move to the right depth while (wrap[0]--)
div = div.lastchild;

This code is used by the author to process $ (HTML), some tags must be constrained, such as <option> must be within the <select></select>.
Maybe you also found the author there is a very clever place is!tags.indexof ("<opt"), the author is very simple to realize the Startwith function, there is no redundant code. There are many such subtle codes in the jquery source code that you can learn from.

JS and OR operator