JavaScript複雜判斷邏輯寫法技巧

這篇文章帶給大家的內容是關於JavaScript複雜判斷邏輯寫法技巧，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

在某些場景中，我們可能會遇到多個判斷條件的情況，針對這種情況，我們通常 會使使用if/else/switch來進行處理，但是多個判斷下，這樣的寫法會有很多的程式碼，如何解決呢，請繼續往下看

首先我們拿if/esle舉個栗子，switch寫法我就不再這寫了

checkStatus(status) {
 if (status == 1) {
    function1();
  } else if (status == 2) {
    function2();
  } else if (status == 3) {
    function3();
  } else if (status == 4) {
    function4();
  } else if (status == 5) {
    function5();
  }
}

透過判斷不同的status，執行不同的方法，這是很常見的寫法，缺點是程式碼量很多，且不利於可讀性，別人來維護的時候，不能快速的知道這個方法有多少個判斷條件，需要呼叫多少個方法。必須要看完整個方法，才知道這些。以下就介紹些更優化的方法，本文針對vue寫法

const actions = {
  '1': 'function1',
  '2': 'function2',
  '3': 'function3',
  '4': 'function4',
  '5': 'function5'
 }
 function checkStatus(status) {
   let action = actions[status];
  this[action]()
 }

這種寫法將方法名稱和需要判斷的類型值進行綁定，呼叫的時候透過屬性名找到對應的屬性值即可呼叫對應的方法，寫法簡單明了。我們在擴充功能下，假如類型為1的時候，我們不只呼叫一種方法怎麼辦，請看下面：

const actions = {
 '1': ['function1','function2'],
 '2': ['function3','function4'],
 '3': ['function5','function6'],
}

我們可以將類型為1時，需要呼叫的方法，寫在陣列裡面，那麼呼叫的時候就可以這麼拿：

function checkStatus(status) {
  let action = actions[status];
   this[action[0]]()
  this[action[1]]()
 }

以上兩種方法，是針對一元判斷的時候使用的，具體使用看具體的場景。
假如是多元判斷呢？例如，在判斷status為1的時候，我們還需要判斷type值為否為1等。 。 。
條件對應為

if (status == 1 && type == 1) {
    //do someThing
} else if (status == 2 && type == 2) {
   //do someThing
} else if (status == 3 && type == 3) {
   //do someThing
} else if (status == 4 && type == 4) {
   //do someThing
} else if (status == 5 && type == 5) {
   //do someThing
}

這種業務場景下，如果是用傳統的if/else,程式碼量簡直不敢想，接下來，看怎麼優化這種情況

  const actions = new Map([
   [{type:'1',status:1},()=>{/*do sth*/}],
   [{type:'2',status:2},()=>{/*do sth*/}],
   //...
  ])

  function checkStatus(type,status)=>{
   let action = [...actions].filter(([key,value])=>(key.type == type && key.status == status))
   action.forEach(([key,value])=>value.call(this))
  }

這裡需要解釋的一點是，Map可以用任何類型的資料當作key。我們可以直接判斷key是否符合我們的條件，對應的處理方法，可以寫在對應的vulue值裡面。這種寫法基本上能滿足大部分判斷邏輯了。 。 。下面將難度升級下。 。 。
上面我們講到type和status 都是一對一對應的情況下執行對應的方法，加入type為1時，ststus為2和3 都需要執行相同的方法，type為2時，status為1 ，2也需要執行相同的方法呢？以上的方法也可以使用，下面這樣：

const actions = new Map([
  [{type:'1',status:2},()=>{functionA}],
  [{type:'3',status:3},()=>{/functionB}],
  [{type:'2',status:1},()=>{functionC}],
  [{type:'1',status:3},()=>{functionA}],
  //...
 ])

這樣寫已經能滿足日常需求了，但上面重寫了2次status為2的情況還是有點不爽，假如判斷條件變得特別複雜，例如type有3種狀態，status有10種狀態，那你需要定義30條處理邏輯，而往往這些邏輯裡面很多都是相同的，再用上面的寫法似乎很難接受，那麼可以這麼寫：

  const actions = ()=>{
   const functionA = ()=>{/*do sth*/}
   const functionB = ()=>{/*do sth*/}
   const functionC = ()=>{/*send log*/}
   return new Map([
   [/^1_[1-4]$/,functionA],
   [/^2_.*$/,functionC], 
   //...
   ])
  }

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

也就是說利用數組循環的特性，符合正則條件的邏輯都會被執行，那就可以同時執行公共邏輯和單獨邏輯，因為正則的存在，你可以打開想像力解鎖更多的玩法,不懂ES6Map特性，可以去了解下，上面的用法對於大量的判斷邏輯來說，的確是優化了很多了。 。

願以後的日子裡，不只是有if/else/switch。 。 。 。

以上是JavaScript複雜判斷邏輯寫法技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！