代碼簡潔之道（判斷篇）

時間 2020-01-22

標籤代碼簡潔之道判斷简体版

原文原文鏈接

第一個例子

if (state === 1) {
    return true
} else if (state === 2) {
    return true
} else if (state === 3) {
    return true
} else if (state === 4){
    return true
} else {
    return false
}

你首先想到的多是使用 switch case, 咱們使用 switch case 來改寫它：es6

switch (state) {
    case 1: return true
        break;
    case 2: return true
        break;
    case 3: return true
        break
    case 4: return true
        break
    default: return false
        break
}

看起來有些條理了, 但咱們應對這類狀況，能夠將他進一步優化，觀察發現：正則表達式

都是判斷 state
判斷後都作了相同的事情（return true）

咱們用 Array.includes 來優化它:數組

includes() 方法用來判斷一個數組是否包含一個指定的值，若是是返回 true，不然false。函數

參數一：必須。須要查找的元素值。

參數二：可選。從該索引處開始查找 searchElement。若是爲負值，則按升序從 array.length + fromIndex 的索引開始搜索。默認爲 0。

const states = [1, 2, 3, 4]
if (states.includes(state) {
    return true
}

這樣是否是更簡單，代碼量也更少了，同時也方便管理 states，由於如今全部 state 都被加到一個數組（states）了。優化

若是不是作相同的事情呢（即每一種狀態下咱們須要作不一樣的事情）？例以下面這種狀況：code

if (state === 1) {
    // do something
} else if (state === 2) {
    // do something
} else if (state === 3) {
    // do something
} else if (state === 4){
    // do something
} else {
    // do something
}

咱們能夠使用對象來優化它:對象

const actions = {
    1: () => { /*do something*/ },
    2: () => { /*do something*/ },
    3: () => { /*do something*/ },
    4: () => { /*do something*/ },
    'default': () => { /*do something*/ }
}

actions[state]() || actions['default']();

可讀性更高
更易於維護

原理很簡單，只須要經過對象的 key 找到對象的值，而對應的值又是一個 func，同時來執行它就能夠了。索引

第二個例子

if (type === 'firstType') {
    if (state === 1) {/*do something*/
        // do something
    } else if (state === 2) {
        // do something
    } else if (state === 3) {
        // do something
    } else if (state === 4){
        // do something
    } else {
        // do something
    }
} else if (type === 'secondType') {
    if (state === 1) {
        // do something
    } else if (state === 2) {
        // do something
    } else if (state === 3) {
        // do something
    } else if (state === 4){
        // do something
    } else {
        // do something
    }
}

觀察上面的代碼，發現外層又套了一層判斷，這在平常業務中也是十分常見的，例如一個 APP 須要區分不一樣身份，或者多端應用中。。。ip

仿照上面的例子稍加變更咱們就能將它優化:字符串

const actions = {
  'firstType_1': ()=>{ /*do something*/ }],
  'firstType_2': ()=>{ /*do something*/ }],
  'firstType_3': ()=>{ /*do something*/ }],
  'firstType_4': ()=>{ /*do something*/ }],
  'secondType_1': ()=>{ /*do something*/ }],
  'secondType_2': ()=>{ /*do something*/ }],
  'secondType_3': ()=>{ /*do something*/ }],
  'secondType_4': ()=>{ /*do something*/ }],
  'default': ()=>{ /*do something*/ }]
}

const action = actions[`${type}_${state}`] || actions['default']

咱們給對象的 key 設置爲一個字符串，字符串由兩個條件經過 _ (固然你能夠隨意) 連接在一塊兒，它所對應的值依然是一個 func 。
同時用兩個變量經過模板字符串的形式連接在一塊兒，實現與上個例子相同的效果。

咱們還能夠使用 Map 來優化它:

const actions = new Map([
  ['firstType_1', ()=>{ /*do something*/ }],
  ['firstType_2', ()=>{ /*do something*/ }],
  ['firstType_3', ()=>{ /*do something*/ }],
  ['firstType_4', ()=>{ /*do something*/ }],
  ['secondType_1', ()=>{ /*do something*/ }],
  ['secondType_2', ()=>{ /*do something*/ }],
  ['secondType_3', ()=>{ /*do something*/ }],
  ['secondType_4', ()=>{ /*do something*/ }],
  ['default', ()=>{ /*do something*/ }]
])

const action = actions.get(`${type}_${state}`) || actions.get('default')

Map 相似於對象，也是鍵值對的集合，可是「鍵」的範圍不限於字符串，各類類型的值（包括對象）均可以看成鍵。

原理與上個是同樣的，不過是將對象的形式改成了 Map 的形式，發現這樣稍微複雜了一些，可是咱們能夠用它來處理更復雜的狀況。

咱們假設 firstType 中 state 爲 1-3 都作相同的事,那麼能夠這樣寫:

const actions = new Map([
  ['/^firstType_[1-3]$/', ()=>{ /*do something*/ }],
  ['firstType_4', ()=>{ /*do  something*/ }],
  // ...
  ['default', ()=>{ /*do something*/ }]
])

很顯然使用正則表達式可以減小重複的代碼, 也能帶來更多可能性，處理更復雜的狀況。

若是對應的方法中出現大量邏輯代碼，那麼咱們能夠將 actions 封裝爲一個函數。進一步來優化它，：

const actions = () => {
    const fn1 = () => {}
    const fn2 = () => {}
    return new Map([
                    ['/^firstType_[1-3]$/', fn1],
                    ['firstType_4', fn2],
                    // ...
                 ])
}

這樣作的好處是把對應的邏輯抽離出來，更加方便往後維護，條理更加清晰。