JavaScript with OR operator | | && Application Skills

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?

Sponsored Links

Almost if,else:

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:

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
}

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:

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:
var add_level={' 5 ': 1, ' Ten ': 2, ' ': 3, ': 4}[add_step] | | 0;

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 use switch to achieve the code will appear very cumbersome, using JS and OR operator | | && can achieve the effect of simplicity:

var add_level = (add_step>12 && 4) | | (add_step>10 && 3) | | (add_step>5 && 2) | | (add_step>0 && 1) | | 0;

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, such as:

if (a >=5) {
Alert ("Hello");
}
Can be written as:
A >= 5 && alert ("Hello");

This is done in just one line of code, but the interesting thing 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"

Then look at the JS or operator | | ：

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.

However, be sure to remember: in the JS logical operator && and | | , 0, "", null, False, undefined, Nan will all be judged to be false, others are true, && and | | No assignment expression should be present on the left and right sides, otherwise apply | | And && there will be problems, such as:

Config.event = = "Hover" && config.event = "MouseEnter";

&& is followed by an assignment expression, which is the wrong way of writing, and will directly report "Uncaught referenceerror:invalid left-hand side in assignment" error, if you insist that you do not want to use the IF () {} else{}, we can be changed into three-dimensional expression of the wording:

Config.event = = "Hover"? config.event = "MouseEnter": "";

A 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.

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.

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.