JS 邏輯判斷不要只知道用 if-else 和 switch條件判斷(小技巧)

我們在編寫 JS 代碼時，經常會遇到邏輯判斷複雜的情況。一般情況下，可以用 if/else 或 switch 來實現多個條件判斷，但會出現一個問題：隨著邏輯複雜度的增加，代碼中的 if/else 和 switch 會越來越臃腫。本文將帶你嘗試寫出更優雅的判斷邏輯。

比如說下面這樣一段代碼：

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

你可以在代碼中看到這個按鈕的點擊邏輯。根據活動狀態的不同做兩件事，發送日誌埋點並跳轉到相應的頁面。很容易想到這段代碼可以用 switch 重寫如下：

 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 case 5: sendLog('cancel') jumpTo('CancelPage') break default: sendLog('other') jumpTo('Index') break } }

好吧，看起來比 if/else 層次結構更清晰一些，細心的讀者可能也發現了一個小竅門：case 2 和 case 3 的邏輯一樣時，可以把前面的邏輯處理代碼省略，case 2 會自動執行與 case 3 的邏輯。

不過，還有一個更簡單的寫法：

 const actiOns= { '1': ['processing', 'IndexPage'], '2': ['fail', 'FailPage'], '3': ['fail', 'FailPage'], '4': ['success', 'SuccessPage'], '5': ['cancel', 'CancelPage'], default: ['other', 'Index'], } const OnButtonClick= (status) => { let action = actions[status] || actions['default'], logName = action[0], pageName = action[1] sendLog(logName) jumpTo(pageName) }

上面的代碼看起來確實比較乾淨，這種方法的巧妙之處在於，它把判斷條件作為對象的屬性名，把處理邏輯作為對象的屬性值。在點擊按鈕的時候，這種方法特別適用於單項條件判斷的情況，即通過對象屬性查找的方式進行邏輯判斷。

這個方法很好，但是有沒有其他的方法來編碼呢？有的！

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

使用 Map 代替 Object 有很多優點，Map 對象和普通對象有的區別是：

• 一個對象通常有自己的原型，所以一個對象總是有一個“prototype”鍵

• 對象的鍵只能是一個字符串或符號，但 Map 的鍵可以是任何值

• 你可以通過使用 size 屬性很容易得到 Map 中的鍵值對的數量，而一個對象中的鍵值對數量不能直接獲取

現在我們來升級一下這個問題的難度。點擊按鈕時，不僅要判斷狀態，還要判斷用戶的身份。

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

從上面的例子中可以看到，當你的邏輯升級到雙重判斷的時候，你的判斷力就會加倍，你的代碼就會加倍。

如何才能讓代碼更乾淨利落呢？

這裡有一個解決方案。

 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 的鍵，然後在查詢時直接查詢對應字符串的值。當然，我們也可以在這裡把 Map 改成 Object。

 const actiOns= { guest_1: () => {}, guest_2: () => {}, //.... } const OnButtonClick= (identity, status) => { let action = actions[`${identity}_${status}`] || actions['default'] action.call(this) }

如果讀者覺得把查詢拼成一個字符串有點尷尬，還有另一個解決辦法，那就是用一個 Map 對象作為 key。

 const actiOns= new Map([ [{ identity: 'guest', status: 1 }, () => {}], [{ identity: 'guest', status: 2 }, () => {}], //... ]) const OnButtonClick= (identity, status) => { let action = [...actions].filter(([key, value]) => key.identity == identity && key.status == status) action.forEach(([key, value]) => value.call(this)) }

這裡你也可以看到 Map 和普通對象的區別，其中 Map 可以用任何類型的數據作為鍵。現在讓我們把它的難度再提高一點。如果對於 guest 身份來說，狀態 1-4 的處理邏輯是一樣的呢？

最壞的情況是這樣的（代碼大量重複）：

 const actiOns= new Map([ [{ identity: 'guest', status: 1 }, () => {}], [{ identity: 'guest', status: 2 }, () => {}], [{ identity: 'guest', status: 3 }, () => {}], [{ identity: 'guest', status: 4 }, () => {}], [{ identity: 'guest', status: 5 }, () => {}], //... ])

更好的方法是把處理邏輯函數分離出來：

 const actiOns= () => { const functiOnA= () => {} const functiOnB= () => {} 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]) => key.identity == identity && key.status == status) action.forEach(([key, value]) => value.call(this)) }

這對於日常需求來說已經足夠了，但是說真的，函數 A 被引用了 4 次，還是有點煩人。

如果事情真的變得很複雜，比如身份有 3 種，狀態有 10 種，你需要定義 30 個處理邏輯，其中很多處理邏輯都是一樣的，這似乎讓人無法接受。

而你可以這樣做：

 const actiOns= () => { const functiOnA= () => {} // 邏輯處理 A const functiOnB= () => {} // 邏輯處理 B 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)) }

這時使用 Map 而不是 Object 的優勢比較明顯，因為可以用正則式作為鍵。

如果需求變成：所有的對 guest 操作都需要發送一個日誌埋點，不同狀態的 guest 可能有不同的邏輯處理，那麼我們可以寫成如下：

 const actiOns= () => { const functiOnA= () => {} // 邏輯處理 A const functiOnB= () => {} // 邏輯處理 B const functiOnC= () => {} // 發送日誌 C return new Map([ [/^guest_[1-4]$/, functionA], [/^guest_5$/, functionB], [/^guest_.*$/, functionC], //... ]) } const OnButtonClick= (identity, status) => { let action = [...actions()].filter(([key, value]) => key.test(`${identity}_${status}`)) action.forEach(([key, value]) => value.call(this)) }

這樣一來，公共邏輯和單個邏輯可以同時執行。

總結

本文講到了八種 JS 邏輯判斷的寫法，包括：

1. if/else

2. switch

3. 單一判斷：存儲在 Object 中

4. 單一判斷：存儲在 Map 對象中

5. 多重判斷：將條件串聯成一個字符串，存儲在 Object 中

6. 多重判斷：將條件連成一個字符串，存儲在 Map 對象中

7. 多重判斷：把條件作為對象存儲在 Map 中

8. 多重判斷：把條件寫成正則式存儲在 Map 中