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

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

针对以下场景：根据变量 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 语句来实现，代码如下：

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(add_step==5){
add_level = 1
}