First of all, a question:
As shown in figure:
Suppose the growth rate is shown 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 show 0 arrows.
How do I implement it in code?
Almost if,else:
JS Code
Copy Code code as follows:
var add_level = 0;
if (Add_step = = 5) {
Add_level = 1;
}
else if (Add_step = 10) {
Add_level = 2;
}
else if (Add_step = 12) {
Add_level = 3;
}
else if (Add_step = 15) {
Add_level = 4;
}
else {
Add_level = 0;
}
A slightly better switch:
JS Code
Copy Code code 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 rate for >12 display 4 arrows;
Growth rate for >10 display 3 arrows;
Growth rate for >5 display 2 arrows;
Growth rate for >0 display 1 arrows;
Growth rate shows 0 arrows for <=0.
Then it would be troublesome to implement it with a switch.
So have you ever thought about using one line of code to achieve it?
OK, let's take a look at JS strong expressiveness bar:
JS Code
Copy 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, and more gifted:
JS Code
Copy Code code as follows:
var add_level={' 5 ': 1, ' Ten ': 2, ' ': 3, ': 4}[add_step] | | 0;
Second requirement:
JS Code
Copy 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 we comb a concept, please remember: in the JS logical operation, 0, "", null, False, undefined, Nan will be sentenced to false, the others are true (as if there is no omission, please confirm). This must be remembered, otherwise apply | | And && there will be problems.
Here by the way: I am often asked to see a lot of code if (!! attr), why not directly write if (attr);
In fact, this is a more rigorous formulation:
Please test typeof 5 and typeof!! 5 the difference.!! The role is to convert a variable of another type into a bool type.
The following main discussion of the following logical operators && and | |.
In almost all languages | | And && all follow the "short-circuit" principle, such as the first expression in && is not to deal with the second expression, and | Just the opposite.
JS also follows the above principles. But what's more interesting is the value they return.
Code: var attr = True && 4 && "AAA";
Then the result of the run attr is not simple true or false, but "AAA"
Take another look at | | ：
Code: var attr = attr | | ""; This operation is often used to determine whether a variable is defined, and if it is not defined, give him an initial value, which is useful when defining a default value for a function's parameters. Because JS is not like PHP, you can define func ($attr =5) directly on the type parameter. Again, remember the principle: if the argument needs to be 0, "", null, False, undefined, Nan, it will also be treated as false.
if (a >=5) {
Alert ("Hello");
}
Can be written as:
A >= 5 && alert ("Hello");
This is done with just one line of code. But the point to note is: JS in | | And && features help us streamline code while also bringing down code readability. It's up to us to weigh it.
On the one hand, the streamlining of JS code, can substantially reduce network traffic, especially the large number of applications of the JS Public Library. The personal comparison recommendation is: if it is a relatively complex application, please write some comments appropriately. This is the same as the expression, the ability to streamline the code, but the readability will be reduced, the people who read the code will be higher, the best way is to write a note.
We can not use these techniques, but we must be able to understand, because these techniques have been widely used, especially like jquery and other JS box code, do not understand these you are difficult to understand other people's code.
Like the var yahoo = Yahoo | | {}; This is very widely used.
OK, finally let's take a look at the code in jquery:
JS Code
Copy 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;
When this code is used by the author to process $ (HTML), some tags must be bound, such as <option> must be within <select></select>.
You may also find that the author also has a very clever place is!tags.indexof ("<opt"), the author is very simple to achieve the Startwith function, there is no extra code. The jquery source code also has many such exquisite code, everybody can go to learn.
