多个if esle的code review——策略模式

代码评审过程中发现以下一段代码：

function color(num) {
    if (num <= 5 && num > 0) {
        return colorLine[0]
    } else if (num > 5 && num <= 20) {
      return colorLine[1]
    } else if (num > 20 && num <= 40) {
      return colorLine[2]
    } else if (num > 40 && num <= 60) {
      return colorLine[3]
    } else if (num > 60 && num <= 80) {
      return colorLine[4]
    } else if (num > 80 && num <= 100) {
      return colorLine[5]
    } else if (num > 100) {
      return colorLine[6]
    }
}

过多的if..else 导致代码看上去比较“丑”。一般优化if...else的方法是通过策略模式，例如：

 let map = {
   xxx: ()=>{}
 }

但这里的if条件是区间判断，就不能直接使用策略模式了。下面重点需要做的是如何将if条件里的区间进行映射，转换成为固定的键值。通过观察可以发现判断条件是有规律的，除了前20，后面的区间相差20，那可以采用除以20,获得的商进行映射，前20和大于100的可以单独特殊处理。

const colorLine= ["(0,5]","(5,20]","(20,40]","(40,60]","(60,80]","(80,100]","(100,..]"]

let map = {
    quotient:(num)=>{
        if(num<=20){
            return num <= 5 ? 0 : 1
        }
        let quot =  Math.ceil(num/20)
        if(quot <=5){
            return quot
        }else{
            return '_'
        }
    },
    0: colorLine[0],
    1: colorLine[1],
    2: colorLine[2],
    3: colorLine[3],
    4: colorLine[4],
    5:colorLine[5],
    _:colorLine[6],
}


let num = map.quotient(22)
console.log('num: ', num);

let ans = map[num]
console.log('ans: ', ans);

通过对map.quotient函数调用实现对区间的转换，最终还是可以使用策略模式。最简单的代码功能是不会出现大的问题，但不够优雅，经过简单处理可以提高代码的可读性和可维护性，何乐而不为呢！