几个JavaScript 条件语句的小技巧

在使用 JavaScript 时，我们常常要写不少的条件语句。如何将我们的代码写的更加简洁和优雅，是我们需要一直思考的问题。

1. 使用 Array.includes 来处理多重条件

举个栗子 :chestnut:：

// 条件语句
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. 少写嵌套，尽早返回

在我们的日常的活动中经常做一些判断，这个活动是否还在进行，这个活动次数是否已经为0

function 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;
}
复制代码

总结

使用这种方式写的好处有：

1. 编写业务逻辑可能更灵活；
2. 配置和业务逻辑分离，可以需要修改的快速定位到需要修改的代码；
3. 代码风格较为清晰，便于理解；

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