如何優化JavaScript中的復雜判斷？

2024-10-07 12:23:03

將兩個條件拼接成一個字符串，以拼接后的條件字符串為鍵，以處理函數為值，通過 Map 對象進行查找并執行。這種方式在多條件判斷的時候特別有用。

我們在寫 JavaScript 代碼的時候，經常會遇到邏輯判斷比較復雜的情況，通常我們可以使用 if/else 或 switch 來實現多個條件判斷。

但是這樣就存在一個問題，隨著邏輯復雜度的增加，代碼中的 if/else/switch 會越來越臃腫，越來越難理解。那么如何才能把判斷邏輯寫得更優雅呢？

今天咱們就來看看這個問題！

一元條件判斷

const onButtonClick = (status)=>{
  if(status == 1){
    jumpTo('進入索引頁')
  }else if(status == 2){
    jumpTo('進入失敗頁')
  }else if(status == 3){
    jumpTo('進入失敗頁')
  }else if(status == 4){
    jumpTo('進入成功頁')
  }else if(status == 5){
    jumpTo('進入取消頁')
  }else {
    jumpTo('其他操作')
  }
}

從代碼中我們可以看到這個按鈕的點擊邏輯：根據不同的活動狀態，進入不同的頁面。

當然，以上代碼也可以通過 switch 進行重寫：

const onButtonClick = (status)=>{
  switch (status){
    case 1:
      console.log('進入索引頁')
      break
    case 2:
    case 3:
      jumpTo('進入失敗頁')
      break  
    case 4:
      jumpTo('進入成功頁')
      break
    case 5:
      jumpTo('進入取消頁')
      break
    default:
      jumpTo('其他操作')
      break
  }
}

這樣看起來比用 if/else 要清晰多了。同時：當 case 2 和 case 3 的邏輯相同時，可以省略執行語句和 break，這樣 case 2 就會自動執行 case 3 的邏輯。

但是，以上的代碼還不夠“完美”，我可以對它進行持續優化：

const actions = {
  '1': ['進入索引頁'],
  '2': ['進入失敗頁'],
  '3': ['進入失敗頁'],
  '4': ['進入成功頁'],
  '5': ['進入取消頁'],
  'default': ['其他操作'],
}
const onButtonClick = (status)=>{
  let action = actions[status] || actions['default'],
  jumpTo(action[0])
}

這樣優化之后代碼就會清晰很多，這個方法的巧妙之處在于：把判定條件作為對象的屬性名，把處理邏輯作為對象的屬性值，點擊按鈕時通過查找對象屬性進行邏輯判斷，這種寫法特別適合一元條件判斷。

多元條件判斷

但是，如果判斷條件變得更加復雜時，以上的操作就不適用了，例如：

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

那么一旦遇到這種復雜的情況，最初的代碼就不適用了。所以，我們需要對最初的邏輯進行優化可以這么做：

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

上述代碼的核心邏輯是：將兩個條件拼接成一個字符串，以拼接后的條件字符串為鍵，以處理函數為值，通過 Map 對象進行查找并執行。這種方式在多條件判斷的時候特別有用。

責任編輯：武曉燕來源：程序員Sunday