JavaScript Logical Operators || and &&
Category Programming Techniques
I. Let's talk about || (Logical OR), which, literally, only returns false if both the preceding and following values are false; otherwise, it returns true.
alert(true || false); // true
alert(false || true); // true
alert(true || true); // true
alert(false || false); // false
However, if we delve deeper, there's more to it. Consider the following code:
alert(0 || 1);
Clearly, we know that 0 represents false and 1 represents true, so the result should be true, but the actual result is 1. Now, look at the following code:
alert(2 || 1);
We know that both 2 and 1 are true, so what is the result? The test result is 2. Continue with:
alert('a' || 1);
Similarly, both 'a' and 1 are true; the test result is 'a'. Next:
alert('' || 1);
From above, we know that '' is false and 1 is true, and the result is 1. Now, look at:
alert('a' || 0);
'a' is true, and 0 is false; the result is 'a'. Continue with:
alert('a' || 'b');
'a' is true, and 'b' is false; the result is 'a'. We continue with:
alert('' || 0);
'' is false, and 0 is also false; the result is 0.
alert(0 || '');
0 is false, and '' is false; the result is ''.
This means:
- If the value before || is false, regardless of whether the value after || is true or false, it returns the value after ||.
- If the value before || is true, regardless of whether the value after || is true or false, it returns the value before ||.
II. Now, let's discuss && (Logical AND), which, literally, only returns true if both the preceding and following values are true; otherwise, it returns false.
alert(true && false); // false
alert(true && true); // true
alert(false && false); // false
alert(false && true); // false
Then, based on the above experience, let's look at situations where && is not just between boolean types.
alert('' && 1);
The result is '', && before '' is false, and 1 is true.
alert('' && 0);
The result is '', && before '' is false, and 0 is also false.
alert('a' && 1);
The result is 1, && before 'a' is true, and 1 is also true.
alert('a' && 0);
The result is 0, && before 'a' is true, and 0 is false.
alert('a' && '');
The result is '', && before 'a' is true, and '' is false.
alert(0 && 'a');
The result is 0, && before 0 is false, and 'a' is true.
alert(0 && '');
The result is 0, && before 0 is false, and '' is also false.
This means:
- If the value before && is false, regardless of whether the value after && is true or false, it returns the value before &&.
- If the value before && is true, regardless of whether the value after && is true or false, it returns the value after &&.
Let's summarize:
- If the value before || is false, regardless of whether the value after || is true or false, it returns the value after ||.
- If the value before || is true, regardless of whether the value after || is true or false, it returns the value before ||.
- If the value before && is false, regardless of whether the value after && is true or false, it returns the value before &&.
- If the value before && is true, regardless of whether the value after && is true or false, it returns the value after &&.
From the above two tests, we can see that the logical operators || and && follow the short-circuit principle, determining the return value based on the truth of the value before the symbol.
It should be noted that the precedence of && is higher than that of ||. The following test:
alert(1 || 'a' && 2);
The result is 1.
According to the principle of contradiction, we assume that the precedence of || is not lower than that of && (the reason for using "not lower than" here is to prove the case of equal levels).
According to the conclusions we have drawn (1), (1 || 'a') will return the value before 1, and (1 && 2) according to conclusion (4) should return the value after 2. This is clearly incorrect, so the precedence of && is higher than that of ||.
Source address: http://www.cnblogs.com/pigtail/archive/2012/03/09/2387486.html