"Reprint" JS with or operator | | && Magical

JS with or operator | | && Magic, can be used to streamline the code, reduce the readability of the program.

First, a question:
　　

It is assumed that the growth rate is indicated as follows:
Growth rate of 5 shows 1 arrows;
Growth rate of 10 shows 2 arrows;
Growth rate of 12 shows 3 arrows;
Growth rate of 15 shows 4 arrows;
All other displays are displayed with 0 arrows.
How is the code implemented?

An almost if,else:
JS Code

The 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

The code is as follows:
var add_level = 0;
switch (add_step) {
Case 5:add_level = 1;
Break ;
Case Ten:add_level = 2;
Break ;
Case :add_level = 3;
Break ;
Case :add_level = 4;
Break ;
Default:add_level = 0;
Break ;}If the demand changes to:

Growth speed of >12 display 4 arrows;
Growth speed of >10 display 3 arrows;
Growth speed of >5 display 2 arrows;
Growth speed of >0 display 1 arrows;
Growth Speed shows 0 arrows for <=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 the Code code 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 the Code code as follows:
var add_level={' 5 ': 1, ' Ten ': 2, ' n ': 3, ' []: 4}[add_step] | | 0;

A second requirement:
JS Code

Copy the Code code 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 wording:
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"
take a look 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 the Code code 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") &&
[2, "<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.

Original address: http://www.jb51.net/article/21339.htm

"Reprint" JS with or operator | | && Magical