Comprehensive analysis of the "&&" and "||" operators in JavaScript (summary)

1.||(logical or),

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

 alert(true||false); // truealert(false||true); // truealert(true||true); // truealert(false||false); // false

This fool knows it~~

However, in a deeper sense, there is another world. Try the following code

 alert(0||1);//1

Obviously, we know that the first 0 means false, and the second 1 means true, then the above result should be true, and the fact returns the result is 1. Look at the following code:

 alert(2||1);//2

We know that the first 2 is true and the last 1 is true. So what is the return result? The test result is 2, continue reading:

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

Similarly, the first 'a' is true, and the next 1 is true; the test result is 'a', and the following

 alert(''||1);//1

From the above, we know that the front "is false, the back 1 is true, and the return result is 1. Look at the following

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

The first 'a' is true, and the next 0 is false, the return result is 'a', continue to the following

 alert(''||0);//0

The previous "is false, and the next 0 is also false, and the return result is 0

 alert(0||'');//''

The first 0 is false, the next "is false, the return result is"

This means

1. As long as "||" is false in front of "||", no matter whether "||" is true or false in back of "||", the value after "||" will be returned.

2. As long as "||" is true, regardless of whether "||" is true or false, the value before "||" will be returned.

I call this the short circuit principle: If you know the result of the first one, you will know the output afterwards. If the first one is true, then take the value of the first one, and if the first one is false, then take the value of the second one.

6 balls that js must remember: Please remember: in js logical operations, 0, "", null, false, undefined, and NaN will be judged as false, and the others are true (it seems that there is no omission, please confirm). You must remember this, otherwise there will be problems with the application || and &&.

By the way: I often ask you why I don’t write if(attr) directly if(attr);

In fact, this is a more rigorous way of writing:

Please test the difference between typeof 5 and typeof !!5. The function of !! is to convert a variable of other types into a bool type.

2.&& (Logistic and)

Literally, true will be returned only when both before and after are true, otherwise false will be returned.

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

Then, based on the above experience, let's look at the situation where "&&" numbers are not just Boolean types.

 alert(''&&1);//''

The knot is return ", "&&" before " is false, and the 1 is true after it.

 alert(''&&0);//''

The knot is return ", "&&" before " is false, and the 0 is also false.

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

The knot returns 1, "&&" before "a is true, and the following is 1 is also true.

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

The knot returns 0, "&&" before "a is true, and the following is 0 is false.

 alert('a'&&'');//''

The knot is return ", "&&" before "a is true, and "after "is false.

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

The knot returns 0, "&&" before "0 is false, and the 'a' is true.

 alert(0&&''); //0

The knot returns 0, "&&" before "0 is false, and the after "is also false.

Short circuit principle

1. As long as "&&" is false, no matter whether "&&" is true or false, the value before "&&" will be returned;

2. As long as "&&" is true, no matter whether "&&" is true or false, the result will return the value after "&&";

3. Application in development

The following three codes are equivalent:

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

Which one do you want to use?

2. Such as var Yahoo = Yahoo || {}; is very widely used. Isn't the way to get the initial value elegant? than if. . . . else... much better, better than? : It's much better.

3. callback&&callback()

In callbacks, this is often written in this way, and it is more rigorous. First, determine whether the callback exists. If it exists, execute it. The purpose of writing this way is to prevent errors from being reported.

If you write callback() directly; the code will report an error when the callback does not exist.

4. Comprehensive examples

Requirements are shown in the figure:

Write a picture description here

Assume that the growth rate is specified as follows:

1 arrow is displayed when the growth rate is 5;

2 arrows are displayed when the growth rate is 10;

3 arrows are displayed when the growth rate is 12;

4 arrows are displayed when the growth rate is 15;

All the others display 0 arrows.

How to implement it with code?

A little bit 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;}

If the requirement is changed to:

Growth rate is >12 and 4 arrows are displayed;

3 arrows are displayed when the growth rate is >10;

Growth speed is >5 and 2 arrows are displayed;

Growth speed >0 shows 1 arrow;

Growth speed is <=0 and 0 arrows are displayed.

Then it will be very troublesome to implement with switch.

So have you ever thought of implementing it in one line?

OK, let's take a look at the powerful expressiveness of js:

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

More powerful and better:

 var add_level={'5':1,'10':2,'12':3,'15':4}[add_step] || 0;

The 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 comprehensive analysis of the "&&" and "||" operators in JavaScript introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!