Super-Practical JavaScript Snippet Item7--"&&" and "| |" Operator Summary

1, | | (Logical OR),

Literally, it returns false only when both the front and back are false, otherwise it returns true.

alert(true||false);    //truealert(false||true);    //truealert(true||true);        //truealert(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 previous 0 means false, and the next 1 means true, then the result above should be true, and the result of the fact returned is 1. Then look at the following code:

alert(2||1);//2

We know that the previous 2 is true, and the back 1 is also true, so what is the return result? The test result is 2, continue to look:

alert(‘a‘||1);//‘a‘

Again, the front ' a ' is true, the back 1 is also true; the test result is ' a ', below

alert(‘‘||1);//1

From the top, we know that the front "is false, the back 1 is true, and the return result is 1." Look at the bottom again.

alert(‘a‘||0);//‘a‘

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

alert(‘‘||0);//0

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

alert(0||‘‘);//‘‘

The preceding 0 is false, and the back "is false, and the result is"

This means

1, as long as "| |" False in front, regardless of "| |" Followed by true or FALSE, return "| |" The value that follows.

2, as long as "| |" Preceded by true, regardless of "| |" Followed by true or FALSE, return "| |" The preceding value.

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

JS must remember the 6 eggs: Please do remember: in the JS logic operation,0, "", null, False, undefined, NaN will be sentenced to false, the other is 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 of the difference. !! The function is to convert a variable of another type to the bool type.

2.&& (Logic and)

Literally, it returns true only if both the front and back are true, otherwise it returns false.

alert(true&&false);    //falsealert(true&&true);    //truealert(false&&false);    //falsealert(false&&true);    //false

Then, based on the above experience, we look at the "&&" number, not just the case of 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 is also false.

alert(‘a‘&&1);//1

The knot is returned 1, "&&" before "a" is true, followed by 1 is also true.

alert(‘a‘&&0);//0

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

alert(‘a‘&&‘‘);//‘‘

The knot is returned "," && "front" 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 also false.

Short Circuit principle

1, as long as "&&" is false, whether "&&" followed by true or false, the result will be "&&" the preceding value;

2, as long as "&&" is true, whether "&&" followed by true or false, the result will be returned to "&&" the value after;

3. Application in Development

1. 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 var yahoo = Yahoo | | {}; This is very widely used. Is the way to get the initial value not very elegant? than if .... else ... Much better, than? : A lot.

3, callback&&callback ()

In the callback, often so write, more rigorous, first judge callback is not exist, if there is to execute, so write to prevent error
If directly write callback (); When callback does not exist, the code will error.

4. Comprehensive example

Demand

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:

var add_level =0;if(Add_step = =5){add_level = 1;} Else if(Add_step = =Ten){add_level = 2;} Else if(Add_step = = A){add_level = 3;} Else if(Add_step = = the){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 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:

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:

var add_level={‘5‘:1,‘10‘:2,‘12‘:3,‘15‘:40

A second requirement:

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

Super-Practical JavaScript Snippet Item7--"&&" and "| |" Operator Summary