Detailed explanation of the definition and usage of logical expressions in the JavaScript basic course

Logical operators "&&", "||", and "!" perform Boolean arithmetic operations on operations. They are often used together with relational operators. Logical operators combine multiple relational expressions to form a more complex one. expression.

i.Logical and

The "&&" operator can be understood from three different levels. The simplest understanding is that when the operands are both Boolean values, "&&" performs a Boolean AND (AND) operation on two Boolean values, only when the first operand and the second operand are both true. , it returns true. If one of the operands is false, then it returns false.

"&&" is used to connect two relational expressions

x == 0 && y == 0; //Return true only when x and y are both 0
Relational expressions always return true or false, so when used like this, "&&" itself also returns true or false. Relational operators have higher precedence than "&&" (and "||"), so expressions like this can be safely written without the need for parentheses.

The "&&" operand is not necessarily a Boolean value. Recall that some values ​​can be regarded as "true values" and "false values". (If the false value is: false null undefined 0 -0 NaN and "", all and other values ​​including all objects are true values). The second level of understanding of "&&" is that "&&" can perform a Boolean AND (AND) operation on true and false values. If both operands are true, then a true value is returned; otherwise, at least one operand is false. Any time a Boolean value is used in JavaScript, the expression statement will treat it as a true or false value, so in fact "&&" does not always return true and false. But it is not a big deal.

It should be noted that the above mentioned operator returns "true value" and "false value", but it does not explain what the "true value" or "false value" is. For this reason Let’s discuss in depth the understanding of the third layer of “&&”. The operator first calculates the value of the left operand, that is, it first calculates the expression on the left side of "&&". If the calculation result is a false value, then the result of the entire expression must be a false value, so "&&" simply returns the left operand. The value of the operation, without calculating the operand on the right.

var o = {
    x: 1
};
 var p = null;
 o && o.x; //=>1 : 1:0是真值，因此返回值是o.x
 p && p.x //= null :p是假值，因此将其返回，而并不计算p.x

This is crucial to understand that "&&" may not calculate the right operand. In the above code, the value of variable P is null, and if p.x is calculated, an exception error will be thrown. Therefore, the behavior of computing p.x

"&&" is sometimes called "short circuiting" (short circuiting), and we often see it a lot The code takes advantage of this to conditionally execute code. For example, the following two codes are equivalent

 if (a == b) stop(); //只有a==b时才能调运stop()
 (a == b) && stop(); //同上

Generally speaking, be extra careful when the expression on the right side of "&&" has side effects (assignment, increment, decrement and function call expressions). Because the execution of these expressions with side effects depends on the calculation result of the left operator mouse.

Although "&&" can perform some complex expression operations according to the second and third levels of understanding, in most cases, "&&" is only used to operate on true and false values. Boolean calculations.

ii. Logical OR (||)

The "||" operator performs a Boolean OR (OR) operation on two operands. If one of the operands is true, it returns true, if both operands are false, it returns false.

Although the "||" operator just does a simple Boolean OR (OR) operation in most cases, like "&&", it also has some more complex behaviors. It first calculates the first operand Value, that is to say, the expression on the left is first evaluated. If the evaluation result is true, the true value is returned. Otherwise, the second value is evaluated.

Like "&&", you should avoid the right operand containing some expressions with side effects. Unless you explicitly use an expression with side effects on the right side, the right side may not be calculated. expression.

The most common way this operator is used is to select the first true-valued expression from a set of alternative expressions.

//如果max_width已经定义了，则直接使用它。赋值在preferences对象中查找max_width
//如果没有定义它，则使用一个写死的常量。
var max =max_width || preferences.max_windth || 500;

This common usage is usually within the body of a function to provide default values ​​for parameters.

//将o成功的属性复制到p中，并返回p
function copy(o, p) {
p = p || {}; //如果向参数p没有传入任何对象，则使用一个新创建对象。
//函数体内的主逻辑

iii.Logical NOT(!)

The "!" operator is a unary operator that is placed before a single operand. Its purpose is to negate the Boolean value of the operand.

Different from the "&&" and "||" operators, the "!" operator first converts its operand to a Boolean value, and then negates the Boolean value. That is, "!" always returns true and false. Moreover, you can get the Boolean value of a value by using two logical NOT operations:

"!" has a high priority and is closely tied to the operand. If you want to compare p && q , you need round brackets!(p && q). The following code:

!(p && q) === !p || !q
 !(p || q) === !p && !q

For any value of p and q, these two expressions will always be true.

The above is the detailed content of Detailed explanation of the definition and usage of logical expressions in the JavaScript basic course. For more information, please follow other related articles on the PHP Chinese website!