看到if else很多就很烦

多个 if else分支优化

请看下面代码

js 复制代码

if (row.tianrunStatus == true) {
  if (row.tianrunSyncStatus == 'APPLYING') {
    return '启用(申请中)'
  } else if (row.tianrunSyncStatus == 'APPLY_FAILURE') {
    return '启用(申请失败)'
  } else if (row.tianrunSyncStatus == 'APPLY_SUCCESS') {
    return '启用(申请成功)'
  } else if (row.tianrunSyncStatus == 'SYNCHRONIZING') {
    return '启用(同步中)'
  } else if (row.tianrunSyncStatus == 'SYNC_SUCCEEDED') {
    return '启用(同步成功)'
  } else if (row.tianrunSyncStatus == 'SYNC_FAILED') {
    return '启用(同步失败)'
  } else {
    return '启用'
  }
} else if (row.tianrunStatus == false) {
  if (row.tianrunSyncStatus == 'SYNCHRONIZING') {
    return '禁用(同步中)'
  } else if (row.tianrunSyncStatus == 'SYNC_SUCCEEDED') {
    return '禁用(同步成功)'
  } else if (row.tianrunSyncStatus == 'SYNC_FAILED') {
    return '禁用(同步失败)'
  } else {
    return '禁用'
  }
} else {
  return '--'
}

这让我看着都头大，连吐三口老血啊，并且这段类似代码在同一个文件内用了三次！

js 复制代码

const enableStateTypeMap = {
  'APPLYING': '启用(申请中)',
  'APPLY_FAILURE': '启用(申请失败)',
  'APPLY_SUCCESS': '启用(申请成功)',
  'SYNCHRONIZING': '启用(同步中)',
  'SYNC_SUCCEEDED': '启用(同步成功)',
  'SYNC_FAILED': '启用(同步失败)',
}

const disabledStateTypeMap = {
  'SYNCHRONIZING': '禁用(同步中)',
  'SYNC_SUCCEEDED': '禁用(同步成功)',
  'SYNC_FAILED': '禁用(同步失败)',
}
/** 状态code判断返回中文描述 */
export const statusJudgmentFun = (status, syncStatus) => {
  if (status == true) {
    const syncStatusText = enableStateTypeMap[syncStatus]
    return syncStatusText ? syncStatusText : '启用'
  } else if (status == false) {
    const syncStatusText = disabledStateTypeMap[syncStatus]
    return syncStatusText ? syncStatusText : '禁用'
  } else {
    return '--'
  }
}
/** 使用 */
statusJudgmentFun(row.tianrunStatus,row.tianrunSyncStatus)

多个if判断请求接口

直接上代码

js 复制代码

const onOk = (val, editType) => {
  const { selectedRowKeys, tianrunEditVisible, ronglianEditVisible,duyanEditVisible, selectedRows,editRow, freeswitchEditVisible } = this.state;
  const tianrunStatus = val.tianrunStatus || false;
  const ronglianStatus = val.ronglianStatus || false;
  const freeswitchStatus = val.freeswitchStatus || false;
  const duyanStatus = vel.duyanStatus || false;
  const fn =() =>{
      this.modalVisible('editVisible', false);
      this.handleSearch({...this.state.filter});
  }
  if (tianrunEditVisible) {
      if (editType == 'batchEdit') {
          this.doBatchChange(selectedRows, tianrunStatus,'CTI_SOFT_PHONE').then(fn);
      } else {
          this.doBatchChange([editRow],tianrunStatus,'CTI_SOFT_PHONE').then(fn);
      }
  }
  if (ronglianEditVisible) {
      if (editType == 'batchEdit') {
          this.doBatchChange(selectedRows, ronglianStatus,'RONGLIAN').then(fn);
      } else {
          this.doBatchChange([editRow], ronglianStatus,'RONGLIAN').then(fn);
      }
  }
  if (freeswitchEditVisible) {
      if (editType == 'batchEdit') {
          this.doBatchChange(selectedRows, freeswitchStatus,'FREESWITCH').then(fn);
      } else {
          this.doBatchChange([editRow],freeswitchStatus,'FREESWITCH').then(fn);
      }
  }
  if (duyanEditVisible) {
      if (editType == 'batchEdit') {
          this.doBatchChange(selectedRows, duyanStatus,'DUYAN').then(fn);
      } else {
          this.doBatchChange([editRow],duyanStatus,'DUYAN').then(fn);
      }
  }
}

先把所有相同的代码提取出来，放在一个新的方法里面；
将这些重复的逻辑抽象成一个公共的方法，使其能够适用于多种场景；
使用条件判断语句来调用不同的方法，这样可以提高代码的可读性和可维护性。

js 复制代码

  const onOk = (params, editType) => {
      const { filter } = this.state;
      const list = getParamsList(this.state,params,editType)
      Promise.allSettled(list.map(item => this.props.batchChangeSeatStatus(item))).then(res=>{
        if(res.some(item=> item.status == 'fulfilled')){
             this.modalVisible('editVisible', false);
             this.handleSearch({...filter});
        }
      })
    }

export const getParamsList= (state={},params={},editType)=>{
  const { selectedRows,editRow,tianrunEditVisible, ronglianEditVisible,duyanEditVisible, freeswitchEditVisible } = state;
  const { tianrunStatus,ronglianStatus,freeswitchStatus,duyanStatus } = params
  const seatInfos = editType == 'batchEdit' ? selectedRows : [editRow]
  const TIANRUN = {
    visible:tianrunEditVisible,
    status: !!tianrunStatus,
    platform:'CTI_SOFT_PHONE',
    seatInfos
  }
  const RONGLIAN = {
    visible:ronglianEditVisible,
    status:!!ronglianStatus,
    platform:'RONGLIAN',
    seatInfos
  }
  const FREESWITCH = {
    visible:freeswitchEditVisible,
    status: !!freeswitchStatus,
    platform:'FREESWITCH',
    seatInfos
  }
  const DUYAN = {
    visible: duyanEditVisible,
    status: !!duyanStatus,
    platform:'DUYAN',
    seatInfos
  }
    const list = [TIANRUN,RONGLIAN,FREESWITCH,DUYAN].filter(item=> item.visible)
  return list
}