if-else优化问题

在项目开发中，我们总是不可避免做大量的判断，很多时候，我们的第一反应就是使用if-else进行判断。但是，过多的if-else会导致代码不美观、且复杂的if-else让人难以理解，因此在代码的写法上做一些优化可以大大提高代码的质量。这里，通过我的学习和了解，总结了一些优化if-else的方法：

• 对于简单的if-else判断
  1. 使用三元表达式替换

    type === 'detail' ? 'SEE' : 'EDIT',
  

  2. 使用=== !== || && 等运算符替换

    // 这里列举一个例子
    this.setState({
      disabledCooper: this.detailDS.current.data.operationDepartment !== 'MERCHANTS',
    });
  
    this.setState({
      disabledCooper: this.detailDS.current.data.operationDepartment !== 'MERCHANTS' && this.state.isShow,
    });
  

• 复杂的逻辑判断
  1. 优化if判断：把最可能出现的条件放在前面，把最不可能出现的条件放在后面，这样程序执行时总会按照写的逻辑的先后顺序逐一检测所有的条件，知道发现匹配的条件才会停止继续检测。
  2. 使用switch case：switch和if else在性能上是没有什么区别的，主要还是根据需求进行分析和选择。条件较小的话选用if else比较合适。条件数量较大的话，就建议选用switch。在大多数的情况下switch比if else运行的更加快。

    data.map(item => {
      if (item) {
        switch (item.fieldCode) {
          case 'CATEGORY_GOOD':
            return <Lov name="productCategoryCodeObject" />;
          case 'SETTLEMENT_METHOD':
            return <Select name="settleMethodCode" onChange={this.onChange} />;
          case 'PAYMENT':
            return <Lov name="paymentMethodObject" />;
          case 'SALES_FROM':
            return <NumberField name="salesAmountFrom" />;
          case 'SALES_TO':
            return <NumberField name="salesAmountTo" />;
          case 'DEDUCATION_RATE':
            return <TextField name="deductRate" addonAfter="%" />;
          case 'GUARANTEED':
            return <TextField name="guaranteeSaleAmt" />;
          case 'ADJUST_CYCLE_UNIT':
            return <Select name="adjustPeriodUomCode" />;
          case 'ADJUST_CYCLE_VALUE':
            return <TextField name="adjustPeriodValueCode" />;
          // case 'S_DEDUCATION_RATE':
          //   return <CheckBox name="specialDeductionFlag" />;
          case 'NO_CONSUMPTION_TAX':
            return <CheckBox name="taxFreeDeductFlag" />;
          case 'NO_VAT':
            return <CheckBox name="vatFreeDeductFlag" />;
          case 'ENABLE':
            return <CheckBox name="enabledFlag" />;
          default:
            return null;
        }
      }
      return null;
    })
  

  3. 使用数组映射的方式：在数据查找速度方面，如果能够直接映射到的查找方式绝对比if else判断包括switch的性能好的太多。

    const statusMap = [{status: 'error', message: '生成成功'}, {status:'success', message: '生成失败'}, {status: 'default', message: '生成中'}];
  
    /**
    * 返回 是/否 多语言 并加上对应的状态
    * @param {1|any} v 值
    * @return 1 -> yes(多语言), other -> no(多语言)
    */
    yesOrNoRender(v) {
      return <Badge status={statusMap[v].status} text={intl.get('dd').d(`statusMap[v].message`)} />;
    }
  

  4. 使用JSON优化：

    const actions = {
      'error':()=>{return '生成成功'},
      'success':()=>{return '生成失败'},
      'default':()=>{return '生成中'},
    }
  
    /**
    * 返回 是/否 多语言 并加上对应的状态
    * @param {1|any} v 值
    * @return 1 -> yes(多语言), other -> no(多语言)
    */
    yesOrNoRender(v) {
      return <Badge status={v} text={intl.get('dd').d(`actions[v]`)} />;
    }