与Map的一次邂逅（使用Map优化无休止的if）

起因：优化一段代码

最终代码：使用Map进行优化后的代码

/**
   * @description 地区(省市区)，学校，终端编号，三种只能凭一种去搜索
   *  - aloneSearch.provinceValUndefined  清空城市和县区的选项和值
   *  - aloneSearch.province              清空学校和终端编号的值
   *  - aloneSearch.cityValUndefined      清空县区的选项和值
   *  - aloneSearch.schoolId              清空省份的值，清空城市和县区的选项和值，清空终端编号的值
   *  - aloneSearch.terminalNum           清空省份的值，清空城市和县区的选项和值，清空学校的值
   */
  const searchConditionMap = new Map();
  searchConditionMap.set(aloneSearch.provinceValUndefined,() => {
    form.setFieldsValue({city: undefined, county: undefined});
    clearCityAndCounty();
  });
  searchConditionMap.set(aloneSearch.province, () => {
    form.setFieldsValue({schoolId: undefined, terminalNum: undefined});
  });
  searchConditionMap.set(aloneSearch.cityValUndefined, () => {
    form.setFieldsValue({county: undefined})
    dispatch<maintaining.models>({
      type: 'maintaining/updateState',
      payload: {
        countyList: []
      }
    });
  });
  searchConditionMap.set(aloneSearch.schoolId, () => {
    form.setFieldsValue({terminalNum: undefined, province: undefined, city: undefined, county: undefined})
    clearCityAndCounty();
  });
  searchConditionMap.set(aloneSearch.terminalNum, () => {
    form.setFieldsValue({schoolId: undefined, province: undefined, city: undefined, county: undefined});
    clearCityAndCounty();
  });
  
  // 使用
  searchConditionMap.get(aloneSearch.terminalNum)()
复制代码

第一次优化

enum aloneSearch {
  province,
  schoolId,
  terminalNum,
  provinceValUndefined,
  cityValUndefined
}
   /**
    * @function 地区(省市区)，学校，终端编号，三种只能凭一种去搜索
    * @param {number} arg - aloneSearch枚举类型
    * @description 地区(省市区)，学校，终端编号，三种只能凭一种去搜索
    *  - aloneSearch.provinceValUndefined  清空城市和县区的选项和值
    *  - aloneSearch.province              清空学校和终端编号的值
    *  - aloneSearch.cityValUndefined      清空县区的选项和值
    *  - aloneSearch.schoolId              清空省份的值，清空城市和县区的选项和值，清空终端编号的值
    *  - aloneSearch.terminalNum           清空省份的值，清空城市和县区的选项和值，清空学校的值
    */
  const clearMistySearchCondition = (arg: number) => {
    switch (arg) {
      case aloneSearch.provinceValUndefined:
        form.setFieldsValue({city: undefined, county: undefined});
        clearCityAndCounty();
        break;
      case aloneSearch.province:
        form.setFieldsValue({schoolId: undefined, terminalNum: undefined});
        break;
      case aloneSearch.cityValUndefined:
        form.setFieldsValue({county: undefined})
        dispatch<maintaining.models>({
          type: 'maintaining/updateState',
          payload: {
            countyList: []
          }
        });
        break;
      case aloneSearch.schoolId:
        form.setFieldsValue({terminalNum: undefined, province: undefined, city: undefined, county: undefined})
        clearCityAndCounty();
        break;
      case aloneSearch.terminalNum:
        form.setFieldsValue({schoolId: undefined, province: undefined, city: undefined, county: undefined});
        clearCityAndCounty();
        break;
      default:
        break;
    }
  };

// 使用
    clearMistySearchCondition(aloneSearch.province);
复制代码

• 嗯，看起来好多了

最原始的代码：

  /**
   * @function 地区(省市区)，学校，终端编号，三种只能凭一种去搜索
   * @param {boolean} province - 是否清除省份的值，不清除选项
   * @param {boolean} city - 是否清除城市的值，清除选项
   * @param {boolean} county - 是否清除县区的值，清除选项
   * @param {boolean} schoolId - 是否清除学校的值，不清除选项
   * @param {boolean} terminalNum - 是否清除终端编号的值，不清除选项
   */
  const clearMistySearchCondition = (province: boolean, city: boolean, county: boolean, schoolId: boolean, terminalNum: boolean) => {
    if (schoolId) form.setFieldsValue({schoolId: undefined});
    if (province) form.setFieldsValue({province: undefined});
    if (terminalNum) form.setFieldsValue({terminalNum: undefined});
    if (city) {
      form.setFieldsValue({city: undefined});
      dispatch({
        type: 'Maintaining/updateCityList',
        data: []
      });
    };
    if (county) {
      form.setFieldsValue({county: undefined})
      dispatch({
        type: 'Maintaining/updateCountyList',
        data: []
      });
    };
  }
  
  // 使用
  clearMistySearchCondition(false, true, true, false, false);

复制代码

• 这使用方式，5个boolean值，谁知道是干嘛的！！