這篇文章主要講解了JS邏輯判斷除了if-else和switch條件判斷還有什么，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。
成都創(chuàng)新互聯(lián)主要從事網(wǎng)站建設(shè)、做網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)綏寧,10多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專(zhuān)業(yè),歡迎來(lái)電咨詢建站服務(wù):18980820575
我們?cè)诰帉?xiě) JS 代碼時(shí)，經(jīng)常會(huì)遇到邏輯判斷復(fù)雜的情況。一般情況下，可以用 if/else 或 switch 來(lái)實(shí)現(xiàn)多個(gè)條件判斷，但會(huì)出現(xiàn)一個(gè)問(wèn)題：隨著邏輯復(fù)雜度的增加，代碼中的 if/else 和 switch 會(huì)越來(lái)越臃腫。本文將帶你嘗試寫(xiě)出更優(yōu)雅的判斷邏輯。
比如說(shuō)下面這樣一段代碼：
重慶分公司
重慶分公司
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')
}
}你可以在代碼中看到這個(gè)按鈕的點(diǎn)擊邏輯。根據(jù)活動(dòng)狀態(tài)的不同做兩件事，發(fā)送日志埋點(diǎn)并跳轉(zhuǎn)到相應(yīng)的頁(yè)面。很容易想到這段代碼可以用 switch 重寫(xiě)如下：
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
}
}好吧，看起來(lái)比 if/else 層次結(jié)構(gòu)更清晰一些，細(xì)心的讀者可能也發(fā)現(xiàn)了一個(gè)小竅門(mén)：case 2 和 case 3 的邏輯一樣時(shí)，可以把前面的邏輯處理代碼省略，case 2 會(huì)自動(dòng)執(zhí)行與 case 3 的邏輯。
不過(guò)，還有一個(gè)更簡(jiǎn)單的寫(xiě)法：
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)
}上面的代碼看起來(lái)確實(shí)比較干凈，這種方法的巧妙之處在于，它把判斷條件作為對(duì)象的屬性名，把處理邏輯作為對(duì)象的屬性值。在點(diǎn)擊按鈕的時(shí)候，這種方法特別適用于單項(xiàng)條件判斷的情況，即通過(guò)對(duì)象屬性查找的方式進(jìn)行邏輯判斷。
這個(gè)方法很好，但是有沒(méi)有其他的方法來(lái)編碼呢？有的！
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 有很多優(yōu)點(diǎn)，Map 對(duì)象和普通對(duì)象有的區(qū)別是：
現(xiàn)在我們來(lái)升級(jí)一下這個(gè)問(wèn)題的難度。點(diǎn)擊按鈕時(shí)，不僅要判斷狀態(tài)，還要判斷用戶的身份。
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
}
}
}從上面的例子中可以看到，當(dāng)你的邏輯升級(jí)到雙重判斷的時(shí)候，你的判斷力就會(huì)加倍，你的代碼就會(huì)加倍。
如何才能讓代碼更干凈利落呢？
這里有一個(gè)解決方案。
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)
}上述代碼的核心邏輯是。將兩個(gè)判斷條件拼接成一個(gè)字符串作為 Map 的鍵，然后在查詢時(shí)直接查詢對(duì)應(yīng)字符串的值。當(dāng)然，我們也可以在這里把 Map 改成 Object。
const actions = {
guest_1: () => {},
guest_2: () => {},
//....
}
const onButtonClick = (identity, status) => {
let action = actions[`${identity}_${status}`] || actions['default']
action.call(this)
}如果讀者覺(jué)得把查詢拼成一個(gè)字符串有點(diǎn)尷尬，還有另一個(gè)解決辦法，那就是用一個(gè) Map 對(duì)象作為 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 和普通對(duì)象的區(qū)別，其中 Map 可以用任何類(lèi)型的數(shù)據(jù)作為鍵?，F(xiàn)在讓我們把它的難度再提高一點(diǎn)。如果對(duì)于 guest 身份來(lái)說(shuō)，狀態(tài) 1-4 的處理邏輯是一樣的呢？
最壞的情況是這樣的（代碼大量重復(fù)）：
const actions = new Map([
[{ identity: 'guest', status: 1 }, () => {}],
[{ identity: 'guest', status: 2 }, () => {}],
[{ identity: 'guest', status: 3 }, () => {}],
[{ identity: 'guest', status: 4 }, () => {}],
[{ identity: 'guest', status: 5 }, () => {}],
//...
])更好的方法是把處理邏輯函數(shù)分離出來(lái)：
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))
}這對(duì)于日常需求來(lái)說(shuō)已經(jīng)足夠了，但是說(shuō)真的，函數(shù) A 被引用了 4 次，還是有點(diǎn)煩人。
如果事情真的變得很復(fù)雜，比如身份有 3 種，狀態(tài)有 10 種，你需要定義 30 個(gè)處理邏輯，其中很多處理邏輯都是一樣的，這似乎讓人無(wú)法接受。
而你可以這樣做：
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))
}這時(shí)使用 Map 而不是 Object 的優(yōu)勢(shì)比較明顯，因?yàn)榭梢杂谜齽t式作為鍵。
如果需求變成：所有的對(duì) guest 操作都需要發(fā)送一個(gè)日志埋點(diǎn)，不同狀態(tài)的 guest 可能有不同的邏輯處理，那么我們可以寫(xiě)成如下：
const actions = () => {
const functionA = () => {} // 邏輯處理 A
const functionB = () => {} // 邏輯處理 B
const functionC = () => {} // 發(fā)送日志 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))
}這樣一來(lái)，公共邏輯和單個(gè)邏輯可以同時(shí)執(zhí)行。
總結(jié)
本文講到了八種 JS 邏輯判斷的寫(xiě)法，包括：
看完上述內(nèi)容，是不是對(duì)JS邏輯判斷除了if-else和switch條件判斷還有什么有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
