关于JavaScript复杂判断(if else / switch)的更优雅写法，优化冗余

一、通常写法

/**
 * if () else {}
 * 按钮点击事件
 * @param {number} status 活动状态：1 xx, 2 xx, 3 xx, 4 xx, 5 xx
 */

const onButtonClick = (status)=>{
  if (status == 1) {
    sendLog('processing')
    jumpTo('IndexPage')
  } else if (status == 2){
    sendLog('fail')
    jumpTo('FailPage')
  } else if (status == 3){
    sendLog('fail')
    jumpTo('FailPage')
  } else if (status == 4){
    sendLog('success')
    jumpTo('SuccessPage')
  }
  
  ....
  ....
}


/**
 * switch () case {}
 * 按钮点击事件
 * @param {number} status 活动状态：1 xx, 2 xx, 3 xx, 4 xx, 5 xx
 */
const onButtonClick = (status)=>{
  switch (status){
    case 1:
      sendLog('processing')
      jumpTo('IndexPage')
      break
    case 2:
    case 3:
      sendLog('fail')
      jumpTo('FailPage')
      break  
    case 4:
      sendLog('success')
      jumpTo('SuccessPage')
      break
    ....
    ....
  }
}

二、利用对象键值对

/**
 * key, value
 * 按钮点击事件
 * @param {number} status 活动状态：1 xx, 2 xx, 3 xx, 4 xx, 5 xx
 */
const actions = {
  '1': ['processing','IndexPage'],
  '2': ['fail','FailPage'],
  '3': ['fail','FailPage'],
  '4': ['success','SuccessPage'],
  '5': ['cancel','CancelPage'],
  'default': ['other','Index'],
}

const onButtonClick = (status)=>{
  const action = actions[status] || actions['default']
  const logName = action[0]
  const pageName = action[1]

  sendLog(logName)
  jumpTo(pageName)
}

三、利用Es6，new Map([ ])

/**
 * key, value
 * 按钮点击事件
 * @param {number} status 活动状态：1 xx, 2 xx, 3 xx, 4 xx, 5 xx
 */

const actions = new Map([
  [1, ['processing','IndexPage']],
  [2, ['fail','FailPage']],
  [3, ['fail','FailPage']],
  [4, ['success','SuccessPage']],
  [5, ['cancel','CancelPage']],
  ['default', ['other','Index']]
])

const onButtonClick = (status)=>{
  let action = actions.get(status) || actions.get('default')

  sendLog(action[0])
  jumpTo(action[1])
}

四、优化new Map([ ])

/**
 * key, value
 * 按钮点击事件
 * @param {number} status 活动状态：1 xx, 2 xx, 3 xx, 4 xx, 5 xx
 */

// ** 写法一：
const actions = {
  'guest_1':()=>{/*do sth*/},
  'guest_2':()=>{/*do sth*/},
  //....
}

const onButtonClick = (identity,status)=>{
  let action = actions[`${identity}_${status}`] || actions['default']
  action.call(this)
}



// ** 写法二：
const actions = new Map([
  [{identity:'guest',status:1},()=>{/*do sth*/}],
  [{identity:'guest',status:2},()=>{/*do sth*/}],
  //...
])

const onButtonClick = (identity,status)=>{
  let action = [...actions].filter(([key,value]) => {
    return (key.identity == identity && key.status == status)
  }
  action.forEach(([key,value])=>value.call(this))
}


// ** 写法三（利用func缓存）：
const actions = ()=>{
  const functionA = ()=>{/*do sth*/}
  const functionB = ()=>{/*do sth*/}
  return new Map([
    [{identity:'guest',status:1},functionA],
    [{identity:'guest',status:2},functionA],
    [{identity:'guest',status:3},functionA],
    [{identity:'guest',status:4},functionA],
    [{identity:'guest',status:5},functionB],
    //...
  ])
}

const onButtonClick = (identity,status)=>{
  let action = [...actions].filter(([key,value]) => {
    return (key.identity == identity && key.status == status)
  }
  action.forEach(([key,value])=>value.call(this))
}


// ** 写法四（利用正则替换写法三 A重复引用）：
const actions = ()=>{
  const functionA = ()=>{/*do sth*/}
  const functionB = ()=>{/*do sth*/}
  return new Map([
    [/^guest_[1-4]$/,functionA],
    [/^guest_5$/,functionB],
    //...
  ])
}

const onButtonClick = (identity,status)=>{
  let action = [...actions()].filter(([key,value])=>(key.test(`${identity}_${status}`)))
  action.forEach(([key,value])=>value.call(this))
}