分享几个JavaScript 条件语句的小技巧？

1条回答我要回复

咚巴拉1273天前

在使用 Javascript 时，我们常常要写不少的条件语句。如何将我们的代码写的更加简洁和优雅，是我们需要一直思考的问题。
1. 使用 Array.includes 来处理多重条件
举个栗子：// 条件语句
function test(fruit) {
if (fruit == 'apple' || fruit == 'cherry') {
console.log('red');
}
}
乍一看，这么写似乎没什么大问题。但是如果我们要想匹配更多的红色水果呢，比如在加个西红柿，就往后面在加一个|| tomato吗？还有更多呢。。

我在做业务的时候写过这样的代码:// 通过次数判断停留的位置
function _stopSize() {
let max = this.block.length - 2;
if (this.playTime === 9 || this.playTime === 8 || this.playTime === 6 || this.playTime === 0) {
this.num = this.randomNum(0, max);
return this.num;
} else {
this.num = this.block.length - 1;
}
}
一开始当时运营说在第一次和和第二次必定中奖，后面又加了最后一次也必须中奖，中间还得中一次，我就是向上面的写法一样写，写的时候觉得很爽，写完后看就感觉很不好看。所以就对这个条件判断语句做了优化。// 通过次数判断停留的位置
function _stopSize() {
let max = this.block.length - 2;
let timeArr = [1, 2, 4, 10];// 把条件提取到数组中
let time = 10 - this.playTime; // 总共有10次玩的机会
if (timeArr.includes(time)) {
this.num = this.randomNum(0, max);
return this.num;
} else {
this.num = this.block.length - 1;
}
}
 
2. 少写嵌套，尽早返回
在我们的日常的活动中经常做一些判断，这个活动是否还在进行，这个活动次数是否已经为0function doStart() {
if(playtime > 0) {
if(isRun) {
//do someing
function start() {
console.log('do someing');
}
}
} else {
console.log('no playtime');
}
}

如果在我们start() 里面还有很多条件判断的时候，那么嵌套就很多层，看的人眼花缭乱的； 就我个人而言，我遵循的一个总的规则是当发现无效条件时尽早返回。
function doStart() {
if(!playtime) reture console.log('no playtime');
if(!isRun) reture false
//do someing
function start() {
console.log('do someing');
}
}


Javascript中falsy值的例子 (通过 if 代码段将falsy值转换为false):if (false)
if (null)
if (undefined)
if (0)
if (NaN)
if ('')
if ("")
if (document.all)
3.look-up表代替if-else
比如大家可能会遇到类似下面的需求：比如某平台的信用分数评级，超过700-950，就是Lv5，650-700为Lv4，600-650为Lv3，550-600为Lv2，350-550为Lv1。

实现很简单：function showGrace(grace) {
let _level='Lv0';
if(grace>=700){
_level='Lv5'
}
else if(grace>=650){
_level='Lv4'
}
else if(grace>=600){
_level='Lv3'
}
else if(grace>=550){
_level='Lv2'
}
else{
_level='Lv1'
}
return _level;
}
运行也没问题，但是问题也是有
万一以后需求，改了比如650-750是L4，750-950是L5。这样就整个方法要改。 方法存在各种神仙数字：700，650，600，550。日后的维护可能存在问题(这些数字，运营想改就改)。 if-else太多，看着有点不舒服
所以下面用look-up表，把配数据置和业务逻辑分离的方式实现下：function showGrace(grace) {
let graceForLevel=[700,650,600,550,400];
let levelText=['Lv5','Lv4','Lv3','Lv2','Lv1'];
let _level = 'Lv1'
graceForLevel.some((item,index)=> {
if(grace >= item){
_level = levelText[index];
return _level;
}
})
return _level;
}
4. 相较于 switch，Object 也许是更好的选择
让我们看下面的例子，我们想要根据地区打印出各种属性function test(area) {
// 使用 switch case 来找到对应地区的属性
switch (area) {
case 'zhejiang':
consloe.log('hangzhou');
consloe.log('1');
break
case 'guangdong':
consloe.log('guangzhou');
consloe.log('2');
break
case 'beijing':
consloe.log('beijing');
consloe.log('3');
break
default:
return false;
}
}
上面的代码看上去并没有错，但是就我个人而言，它看上去很冗长。同样的结果可以通过对象字面量来实现，语法也更加简洁：let areaTest = {
'zhejiang': {plu:1,city:hangzhou},
'guangdong': {plu:2,city:guangzhou},
'beijing': {plu:3,city:beijing}
}
function test(area) {
consloe.log(areaTest[area].city);
consloe.log(areaTest[area].plu);
return;
}
又或者：let areaTest = [
{province:zhejiang,plu:1,city:hangzhou},
{province:guangdong,plu:2,city:guangzhou},
{province:beijing,plu:3,city:beijing}
]
function test(area) {
let result = areaTest.filter(f => f.province === area);
consloe.log(result.city);
consloe.log(result.plu);
return;
}
总结
使用这种方式写的好处有：
编写业务逻辑可能更灵活； 配置和业务逻辑分离，可以需要修改的快速定位到需要修改的代码； 代码风格较为清晰，便于理解；

在写代码中还有很多有趣的小技巧，可以使函数写的更加整洁，思路更加清晰，后期更好维护。我所了解的还很少，希望这篇文章能给你们带来一些帮助。