Summarize the usage skills of Boolean operators || and && in JavaScript_javascript skills

Have you ever seen code like this: a=a||""; Maybe JavaScript beginners will be confused by this. Today I will share with you some of my experiences.
Actually:

a=a||"defaultValue";

a=a||"defaultValue"; 
 

and:

if(!a){
a="defaultValue";
}
if(!a){ 
  a="defaultValue"; 
} 

and:

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

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

are equivalent!
In order to clarify this problem, first we must understand a problem: what happens when the data type in JavaScript is converted to the bool type.

In JavaScript, data types can be divided into "true values" and "false values". As the name suggests, when a true value is converted to bool, the value is true; when a false value is converted to bool, the value is false. The following table lists the values ​​of some common data types when converted to bool:

In the if expression, JavaScript first converts the conditional expression into a bool type. If the expression is true, the logic in the if is executed, otherwise it is skipped.

So there is:

if(!a){
a="defaultValue";
}


if(!a){ 
  a="defaultValue"; 
} 

Next, let’s look at the two expressions “&&” and “||”.
Since JavaScript is a weakly typed language, these two expressions in JavaScript may be different from those in other languages ​​(such as Java).
In JavaScript, the "&&" operator operates as follows:

If the value of the expression on the left side of && is true, the value of the expression on the right side is returned; otherwise, the value of the expression on the left side is returned.

This means:

var i=""&&"真值";//->i=""
i="真值"&&"其他真值";//->i="其他真值"
i="真值"&&"";//->i=""
var i=""&&"真值";//->i="" 
i="真值"&&"其他真值";//->i="其他真值" 
i="真值"&&"";//->i="" 

The operation rules of the "||" operator are as follows:

If the value of the expression on the left side of || is true, then the value of the expression on the left side is returned; otherwise, the value of the expression on the right side is returned.

This means:

var i=""||"真值";//->i="真值"
i="真值"||"其他真值";//->i="真值"
i="真值"||"";//->i="真值"
var i=""||"真值";//->i="真值" 
i="真值"||"其他真值";//->i="真值" 
i="真值"||"";//->i="真值" 

So, you can understand:

a=a||"defaultValue";
a=a||"defaultValue"; 

’s logic. If a is a false value (equal to null, empty string...), then "defaultValue" is assigned to a; otherwise, the value of a is assigned to a itself.


Below we use ||, && to simplify the process:

var parameter="";
function test(parameter){
//return 真值
return true;
}
//真值操作
function operate1(parameter){
return "真值操作";
}
//假值操作
function operate2(parameter){
return "假值操作";
}
var result=test(parameter)&&operate1(parameter);
result=test(parameter)||operate2(parameter);
//等价于
result=test(parameter)?operate1(parameter):operate2(parameter);
alert(result);//真值操作
//也等价于
if(test(parameter)){
result=operate1(parameter);
}else{
result=operate2(parameter);
}
alert(result)//真值操作

Another example:

<script language="javascript" type="text/javascript"> 
  var a =1; 
  var b = 0; 
  var c = 3; 
  var d = a && b && c; 
  window.alert(d); 
</script> 

The output value of d is 0. If the value of d is changed to a value not equal to 0, then d will always be 3

So && in js returns the first value that is not true, which is 0 (objects can also be used), and if all are true, then the last value returned.
     

<script language="javascript" type="text/javascript"> 
  var a =0; 
  var b = 3; 
  var c = 5; 
  var d = a || b || c; 
  window.alert(d); 
</script> 

The output value of d is 3. If the value of b is changed to 0, then d will always be 5. If all are changed to 0, then the value of d is 0.

Therefore, || in js returns the first value that is not false, which is 0 (objects are also acceptable), and if all are false, the last value returned.
Application:

For example, if you want to simply verify the email format, the format is correct only if both ‘@’ and ‘.’ exist at the same time, otherwise an error message will appear:

Which one should I use? Let’s break it down:

if (form1.elements[3].value.indexOf("@",0)==-1 && form1.elements[3].value.indexOf(".",0)==-1){ alert("EMAIL地址输入错误!")}

If both exist: Both sides of && are false. && returns the first true value, so the if judgment condition is false and the statement after the if is not executed! The user will not be prompted.

Only at least @ and. There is an error when the if condition is true.

When both exist, the last value is returned, which is true. If the judgment condition is established, the if statement is executed. Prompt user error.

So using && is obviously wrong!

should be replaced by

if (form1.elements[3].value.indexOf("@",0)==-1 || form1.elements[3].value.indexOf(".",0)==-1){ alert("EMAIL地址输入错误!") }

Analysis:

If both exist: all are false, the return value is false, so the if condition is not established, the statement is not executed, and no error is prompted!

If only one exists: return the first value that is not false. Returns true to indicate an error!

Both do not exist: return the first value that is not false, return true and prompt an error!

So you should use ||