前言

作為搬磚在第一線的底層工人，業(yè)務(wù)場(chǎng)景從來(lái)是沒有做不到只有想不到的復(fù)雜。

不過他強(qiáng)任他強(qiáng)，if-else全搞定，搬就完了。但是隨著業(yè)務(wù)迭代或者項(xiàng)目交接，自己在看自己或者別人的if代碼的時(shí)候，心情就不再表述了，各自深有體會(huì)。所以我們一起看看if還能怎么寫

最基本if-else

假設(shè)有這么個(gè)場(chǎng)景,不同情況下打印不同值。

因?yàn)樯婕暗降臈l件太多，就不提三目運(yùn)算之類優(yōu)化了。

if (a == 1) { console.log('a1')} else if (a == 2) { console.log('b2')} else if (a == 3) { console.log('c3')} else if (a == 4) { console.log('d4')}/* n..... */

現(xiàn)在還算能看，因?yàn)檫壿嫼?jiǎn)單，如果邏輯復(fù)雜，迭代多個(gè)版本之后，你還敢動(dòng)嗎。

每動(dòng)一下就戰(zhàn)戰(zhàn)兢兢，誰(shuí)知道哪里會(huì)遺漏。

那么換種方式呢

switch-case

這樣稍微清晰那么一點(diǎn),差別好像沒什么差別：

switch(a){ case 1:  console.log('a1');  break; /* 省略。。。 */  case 40:  console.log('a40');  break;}

分離配置信息與執(zhí)行動(dòng)作

object映射

定義一個(gè)object作為配置對(duì)象來(lái)存放不同狀態(tài)，通過鏈表查找

const statusMap = { 1:()=>{  console.log('a1') }, 2:()=>{  console.log('b2') } /* n.... */}// 執(zhí)行l(wèi)et a = 1 statusMap[a || 1]()

這樣比較清晰，將條件配置與具體執(zhí)行分離。如果要增加其他狀態(tài)，只修改配置對(duì)象即可。

數(shù)組映射

當(dāng)然在某些狀態(tài)下可以使用數(shù)組，來(lái)做這個(gè)配置對(duì)象。

// 這里就涉及其他優(yōu)化了，例如將執(zhí)行函數(shù)抽離出來(lái)，大家不要關(guān)注func的內(nèi)容就好。// 它就是個(gè)function，內(nèi)容很復(fù)雜const statusArr = [function(){ console.log(1)}, function () {  console.log(2) },]// 執(zhí)行l(wèi)et a = 1statusArr[a || 1]()

數(shù)組的要求更高一點(diǎn)，如果是其他key，例如字符串，那么數(shù)組就不能滿足需求了

升級(jí)版：不同key相同value

這樣看起來(lái)好一點(diǎn)了，那么需求又有變動(dòng)了，

前面是每種處理方式都不同，下面有幾種情況下處理函數(shù)相同的，

例如1-39的時(shí)候，調(diào)用a，40之后調(diào)用b，如果我們繼續(xù)來(lái)用映射的方式來(lái)處理。

function f1 (){ console.log(1)}function f2 (){ console.log(2)}const statusMap={ 1:f1, 2:f1, 3:f1, 4:f1, //省略 40:f2}let a = 2statusMap[a]()

這樣當(dāng)然也可以，不過重復(fù)寫那么多f1，代碼看起來(lái)不夠簡(jiǎn)潔。

開始重構(gòu)之前我們先捋一下思路，無(wú)非是想把多個(gè)key合并起來(lái)，對(duì)應(yīng)一個(gè)value。

也就是說我們的鍵值不是字符串而是個(gè)數(shù)組，object顯然只支持字符串，