JavaScript復(fù)雜判斷邏輯寫(xiě)法是什么
這篇文章給大家分享的是有關(guān)JavaScript復(fù)雜判斷邏輯寫(xiě)法是什么的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。
在婺源等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專(zhuān)注、極致的服務(wù)理念，為客戶提供成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè) 網(wǎng)站設(shè)計(jì)制作按需策劃,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),高端網(wǎng)站設(shè)計(jì),成都全網(wǎng)營(yíng)銷(xiāo)推廣,成都外貿(mào)網(wǎng)站建設(shè),婺源網(wǎng)站建設(shè)費(fèi)用合理。
在某些場(chǎng)景中，我們可能會(huì)遇到多個(gè)判斷條件的情況，針對(duì)這種情況，我們通常 會(huì)使使用if/else/switch來(lái)進(jìn)行處理，但是多個(gè)判斷下，這樣的寫(xiě)法會(huì)有很多的代碼，如何解決呢，請(qǐng)繼續(xù)往下看
首先我們拿if/esle舉個(gè)栗子，switch寫(xiě)法我就不再這寫(xiě)了
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();
}
}通過(guò)判斷不同的status，執(zhí)行不同的方法，這是很常見(jiàn)的寫(xiě)法，缺點(diǎn)是代碼量很多，且不利于可讀性，別人來(lái)維護(hù)的時(shí)候，不能快速的知道這個(gè)方法有多少個(gè)判斷條件，需要調(diào)用多少個(gè)方法。必須要看完整個(gè)方法，才知道這些。下面就介紹些更優(yōu)化的方法，本文針對(duì)vue寫(xiě)法
const actions = {
'1': 'function1',
'2': 'function2',
'3': 'function3',
'4': 'function4',
'5': 'function5'
}
function checkStatus(status) {
let action = actions[status];
this[action]()
}這種寫(xiě)法將方法名和需要判斷的類(lèi)型值進(jìn)行綁定，調(diào)用的時(shí)候通過(guò)屬性名找到對(duì)應(yīng)的屬性值即可調(diào)用對(duì)應(yīng)的方法，寫(xiě)法簡(jiǎn)單明了。我們?cè)跀U(kuò)展下，假如類(lèi)型為1的時(shí)候，我們不止要調(diào)用一種方法怎么辦，請(qǐng)看下面：
const actions = {
'1': ['function1','function2'],
'2': ['function3','function4'],
'3': ['function5','function6'],
}我們可以將類(lèi)型為1時(shí)，需要調(diào)用的方法，寫(xiě)在數(shù)組里面，那么調(diào)用的時(shí)候就可以這么拿：
function checkStatus(status) {
let action = actions[status];
this[action[0]]()
this[action[1]]()
}以上兩種方法，是針對(duì)一元判斷的時(shí)候使用的，具體使用看具體的場(chǎng)景。
假如是多元判斷呢？例如，在判斷status為1的時(shí)候，我們還需要判斷type值為否為1等等。。。
條件對(duì)應(yīng)為
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
}這種業(yè)務(wù)場(chǎng)景下，如果是用傳統(tǒng)的if/else,代碼量簡(jiǎn)直不敢想，接下來(lái)，看怎么優(yōu)化這種情況
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))
}這里需要解釋的一點(diǎn)是，Map可以用任何類(lèi)型的數(shù)據(jù)作為key。我們可以直接判斷key是否符合我們的條件，對(duì)應(yīng)的處理方法，可以寫(xiě)在對(duì)應(yīng)的vulue值里面。這種寫(xiě)法基本能滿足大部分判斷邏輯了。。。下面將難度升級(jí)下。。。
上面我們講到type和status 都是一對(duì)一對(duì)應(yīng)的情況下執(zhí)行相應(yīng)的方法，加入type為1時(shí)，ststus為2和3 都需要執(zhí)行相同的方法，type為2時(shí)，status為1，2也需要執(zhí)行相同的方法呢？上面的方法也可以使用，下面這樣：
const actions = new Map([
[{type:'1',status:2},()=>{functionA}],
[{type:'3',status:3},()=>{/functionB}],
[{type:'2',status:1},()=>{functionC}],
[{type:'1',status:3},()=>{functionA}],
//...
])這樣寫(xiě)已經(jīng)能滿足日常需求了，但上面重寫(xiě)了2次status為2的情況還是有點(diǎn)不爽，假如判斷條件變得特別復(fù)雜，比如type有3種狀態(tài)，status有10種狀態(tài)，那你需要定義30條處理邏輯，而往往這些邏輯里面很多都是相同的，再用上面的寫(xiě)法似乎很難接受，那么可以這么寫(xiě)：
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))
}也就是說(shuō)利用數(shù)組循環(huán)的特性，符合正則條件的邏輯都會(huì)被執(zhí)行，那就可以同時(shí)執(zhí)行公共邏輯和單獨(dú)邏輯，因?yàn)檎齽t的存在，你可以打開(kāi)想象力解鎖更多的玩法,不懂ES6Map特性，可以去了解下，上面的用法對(duì)于大量的判斷邏輯來(lái)說(shuō)，的確是優(yōu)化了很多了。
感謝各位的閱讀！關(guān)于JavaScript復(fù)雜判斷邏輯寫(xiě)法是什么就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
標(biāo)題名稱：JavaScript復(fù)雜判斷邏輯寫(xiě)法是什么
文章轉(zhuǎn)載：http://m.jiaotiyi.com/article/piehid.html