JS如何优雅的写判断语句(一)

2019-01-21

一.复杂判断优雅写法

前言:js代码时经常遇到复杂逻辑判断的情况，通常大家可以用if/else或者switch来实现多个条件判断，但这样会有个问题，随着逻辑复杂度的增加，代码中的if/else/switch会变得越来越臃肿，越来越看不懂。

1.1 一元条件判断

一般的写法 if/else 或者 switch

/**
 * @param {number} status 活动状态：1 开团进行 2 开团失败 3 商品售罄 4 开团成功 5 系统取消
 */
const onButtonClick = (status) =>{
    if (status === 1) {
        sendLog('processing') jumpTo('IndexPage')
    } else if (status === 2) {
        sendLog('fail') jumpTo('FailPage')
    } else if (status === 3) {
        sendLog('fail') jumpTo('FailPage')
    } else if (status === 4) {
        sendLog('success') jumpTo('SuccessPage')
    } else if (status === 5) {
        sendLog('cancel') jumpTo('CancelPage')
    } else {
        sendLog('other') jumpTo('Index')
    }
}

优化方法一,将判断条件作为对象的属性名，将处理逻辑作为对象的属性值

const actions = {
    '1': ['processing', 'IndexPage'],
    '2': ['fail', 'FailPage'],
    '3': ['fail', 'FailPage'],
    '4': ['success', 'SuccessPage'],
    '5': ['cancel', 'CancelPage'],
    'default': ['other', 'Index'],
}
const onButtonClick = (status) = >{
    let action = actions[status] || actions['default'],
    let logName = action[0],
    let pageName = action[1]; 
    sendLog(logName); 
    jumpTo(pageName);
}

优化方法二,es6里的Map对象

const actions = new Map([
    [1, ['processing', 'IndexPage']], 
    [2, ['fail', 'FailPage']], 
    [3, ['fail', 'FailPage']], 
    [4, ['success', 'SuccessPage']], 
    [5, ['cancel', 'CancelPage']], 
    ['default', ['other', 'Index']]]) 
const onButtonClick = (status) => {
    let action=actions.get(status)||actions.get('default'); 
    sendLog(action[0]);
    jumpTo(action[1]);
}

1.2 多条件同时判断

多条件普通写法 if/else

const onButtonClick = (status, identity) => {
    if (identity == 'guest') {
        if (status == 1) {
        } else if (status == 2) {
        } else if (status == 3) {
        } else if (status == 4) {
        } else if (status == 5) {
        } else {}
    } else if (identity == 'master') {
        if (status == 1) {
        } else if (status == 2) {
        } else if (status == 3) {
        } else if (status == 4) {
        } else if (status == 5) {
        } else {}
    }
}

优化写法一: 利用对象object 或者 map

// 利用object对象 字符串拼接
const actions = {
    'guest_1': () = >{},
    'guest_2': () = >{},
    //....
}
const onButtonClick = (identity, status) => {
    let action = actions[`$ {identity}_${status}`] || actions['default']; 
    action.call(this);
}

// 利用map对象 字符串拼接
const actions=new Map([
    ['guest_1',()=>{}],
    ['guest_2',()=>{}],
    ['master_1',()=>{}],
    ['master_2',()=>{}],
    ['default',()=>{}],
  ]);
const onButtonClick = (identity, status) => {
    let action = actions.get(`$ {identity}_${status}`) || actions.get('default'); 
    action.call(this);
}

不拼接
优化方法二: 用Map对象，以Object对象作为key

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