JS优化if语句

# JS优化if语句的方式总结

在之前的作业中，为了完成一些功能在函数中使用了大量的if语句，相互嵌套与无脑使用让我忽然明白了“码农”这个词的含义。当解决问题的方式全部使用大量的if语句来解决，不仅使代码变得臃肿，难以维护，而且还让代码与优雅这个词毫无关联。为此我总结了几个JS中常用的可以优化替代if语句的方法

## 1.使用三元运算符
用...?...:....的方式可以有效取代if语句，三元运算符的嵌套也可以代替if...else语句的嵌套，虽然个人觉得三元表达式的嵌套相比于if的嵌套在可读性上并没有太大的提高，只是看起来比较高级。

原函数：

    `     if(arr[index]==differ){
        besign(); 
     }
     else {
        return arr[index];
     }`
优化后：

    `    return arr[index]==differ?besign():arr[index];`

## 2.多条件的if语句可以改用includes方法
js的includes语句表示字符串或数组中是否包含参数（区分大小写），我们可以利用这一点来优化多条件的if语句，避免繁复的'||'叠加使用。

原函数：

    ` if(m==90||m==80){
         return 'A';
     }
     if(m==70||m==60){
         return 'B';
     }`

优化后：

    `  if([90,80].includes(m)){
         return 'A';
     }
     if([70,60].includes(m)){
         return'B`

在面对多个‘||’条件时这种写法的优越性就会体现出来，它更容易检查，也可以用数组的方法（比如解构赋值）进行后期的修改和替换，更加方便。如果我们知道之后可能会修改这个地方，可以改成这样：

    ` let arr=[a,b]=[90,80];
     let arr1=[c,d]=[70,60]
     if([a,b].includes(m)){
         return 'A';
     }
     if([c,d].includes(m)){
         return 'B';
     }`
    ``

这是如果我们要修改值，可以直接通过解构赋值进行修改，如果要合并两个部分，也可以通过扩展运算符来实现

    `   let arr=[a,b]=[90,80];
     let arr1=[c,d]=[70,60]
     if([a,b，...arr1].includes(m)){
         return 'A';
     }

## 3.提前return
在自己的代码里没有类似的地方，直接贴出网上的例子吧，这种方式是条件去翻，先把else干掉，使代码在逻辑上更加清晰。这种方法反映出的思维是在写if语句时，能提前干掉的尽量提前干掉，不要增加函数非必要的复杂程度。

    `if(condition)｛
        //do something
        ｝else{
        return XXX
            }`
可修改为：

       ` if(!condition)｛
        return XXX;
        ｝
        //do something 

## 4.使用数组
这种方法对于类似“根据输入的月份数判断天数”之类的问题有奇效！
原先我们处理这种问题要使用大量的if语句判断每一个月份的天数

        if(month==1) return 31;
         if(month==2) return 29;
         if(month==3) return 31;
         ...`
这种代码看着就烦！

但是当我们使用数组方法时，就简单多了

    `let mouthday=[31,29,31];
    return mouthday(mouth-1);`

这里举例子就不把月份写全了，只要我们得到要输入的月份month再执行这个函数就可以直接输出天数了。

自己代码中的例子（g是函数的参数）：

原函数：

    ` if(g=='A')
    {
        y="太棒了！"
    }
    if(g=='B')
    {
        y="还不错！"
    }
    if(g=='C')
    {
        y="你还需要加强呀！"
    }
    return y`

优化后：

    ` let arr=['A','B','C'];
    let arr1=["太棒了","还不错!","你还需要加强呀！"];
    for(let i in arr ){
        if(arr[i]==g){
            return arr1[i];
        }
    }`
## 5.使用逻辑关系
对于一些简单的判断布尔值的函数，其实我们可以完全不需要使用if语句，直接返回一个能够表示布尔值的表达式就可以了。

原函数：

    `    // if(a==b){
    //     return true;
    // }
    // else{
    //     return false;
    // }`

优化后：

    `return a==b;`
除此之外，我们还可以利用&&可能导致短路的特性通过且运算符来简化函数

原函数：

    `   if(bol==true){
        correct();
    }`
优化后：

    `bol&&correct();`

## 6.函数委托
函数委托实际是上面逻辑关系的使用与三元表达式的结合，通过将大函数拆分成小函数使用三元表达式来取消掉多余的if语句

原函数：

    `          if(keep<3){
            document.getElementById("my_input").focus();
            document.getElementById("my_input").value="";
            document.getElementById("my_input").readOnly=false;
            document.getElementById("my_input").style.color="black";
            keep++;
          if(keep<2)      
            alert("还有机会哦")
        else
            alert("没有机会了")
        }     }`

优化后：

    `function reanswer(){
        do_keep=()=>{
                document.getElementById("my_input").focus();
                document.getElementById("my_input").value="";
                document.getElementById("my_input").readOnly=false;
                document.getElementById("my_input").style.color="black";
                keep++;
                return keep<2;
        }
        keep<3&&do_keep()?alert("还有机会哦"): alert("没有机会了");
    }`
 
## 7.用键值作为映射
对于相对简单的if语句，我们可以通过函数定义一个对象，对传入的值进行匹配，从而达到简化if的效果

原函数：

        ` if(g=='A')
    {
        y="太棒了！"
    }
    if(g=='B')
    {
        y="还不错！"
    }
    if(g=='C')
    {
        y="你还需要加强呀！"
    }
    else
    {y="加油加油！"}
    return y`
优化后：

    `const do_grade=(g)=>({
    'A':"太棒了！",
    'B':"还不错！",
    'C':"你还需要加强啊",
    })[g]||"加油加油！"`

这里解释一下，函数体的花括号外层加圆括号是因为箭头函数输出一个对象时函数体的外层必须加圆括号；后面的[g]表示在函数的对象中对参数g进行正则匹配，最后输出匹配到的值。如果没有则使用‘||’后面的默认值。

## 8.使用函数对象
对于一些通过if来判断不同计算方式的函数，我们可以使用函数对象的形式来改变if的写法

原函数：
    
    calc=(sym,a,b)=>{
    if(sym=="add"){
       return a+b;
    }
    if(sym=="sub"){
      return a-b;
    }
    if(sym=="mult"){
      return a*b;
    }
    if(sym=="div"){
    return a/b;
    }
    }`
优化后：

    `const calc={
      add:function(a,b){
     return a+b;
      },
      sub:function(a,b){
    return a+b;
     },
     mult:function(a,b){
    return a+b;
     },
     div:function(a,b){
    return a+b;
     },
    }
    calc.add(2,3);  //调用方式`