JavaScript 中逻辑与和逻辑或的短路求值与实战应用

JavaScript逻辑运算符基础

在jQuery框架或其他JavaScript插件中，经常能看到“&&”和“||”操作符的身影。了解它们的底层含义及使用场景，对于深入理解JS逻辑至关重要。

一、底层原理

“&&”操作符遵循短路逻辑：只要表达式中有一个值为false，结果即为false；若全为true，则返回最后一个表达式的值；若全为false，则返回第一个表达式的值。

“||”操作符同样遵循短路逻辑：只要表达式中有一个值为true，结果即为true；若全为true，则返回第一个表达式的值；若全为false，则返回最后一个表达式的值。

在JavaScript逻辑运算中，0、空字符串“”、null、false、undefined和NaN这五类数据会被判定为false。基于上述原理及这些假值特性，我们可以进行更灵活的条件判断与处理，具体示例如下。

二、常规实现示例

首先明确需求：

假设需要根据学生成绩判定等级：90分及以上为A，80-89分为B，60-79分为C，其余为D。

传统的实现方式如下：

使用if-else语句：

var score = 90;
var grade = '';
if(score === 90){
 grade = "A";
}else if(score === 80){
 grade = "B";
}else if(score === 60){
 grade = "C";
}else{
 grade = "D";
}
console.log("当前学生等级为：" + grade); // 当前学生等级为：A

或者使用switch-case语句：

var score = 90;
var grade = '';
switch(score){
 case 90:
 grade = "A";
 break;
 case 80:
 grade = "B";
 break;
 case 60:
 grade = "C";
 break;
 default:
 grade = "D";
 break;
};
console.log("当前学生等级为：" + grade); // 当前学生等级为：A

三、基于逻辑运算符的优化方案

利用“&&”和“||”的短路特性，可以大幅简化上述代码结构。

var score = 90;
var grade = (score===90 && 'A') || (score===80 && 'B') || (score===60 && 'C') || 'D';
console.log("当前学生等级为：" + grade); // 当前学生等级为：A

代码逻辑解析如下：

当score等于90时，score===90为true，执行后续'A'的赋值；由于“||”运算符在前半部分已为true，后续表达式将被忽略。

若 score 不等于 90，则 score===90 为 false。依据“&&”特性，(score===90 && 'A') 不执行 'A' 赋值，整体为 false。依“||”特性，表达式继续向后执行。

依此类推，若所有前置条件均不满足（全为false），根据“||”特性（全false取最后值），最终grade将被赋值为“D”。

此外，还可以利用对象属性访问的方式简化逻辑：

var score = 90;
var grade = {90:"A", 80:"B", 60:"C"}[score] || 'D';
console.log("当前学生等级为：" + grade); // 当前学生等级为：A

此处利用了JSON对象的属性读取机制。当“对象.属性”存在（即score匹配90、80或60）时，返回对应的key值（A、B或C）。若score在对象中无对应属性，则执行“||”后的默认值'D'。

然而，上述示例中的数值比较存在局限性。例如，当成绩为85分时，按原逻辑会被判定为“D”，这显然不符合实际等级划分标准。

因此，需将原有的“相等比较”优化为“范围区间比较”，以覆盖更合理的分数段。

var score = 85;
var grade = (score>=90 && 'A') || (score>=80 && 'B') || (score>=60 && 'C') || 'D';
console.log("当前学生等级为：" + grade); // 当前学生等级为：B

以上即为本文的全部内容，希望这些技巧能对您的JavaScript学习或工作有所帮助，欢迎继续支持本站。