MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

JavaScript逻辑表达式的短路求值

2021-04-295.0k 阅读

什么是逻辑表达式的短路求值

在JavaScript编程中,逻辑表达式的短路求值是一个十分重要的概念。逻辑表达式通常由逻辑运算符(如 &&(逻辑与)、||(逻辑或))连接多个子表达式组成。短路求值意味着JavaScript在计算逻辑表达式时,一旦能够确定整个表达式的最终结果,就会停止计算剩余的子表达式。

逻辑与(&&)运算符的短路求值

逻辑与运算符 && 用于连接两个或多个表达式。其运算规则是:只有当所有连接的表达式都为 true 时,整个逻辑与表达式才返回 true;只要有一个表达式为 false,整个逻辑与表达式就返回 false

在短路求值中,JavaScript会从左到右依次计算逻辑与表达式中的子表达式。当遇到第一个值为 false 的子表达式时,由于整个逻辑与表达式已经确定为 false,JavaScript会停止计算后续的子表达式。

例如,考虑以下代码:

let a = 1;
let b = 2;
let result = (a > 0) && (b > 0) && (a + b > 0);
console.log(result); 

在上述代码中,(a > 0)true(b > 0) 也为 true,最后 (a + b > 0) 同样为 true。JavaScript从左到右依次计算这三个子表达式,因为所有子表达式都为 true,所以整个逻辑与表达式返回 true

再看一个短路求值起作用的例子:

let x = 0;
let y = 5;
let result2 = (x > 0) && (y > 0) && (x + y > 0);
console.log(result2); 

这里,(x > 0)false。当JavaScript计算到这个子表达式时,由于逻辑与的特性,它知道整个表达式已经确定为 false,所以不会再去计算 (y > 0)(x + y > 0)

这种短路求值特性可以带来性能上的优化,尤其是当后面的子表达式计算开销较大时。例如:

function expensiveCalculation() {
    console.log('执行了开销较大的计算');
    return true;
}
let condition1 = false;
let result3 = condition1 && expensiveCalculation();
console.log(result3); 

在这个例子中,由于 condition1falseexpensiveCalculation 函数不会被调用,从而节省了计算资源。

逻辑或(||)运算符的短路求值

逻辑或运算符 || 用于连接两个或多个表达式。其运算规则是:只要有一个连接的表达式为 true,整个逻辑或表达式就返回 true;只有当所有表达式都为 false 时,整个逻辑或表达式才返回 false

对于逻辑或表达式的短路求值,JavaScript同样从左到右依次计算子表达式。当遇到第一个值为 true 的子表达式时,由于整个逻辑或表达式已经确定为 true,JavaScript会停止计算后续的子表达式。

例如:

let m = -1;
let n = 0;
let result4 = (m > 0) || (n > 0) || (m + n > 0);
console.log(result4); 

这里,(m > 0)false,但 (n > 0)true。当JavaScript计算到 (n > 0) 时,由于逻辑或的特性,它知道整个表达式已经确定为 true,所以不会再去计算 (m + n > 0)

再看一个例子:

function anotherCalculation() {
    console.log('执行了另一个计算');
    return false;
}
let condition2 = true;
let result5 = condition2 || anotherCalculation();
console.log(result5); 

在这个例子中,因为 condition2trueanotherCalculation 函数不会被调用。

逻辑或的短路求值在处理默认值时非常有用。例如,我们想要获取一个变量的值,如果该变量为 nullundefined,则使用一个默认值:

let value;
let finalValue = value || '默认值';
console.log(finalValue); 

这里,由于 value 未定义(在JavaScript中 undefined 为假值),逻辑或表达式会继续计算右侧的子表达式,从而返回 '默认值'

短路求值与数据类型转换

在短路求值过程中,JavaScript会进行隐式的数据类型转换。这是因为逻辑运算符 &&|| 不仅可以用于布尔值,还可以用于其他数据类型。

逻辑与(&&)中的数据类型转换

