代码简洁之道（判断篇）

第一个例子

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 来改写它：

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） 了。

若是不是作相同的事情呢（即每一种状态下咱们须要作不一样的事情）？例以下面这种状况：

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 须要区分不一样身份，或者多端应用中。。。

仿照上面的例子稍加变更咱们就能将它优化:

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],
                    // ...
                 ])
}

这样作的好处是把对应的逻辑抽离出来，更加方便往后维护，条理更加清晰。

参考资料：

• JavaScript复杂判断的更优雅写法
• 你所须要知道的代码整洁之道
• ECMAScript6入门-map---阮一峰