if...else...复杂情况下更好的写法

如果代码if...else...语句太多，不仅不好看，数据量多的时候也不好维护，也能进一步加深对JS的运用。使用更好的办法，前提是业务逻辑类似，如果业务逻辑比较复杂，各种场景都存在不同，还是得用if...else...。

情况一：按钮点击事件根据状态（status，参数）来执行不同的回调函数，status：1.进行中；2.失败；3.售罄；4.成功；5.系统异常

方法一：使用if...else...

let onButtonClick = (status) =>{
    if (status == 1){
        sendLog('processing');
        jumpTo('indexPage');
    } else if (status == 2 || status == 3){
        sendLog('fail');
        jumpTo('FailPage');
    }
    ...
}

方法二：使用switch

let onButtonClick = (status) =>{
    switch (status) {
        case 1:
            sendLog('processing');
            jumpTo('indexPage');
            break;
        case 2:
        case 3:
            sendLog('fail');
            jumpTo('FailPage');
            break;
        default:
            break;
    }
}

方法三：使用对象设置状态码为键和回调方法名为值

const actions = {
    '1': ['processing', 'indexPage'],
    '2': ['fail', 'FailPage'],        '3': ['fail', 'FailPage'],    'default: ['other', 'indexPage']
};
const onButtonClick = (status) => {
    let action = actions[status] || actions[default],
        logName = action[0],
        pageName = action[1];
    sendLog(logName);
    pageName(indexPage);
};

方法四：使用Map对象设置状态码为键和回调方法名为值

const actions = new Map([
    [1, ['processing', 'indexPage']],
    [2, ['fail', 'failPage']],
    [3, ['fail', 'failPage']],
    ['default', ['other', 'indexPage']]
]);
const onButtonClick = (status) => {
    let action = actions.get(status) || actions.get(default),
        logName = action[0],
        pageName = action[1];
    sendLog(logName);
    pageName(indexPage);
};

情况二：在第一种情况的基础上，还需要考虑用户的身份

**方法一：**使用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 {            }      }};

方法四：使用Map对象设置状态码和用户身份为键和回调方法名为值，使用字符串模板获取值

const actions = new Map([
    ['guest_1', () => {sendLog('processing'); pageName('indexPage'); ;],
    ['guest_2', () => {sendLog('fail'); pageName('failPage');};],
    ['master_1', () => {sendLog('fail'); pageName('failPage');};],
]);
const onButtonClick = (status, identity) => {
    // 获取Map中每个数组的值，该值为一个函数
    let action = actions.get(`${identity}_${status}`) || actions.get('default');
    action.call(this);
};

方法五：替换字符串模板，使用对象用状态码和用户身份作为Map对象的键

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

情况三：在第二种情况的基础上，还需要同个身份多种状态有相同的回调函数

const actions = () => {
    const sendLog = (status) => {...};
    const pageName = (page) => {...};
    return new Map([
        [/^guest_[1-4]$/, () => {sendLog(status)}],
        [/^guest_5$/, () => {sendLog(status)}],
        // 埋点函数func
        [/^guest_.*$/,func],
    ]);
};
const onButtonClick = (identity, status) => {
    let action = [...actions()].fliter([key,value]) => {key.test(`${identity}_${status}`)};
    actions.forEach(([key, value]) => value.call(this));
};