当逻辑与表达式中的子表达式不是布尔值时,JavaScript会将其转换为布尔值进行判断。以下是一些常见的数据类型转换规则:

  • 数字类型:除了 0 转换为 false 外,其他任何数字都转换为 true
  • 字符串类型:空字符串 '' 转换为 false,非空字符串转换为 true
  • 对象类型:任何对象(包括数组和函数)都转换为 truenullundefined 转换为 false

例如:

let num1 = 5;
let str1 = 'hello';
let obj1 = { key: 'value' };
let result6 = num1 && str1 && obj1;
console.log(result6); 

在这个例子中,num1 转换为 truestr1 转换为 trueobj1 转换为 true,所以整个逻辑与表达式返回 obj1

再看一个包含假值的例子:

let num2 = 0;
let str2 = '';
let result7 = num2 && str2;
console.log(result7); 

这里,num2 转换为 false,由于逻辑与的短路求值,str2 不会被计算,整个表达式返回 num2

逻辑或(||)中的数据类型转换

与逻辑与类似,逻辑或表达式中的子表达式也会进行数据类型转换。例如:

let num3 = 0;
let str3 = '';
let result8 = num3 || str3;
console.log(result8); 

在这个例子中,num3 转换为 falsestr3 转换为 false,由于逻辑或的特性,它会继续计算右侧的子表达式,最终返回 str3

如果其中有一个子表达式为真值:

let num4 = 10;
let str4 = '';
let result9 = num4 || str4;
console.log(result9); 

num4 转换为 true,根据短路求值,整个表达式返回 num4

短路求值的嵌套与复杂表达式

在实际编程中,我们经常会遇到逻辑表达式嵌套以及较为复杂的表达式。理解短路求值在这种情况下的工作原理至关重要。

逻辑与(&&)和逻辑或(||)的嵌套

当逻辑与和逻辑或运算符嵌套使用时,JavaScript仍然遵循从左到右的计算顺序以及短路求值规则。例如:

let a1 = true;
let b1 = false;
let c1 = true;
let result10 = (a1 && b1) || c1;
console.log(result10); 

首先,计算 (a1 && b1),由于 a1trueb1false,所以 (a1 && b1) 返回 false。然后,计算 false || c1,因为 c1true,所以整个表达式返回 true

再看一个更复杂的嵌套例子:

let x1 = false;
let y1 = true;
let z1 = false;
let result11 = (x1 && (y1 || z1)) || (!x1 && z1);
console.log(result11); 

这里,先计算 (x1 && (y1 || z1))。由于 x1false,根据逻辑与的短路求值,(y1 || z1) 不会被计算,(x1 && (y1 || z1)) 返回 false。接着计算 (!x1 && z1)!x1true,但 z1false,所以 (!x1 && z1) 返回 false。最后,false || false 返回 false

复杂表达式中的短路求值

复杂表达式可能包含函数调用、变量赋值等操作。短路求值同样会影响这些操作的执行。例如:

function checkValue1() {
    console.log('检查值1');
    return true;
}
function checkValue2() {
    console.log('检查值2');
    return false;
}
let value1;
let result12 = (value1 = checkValue1()) && (value1 = checkValue2());
console.log(result12); 
console.log(value1); 

在这个例子中,首先执行 (value1 = checkValue1())checkValue1 函数被调用,value1 被赋值为 true。然后计算 (value1 = checkValue2())checkValue2 函数被调用,value1 被赋值为 false。整个逻辑与表达式返回 false

再看一个例子:

function calculate1() {
    console.log('计算1');
    return 10;
}
function calculate2() {
    console.log('计算2');
    return 20;
}
let result13 = calculate1() || calculate2();
console.log(result13); 

这里,calculate1 函数被调用并返回 10。由于逻辑或的短路求值,calculate2 函数不会被调用,整个表达式返回 10

短路求值在条件语句中的应用

短路求值在条件语句(如 if - else 语句)中有着广泛的应用。它可以简化代码并提高代码的可读性。

if 语句中的应用

if 语句中,条件表达式通常是一个逻辑表达式。短路求值可以确保在不需要的情况下不执行某些子表达式。例如:

let user = { name: 'John' };
if (user && user.name) {
    console.log('用户名为:' + user.name);
}

