if…else…的簡寫

1. 範例:

let orderStatus = ''
let a = '1'
if (a == '1') {
    orderStatus = '閒置'
} else if (a == '2') {
    orderStatus == '待確認'
} else if (a == '3') {
    orderStatus == '已確認'
} else if (a == '4') {
    orderStatus == '執行中'
} else if （a == '5'）{
    orderStatus == '已完成'
}

簡化後:

let a='1'
let orderStatus
let map = { '1': '閒置', '2': '待確認', '3': '已確認', '4': '執行中','5':'已完成'}
orderStatus = map[a]

2. 範例

let str
if(5>0){
       str = "開始進入敵方"
       if(6>0){
         str = "成功刺入敵方"
       }
     }else{
       str = "再接再厲"
     }

簡化後:

str = (5>0) ? ( 6>0? str='成功刺入敵方' : str='開始進入敵方' ): str = "再接再厲"

3. 範例:

if (a) {
     b = 1;
     c = 1;
 }else{
     b = 2;
     c = 2;
 }

簡化後:

a ? ( (b = 1), (c = 1) ) : ( (b = 2), (c = 2) ) );

4. 範例:

if(a){
 // do something
};

if(!b){
 // do something
};

簡化後:

a && (//do something);

b || (//do something);

5. 範例

const onButtonClick1 = (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')
 }else if(status == 5){
  sendLog('cancel')
  jumpTo('CancelPage')
 }else {
  sendLog('other')
  jumpTo('Index')
 }
}

簡化後:

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])
}

7. 範例:

const onButtonClick = (status,identity)=>{
 if(identity == 'guest'){
  if(status == 1){
   //do sth
  }else if(status == 2){
   //do sth
  }else if(status == 3){
   //do sth
  }else if(status == 4){
   //do sth
  }else if(status == 5){
   //do sth
  }else {
   //do sth
  }
 }else if(identity == 'master') {
  if(status == 1){
   //do sth
  }else if(status == 2){
   //do sth
  }else if(status == 3){
   //do sth
  }else if(status == 4){
   //do sth
  }else if(status == 5){
   //do sth
  }else {
   //do sth
  }
 }
}

a. 簡寫後:

const actions = new Map([
 ['guest_1', ()=>{/*do sth*/}],
 ['guest_2', ()=>{/*do sth*/}],
 ['guest_3', ()=>{/*do sth*/}],
 ['guest_4', ()=>{/*do sth*/}],
 ['guest_5', ()=>{/*do sth*/}],
 ['master_1', ()=>{/*do sth*/}],
 ['master_2', ()=>{/*do sth*/}],
 ['master_3', ()=>{/*do sth*/}],
 ['master_4', ()=>{/*do sth*/}],
 ['master_5', ()=>{/*do sth*/}],
 ['default', ()=>{/*do sth*/}],
])
 
const onButtonClick = (identity,status)=>{
 let action = actions.get(`${identity}_${status}`) || actions.get('default')
 action.call(this)
}

b. 上面的代碼利用對象做鍵值簡化：

const actions = new Map([
  [{
    identity: 'guest',
    status: 1
  }, () => { /*do sth*/ }],
  [{
    identity: 'guest',
    status: 2
  }, () => { /*do sth*/ }],
  //...
])
 
const onButtonClick = (identity, status) => {
  //使用數組解構 [key,value] = cuurrentValue
  let action = [...actions].filter(([key, value]) => (key.identity == identity && key.status == status))
  action.forEach(([key, value]) => value.call(this))
}

c. 利用正則

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))
}

常見的優化方式還有使用switch ，但是switch的性能也相對不是最好的，來看個優化switch的例子

不見得每段代碼都要避開if else或是非得要簡化，實際運用還是得看各人不同因為簡化後有時候也會帶來可讀性的問題，這部分就得看自己的取捨了。