if/else優雅寫法

簡單的邏輯判斷經常使用的優化方法

||

var a = 1;
if(a){
    a = 1;
}else{
    a = 0;
};
//可寫成
a = a || 0;

三元表達式

var a = 1;
var b = 2;
var c = 3;
var d = 4;
if(a == b){
    a = c;
}else{
    a = d;
}
//可寫成
a = (a == b) ? c : d;

提早返回

複雜的邏輯判斷經常使用的優化方法

平常開發常常會遇到複雜的條件判斷, 通常作法就是用if/else, 如何使用更優雅的方式來實現呢?

if(status === 1) {
    sendLog('processing')
    jumpTo('IndexPage')
  } else if(status === 2) {
    sendLog('fail')
    jumpTo('FailPage')
  } else if(status === 3) {
    sendLog('fail')
    jumpTo('FailPage')
  } else {
    sendLog('other')
    jumpTo('Index')
  }

switch

switch (status) {
    case 1:
      sendLog('processing')
      jumpTo('IndexPage')
      break
    case 2:
    case 3:
      sendLog('fail')
      jumpTo('FailPage')
      break
    default:
      sendLog('other')
      jumpTo('Index')
  }

對象映射

const actions = {
  '1': ['processing', 'IndexPage'],
  '2': ['fail', 'FailPage'],
  '3': ['fail', 'FailPage'],
  'default': ['other', 'Index']
}
const clickHandler = (status) => {
  let action = actions[status] || actions['default'], 
    LogName = action[0],
    pageName = action[1]
  sendLog(LogName)
  jumpTo(pageName)
}

map

const actions = new Map([
  ['1', ['processing', 'IndexPage']],
  ['2', ['fail', 'FailPage']],
  ['3', ['fail', 'FailPage']],
  ['default', ['other', 'Index']]
])

const clickHandler = (status) => {
  let action = actions.get(status) || actions.get('default')
  sendLog(action[0])
  jumpTo(action[1])
}

新需求

原先只是判斷status的狀態, 若如今還需同時判斷用戶：

if(identity == 'guest') {
    if(status === 1) {
      // to do something
    } else if (status === 2) {
      // to do something
    } else if (status === 3) {
      // to do something
    } else {
      // to do something
    }
  } else if(identity == 'master') {
    if(status === 1) {
      // to do something
    } else if (status === 2) {
      // to do something
    } else {
      // to do something
    }
  }
}

map

const actions = {new Map([
  ['guest_1', () => {/* to do something */}],
  ['guest_2', () => {/* to do something */}],
  ['guest_3', () => {/* to do something */}],
  ['master_1', () => {/* to do something */}],
  ['master_2', () => {/* to do something */}],
  ['master_3', () => {/* to do something */}],
  ['default', () => {/* to do something */}],
])}

上述代碼的邏輯是:

• 把兩個條件拼接成字符串
• 以拼接的條件字符串做爲key, 以處理函數做爲值的Map對象進行查找並執行

固然, 也能夠用Object對象來實現

const actions = {
  'guest_1': () => {/* to do something */},
  'guest_2': () => {/* to do something */},
  'guest_3': () => {/* to do something */},
  'master_1': () => {/* to do something */},
  'master_2': () => {/* to do something */},
  'master_3': () => {/* to do something */},
  'default': () => {/* to do something */}
}

map（以Object爲Key）

const actions = new Map([
  [{identity: 'guest', status: 1}, () => {/* to do something */}],
  [{identity: 'guest', status: 2}, () => {/* to do something */}]
  [{identity: 'guest', status: 3}, () => {/* to do something */}]
])

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

新需求

假如在guest狀況下, status 1~4 的處理邏輯是同樣的:

const actions = 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 clickHandler = (identity, status) {
  let action = [...actions].filter((key, value) => {key.identity === identity && key.status === status})
  action.forEach(([key, value]) => {value.call(this)})
}

這樣寫, 基本也知足需求了, 但重複的寫4次functionA, 但若是identity的狀態有3種,status的狀態有30種呢?
若是是此種狀況, 也能夠考慮用正則表達式, 如:

const actions = new Map([
  [/^guest_[1-4]$/, functionA],
  [/^guest_5$/, functionA],
])

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

假如需求變成, 凡是guest的狀況, 都要發送一個日誌埋碼, 不一樣的status的狀況, 也要單獨作處理. 那麼咱們能夠考慮這樣寫:

const actions = new Map([
  [/^guest_[1-4]$/, functionA],
  [/^guest_5$/, functionA],
  [/^guest_.$/, functionC],
])

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