JavaScript 中逻辑运算符与三元逻辑的进阶用法

作者:寒星

时间:2026-10-28

浏览:152

本文深入解析JavaScript中逻辑与(&&)和逻辑或(||)运算符的高级应用。通过对比传统的if-else、switch语句,展示如何利用短路求值特性简化条件赋值逻辑,并提供对象映射结合默认值的简洁写法,帮助开发者写出更精简高效的代码。

文章目录

基于条件判断的传统实现方式

针对以下场景:根据变量 add_step 的不同取值,动态计算并赋值给 add_level,我们可以采用多种实现方式。

以下是使用传统条件判断语句的实现代码:

var add_level = 0;
if(add_step == 5){
add_level = 1;
} 
} else if(add_step == 10){
add_level = 2;
} 
} else if(add_step == 12){
add_level = 3;
} 
} else if(add_step == 15){
add_level = 4;
} 
} else {
add_level = 0;
}

上述逻辑功能同样可以使用 switch 语句来实现,代码如下:

以下是 switch 语句的实现代码:

var add_level = 0;
switch(add_step){
case 5 : add_level = 1;
break;
case 10 : add_level = 2;
break;
case 12 : add_level = 3;
break;
case 15 : add_level = 4;
break;
default : add_level = 0;
break;

利用逻辑运算符简化条件赋值

在 JavaScript 中,还可以利用逻辑或(||)和逻辑与(&&)运算符的特性来简化代码,具体实现如下:

以下是利用逻辑运算符实现的代码:

var add_level = (add_step==5 && 1) || (add_step==10 && 2) || (add_step==12 && 3) || (add_step==15 && 4) || 0;

对象映射与默认值的简洁写法

第二种写法还可以进一步简化,利用对象键值对映射的方式,代码如下:

以下是简化后的对象映射写法代码:

var add_level={'5':1,'10':2,'12':3,'15':4}[add_step] || 0;

从第二种写法中可以提炼出一个基本公式:

以下是基本公式的代码展示:

add_step==5 && add_level=1

该表达式等价于


以下是等价的传统 if 语句代码:

if(add_step==5){
add_level = 1
}

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章