Full parsing of "&&" and "| |" in javascript Operator (summary) _javascript tips

1, | | (Logical OR),

Literally, returns false only when both before and after false, otherwise returns true.

Alert (true| | FALSE); True
alert (false| | true); True
alert (true| | true); True
alert (false| | FALSE); False

This fool knows ~ ~

But, in the deep sense, there is another world, try the following code

Alert (0| | 1);//1

Obviously, we know that the front 0 means false, and the following 1 means true, so the result above should be true, and the result returned by the fact is 1. Then look at the following code:

Alert (2| | 1);//2

We know that the front 2 is true, and the back 1 is true, so what is the return result? Test results are 2, continue to see:

Alert (' A ' | | 1);//' a '

Again, the front ' a ' is true, followed by 1 is true; The test result is ' a ', the following

Alert (' | | 1);//1

By the above, we know that the front "is false, the back 1 is true, and the return result is 1." And look at the bottom.

Alert (' A ' | | 0);//' a '

The front ' a ' is true, and the back 0 is false, and the return result is ' a ', continue below

Alert (' | | 0);//0

Front "is false, followed by 0 is false, return result is 0

Alert (0| | "); /''

The front 0 is false, and the back "is false, and the return result is"

This means

1, as long as "| |" False before, regardless of "| |" Back is true or FALSE, return "| |" The value that follows.

2, as long as "| |" True before, regardless of "| |" Back is true or FALSE, return "| |" The previous value.

I call this the short circuit principle: know the first result before the output, if the first is: true, take the first value, if the first is false, then the second value.

JS must keep in mind 6 eggs: Please be sure to 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.

2.&& (Logic and)

Literally, returns true only when both before and after are true, otherwise returns false.

alert (True&&false); False
alert (true&&true);//True
alert (false&&false);//False
alert (false&& true); False

Then, based on the experience above, we look at the "&&" before and after, not just the Boolean type.

Alert (' &&1);//'

The knot is returned "," && "front" is false, followed by 1 is true.

Alert (' &&0);//'

The knot is returned "," && "front" is false, followed by 0 and false.

Alert (' a ' &&1);//1

The knot is returned 1, "&&" A is true, followed by 1 is true.

Alert (' a ' &&0);//0

The knot is returned 0, "&&" A is true, followed by 0 is false.

Alert (' A ' && ');//'

The knot is returned "," "&&" "A is true, followed by" is false.

Alert (0&& ' a ');//0

The knot is returned 0, "&&" before "0 is false, followed by ' a ' is true.

Alert (0&& '); 0

The knot is returned 0, "&&" before "0 is false, followed by" is false.

Short Circuit principle

1, as long as "&&" before false, regardless of "&&" after is true or false, the result will return to "&&" the value before;

2, as long as "&&" before the true, regardless of "&&" after is true or false, the result will return to the value after "&&";

3. In the development of the application

The following three sections of code are equivalent:

a=a| | " DefaultValue "; 
if (!a) { 
a= "defaultvalue"; 
} 
if (a==null| | a== "" | | a==undefined) { 
a= "defaultvalue"; 
}

Which one would you like to use?

2, like the var yahoo = Yahoo | | {}; This is very widely used. Is the method of getting the initial value very elegant? than if .... else ... Much better than that? : Much better.

3, Callback&&callback ()

In the callback, often so written, more rigorous, first to determine whether callback exists, if there is to execute, the purpose of writing is to prevent errors
If directly write callback (); The code will complain when callback does not exist.

4. Comprehensive example

Requirements as shown:

Here to write a picture description

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:

var add_level = 0; 
if (Add_step = = 5) { 
add_level = 1; 
} 
else if (Add_step = n) { 
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:

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:

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;

Second requirement:

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

The above is a small series to introduce you to the full interpretation of JavaScript "&&" and "| |" Operators (summary), I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!