javascript欄目介紹如何消除if else， 讓你的代碼看起來更優(yōu)雅，一起來看看吧。

前言

應(yīng)該有不少同學(xué)有遇到過充斥著if else的代碼，面對(duì)這樣的一團(tuán)亂麻，簡(jiǎn)單粗暴地繼續(xù)增量修改常常只會(huì)讓復(fù)雜度越來越高，可讀性越來越差。那么是時(shí)候重構(gòu)了，花幾分鐘看看這篇文章， 說不定對(duì)你有一丟丟幫助。

場(chǎng)景一： 根據(jù)status顯示對(duì)應(yīng)名稱

優(yōu)化方案1：object對(duì)象

const statusStr = {   '1': '待付款',   '2': '待發(fā)貨',   '3': '已發(fā)貨',   '4': '交易完成',   '5': '交易關(guān)閉',   'default': '', } const getStatus = (status) =>{   return statusStr[status] || statusStr['default'] }

將判斷條件作為對(duì)象的屬性名，將處理邏輯作為對(duì)象的屬性值，在按鈕點(diǎn)擊的時(shí)候，通過對(duì)象屬性查找的方式來進(jìn)行邏輯判斷.

優(yōu)化方案2： Map對(duì)象

const statusStr = new map([   '1': ['待付款'],   '2': ['待發(fā)貨'],   '3': ['已發(fā)貨'],   '4': ['交易完成'],   '5': ['交易關(guān)閉'],   'default': [''], ]) const getStatus = (status) =>{   let actions = statusStr.get(status) || statusStr.get('default')   return  actions[0]; }

這樣寫用到了es6里的Map對(duì)象，那么Map對(duì)象和Object對(duì)象有什么區(qū)別呢？

一個(gè)對(duì)象通常都有自己的原型，所以一個(gè)對(duì)象總有一個(gè)"prototype"鍵。 一個(gè)對(duì)象的鍵只能是字符串或者Symbols，但一個(gè)Map的鍵可以是任意值。 你可以通過size屬性很容易地得到一個(gè)Map的鍵值對(duì)個(gè)數(shù)，而對(duì)象的鍵值對(duì)個(gè)數(shù)只能手動(dòng)確認(rèn)。

場(chǎng)景二：多個(gè)condition對(duì)應(yīng)名稱

現(xiàn)在把問題升級(jí)一下， 以前按鈕點(diǎn)擊時(shí)候只需要判斷status，現(xiàn)在還需要判斷用戶的身份：
「舉個(gè)栗子：」

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ì)加倍，這時(shí)怎么寫更清爽呢？

優(yōu)化方案1： 將condition用字符拼接形式存在Map對(duì)象里

const actions = new Map([   ['guest_1', ()=>{/*do sth*/}],   ['guest_2', ()=>{/*do sth*/}],   ['guest_3', ()=>{/*do sth*/}],   ['guest_4', ()=>{/*do sth*/}],   ['guest_5', ()=>{/*do sth*/}],   ['master_1', ()=>{/*do sth*/}],   ['master_2', ()=>{/*do sth*/}],   ['master_3', ()=>{/*do sth*/}],   ['master_4', ()=>{/*do sth*/}],   ['master_5', ()=>{/*do sth*/}],   ['default', ()=>{/*do sth*/}], ]) const onButtonClick = (identity,status)=>{   let action = actions.get(`${identity}_${status}`) || actions.get('default')   action.call(this) }

上述代碼核心邏輯是：把兩個(gè)條件拼接成字符串，并通過以條件拼接字符串作為鍵，以處理函數(shù)作為值的Map對(duì)象進(jìn)行查找并執(zhí)行，這種寫法在多元條件判斷時(shí)候尤其好用。

優(yōu)化方案2： 將condition用字符拼接形式存在Object對(duì)象里

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

優(yōu)化方案3： 將condition用Object對(duì)象形式存在Map對(duì)象里

可能用查詢條件拼成字符串有點(diǎn)別扭，那還有一種方案，就是用Map對(duì)象，以O(shè)bject對(duì)象作為key：

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

場(chǎng)景三：根據(jù)status做出相應(yīng)操作

「舉個(gè)栗子：」

function init () {     if (isAnswer === 1) {         if (isOldUser === 1) {             // ...         } else if (isOldUser === 2) {             // ...         }     } else if (isAnswer === 2) {         if (isOldUser === 1) {             // ...         } else if (isOldUser === 2) {             // ...         }     } else if (isAnswer === 3) {         if (isOldUser === 1) {             // ...         } else if (isOldUser === 2) {             // ...         }     } }

優(yōu)化方案1： 查找表，職責(zé)鏈查找表

const rules = [     {         match (an, old) {if (an === 1) {return true}},         action (an, old) {         if (old === 1) {// ...}          else if (old === 2) {// ...}         }     },     {         match (an, old) { if (an === 2) {return true } },         action (an, old) {             if (old === 1) {// ...}              else if (old === 2) {// ...}         }     },     {         match (an, old) {if (an === 3) {return true}},         action (an, old) {             if (old === 1) {// ...}              else if (old === 2) {// ...}         }     } ] function init (an, old) {     for (let i = 0; i < rules.length; i++) {         // 如果返回true         if (rules[i].match(an, old)) {             rules[i].action(an, old)         }     } } init(isAnswer, isOldUser)

雖然可能看著是治標(biāo)不治本，其實(shí)不然，init函數(shù)的復(fù)雜度大大的降低了。我們已經(jīng)把控制流程的復(fù)雜邏輯，拆分到determineAction函數(shù)中

優(yōu)化方案2： 函數(shù)式編程

import R from 'ramda' var fn = R.cond([   [R.equals(0),   R.always('water freezes at 0°C')],   [R.equals(100), R.always('water boils at 100°C')],   [R.T,           temp => 'nothing special happens at ' + temp + '°C'] ]); fn(0); //=> 'water freezes at 0°C' fn(50); //=> 'nothing special happens at 50°C' fn(100); //=> 'water boils at 100°C'

場(chǎng)景四： 根據(jù)范圍去進(jìn)行不同處理

「舉個(gè)栗子：」比如大家可能會(huì)遇到類似下面的需求：比如某平臺(tái)的信用分?jǐn)?shù)評(píng)級(jí)，超過700-950，就是信用極好，650-700信用優(yōu)秀，600-650信用良好，550-600信用中等，350-550信用較差。

function showGrace(grace) {     let _level='';     if(grace>=700){         _level='信用極好'     }     else if(grace>=650){         _level='信用優(yōu)秀'     }     else if(grace>=600){         _level='信用良好'     }     else if(grace>=550){         _level='信用中等'     }     else{         _level='信用較差'     }     return _level; }

優(yōu)化方案1： 用look-up表，把配置數(shù)據(jù)和業(yè)務(wù)邏輯分離

function showGrace(grace,level,levelForGrace) {     for(let i=0;i<level.length;i++){         if(grace>=level[i]){             return levelForGrace[i];         }     }     //如果不存在，那么就是分?jǐn)?shù)很低，返回最后一個(gè)     return levelForGrace[levelForGrace.length-1]; } let graceForLevel=[700,650,600,550]; let levelText=['信用極好','信用優(yōu)秀','信用良好','信用中等','信用較差'];

小結(jié)

很多情況下我們都可以使用更靈活的方式去替代if else以及switch， 但也不是所有的if else都需要替代， 視情況而定。