在这个例子中,首先检查 user 是否存在(即不为 nullundefined)。如果 user 存在,才会检查 user.name。如果 usernullundefined,由于逻辑与的短路求值,user.name 不会被访问,从而避免了 TypeError

if - else 语句中的应用

if - else 语句中,短路求值同样可以优化代码。例如:

let age = 18;
if (age >= 18 && (age < 60 || age > 70)) {
    console.log('符合条件');
} else {
    console.log('不符合条件');
}

在这个例子中,首先检查 age >= 18。如果为 true,再检查 (age < 60 || age > 70)。如果 age >= 18false,由于逻辑与的短路求值,(age < 60 || age > 70) 不会被计算。

短路求值在函数参数和返回值中的应用

短路求值在函数的参数传递和返回值处理中也有重要的应用。

在函数参数中的应用

当函数参数是逻辑表达式时,短路求值会影响参数的计算。例如:

function displayMessage(message) {
    console.log(message);
}
let condition3 = false;
displayMessage(condition3 && '条件为真');

在这个例子中,由于 condition3false,根据逻辑与的短路求值,'条件为真' 不会作为参数传递给 displayMessage 函数,所以函数打印的是 false

在函数返回值中的应用

函数的返回值也可以是逻辑表达式,短路求值同样适用。例如:

function getValue() {
    let flag = true;
    return flag && '值';
}
let result14 = getValue();
console.log(result14); 

这里,由于 flagtrue,整个逻辑与表达式返回 '值'。如果 flagfalse,根据短路求值,函数会返回 false

注意事项与常见错误

在使用逻辑表达式的短路求值时,有一些注意事项和常见错误需要我们关注。

避免意外的短路求值

有时候,我们可能会写出导致意外短路求值的代码。例如:

let num5 = 0;
let str5 = 'test';
let result15 = num5 && str5.length;
console.log(result15); 

这里,由于 num5false,根据逻辑与的短路求值,str5.length 不会被计算,所以 result150。如果我们本意是想要获取 str5 的长度,就会得到意外的结果。

与赋值运算符的优先级问题

逻辑运算符与赋值运算符的优先级需要特别注意。例如:

let x2 = 10;
let y2 = 20;
let result16 = (x2 = y2) && (x2 > 15);
console.log(result16); 
console.log(x2); 

在这个例子中,首先执行 (x2 = y2)x2 被赋值为 20。然后计算 (x2 > 15),由于 x220,所以 (x2 > 15)true,整个逻辑与表达式返回 true。如果不注意优先级,可能会得到错误的结果。

结合严格相等(===)和逻辑运算符

在使用严格相等运算符 === 和逻辑运算符时,也需要注意短路求值的影响。例如:

let value2 = null;
let result17 = value2 === null && '值为null';
console.log(result17); 

这里,value2 === nulltrue,所以整个逻辑与表达式返回 '值为null'。但如果写成 let result18 = value2 && value2 === null && '值为null';,由于 value2null,在第一个 && 处就会短路求值,value2 === null 不会被计算,result18null

性能优化与代码简洁性

合理利用逻辑表达式的短路求值可以带来性能优化和代码简洁性的提升。

性能优化

如前文所述,当逻辑表达式中的子表达式计算开销较大时,短路求值可以避免不必要的计算。例如:

function complexCalculation() {
    // 执行一些复杂的计算
    let sum = 0;
    for (let i = 0; i < 1000000; i++) {
        sum += i;
    }
    return sum;
}
let condition4 = false;
let result19 = condition4 && complexCalculation();
console.log(result19); 

在这个例子中,由于 condition4falsecomplexCalculation 函数不会被调用,从而节省了大量的计算时间。

代码简洁性

短路求值可以简化代码逻辑。例如,在获取对象属性时:

let person = { age: 30 };
let age = person && person.age;
console.log(age); 

这样的代码比使用传统的 if - else 语句更加简洁。

总之,深入理解JavaScript逻辑表达式的短路求值,对于编写高效、简洁的代码至关重要。无论是在日常编程还是复杂项目开发中,合理运用短路求值都能带来诸多好处。同时,我们也需要注意避免因短路求值可能导致的一些意外情况和错误,确保代码的正确性和稳定性。