js 中if...else优化/重构

在写一些逻辑的过程中，我们免不了会写一个if...else的逻辑。但是如果过多的if...else就会使代码显的不整洁，不优美。

例如：

贴上源码

batchEdit(val) {
        if (val === 1275) {
          this.batchDelete();
        } else if (val === 1276 || val === 1277) {
          this.batchUpdateState(val)
        } else if (val === 1) {
          // 出价
          this.batchPriceDialogVisible = true;
        } else if (val === 2) {
          this.batchBudgetDialogVisible = true;
        } else if (val === 3) {
          this.batchDateDialogVisible = true;
        } else if (val === 4) {
          this.batchScheduleDialogVisible = true;
        } else if (val === 5) {
          this.batchRegionDialogVisible = true;
        } else if (val === 6) {
          this.batchUpdateChannelPackage()
        } else if (val === 7) {
          this.batchUpdateDirection()
        }
    },

优化的主要思路是用将这些if...else的逻辑转化成数组对象的方式

重构之后的代码

batchEdit(val){
      let info = [
        {value:1275,nextStep:this.batchDelete},
        {value:1276,nextStep:this.batchUpdateState},
        {value:1277,nextStep:this.batchUpdateState},
        {value:1,nextStep:()=>{this.batchPriceDialogVisible = true;}},
        {value:2,nextStep:()=>{this.batchBudgetDialogVisible = true;}},
        {value:3,nextStep:()=>{this.batchDateDialogVisible = true;}},
        {value:4,nextStep:()=>{this.batchScheduleDialogVisible = true;}},
        {value:5,nextStep:()=>{this.batchRegionDialogVisible = true;}},
        {value:6,nextStep:this.batchUpdateChannelPackage},
        {value:7,nextStep:this.batchUpdateDirection},
      ];
      for(let i=0;i<info.length;i++){
        if(val === info[i].value){
          if(val === 1276 || val === 1277){
            info[i].nextStep(val)
          }else {
            info[i].nextStep()
          }

        }
      }
    },

是不是比一堆的if...else看着好很多，代码逻辑也可以以眼看清楚，代码长度也减少很多。