js中if逻辑过多,常见优化

1. 单一判断常见优化

if判断逻辑过多,在常见code review 中,下面的这种情况肯定是要被批评的。

const gitObj = (type) => {
    
    if (type === '张三') {
    
        return '张三的Obj';
    }
    if (type === '李四') {
    
        return '李四的Obj';
    }
    if (type === 233) {
    
        return 'testObj';
    }
    if (type === 'testUser') {
    
        return 'testUser';
    }
    return '--';
};

单一判断常见优化方式

const gitObj = (type) => {
    
    const newMap = {
    
        '张三': '张三的Obj',
        '李四': '李四的Obj',
        233: 'testObj',
        'testUser': 'testUser哈哈哈',
    };
    return newMap[type] || '--';
};

2. 多个判断逻辑的常见优化

多个判断逻辑过多

const gitObj = (type, name) => {
    
    if (type === '张三') {
    
        return '张三的Obj';
    }
    if (type === '李四' && name === '李四type') {
    
        return '李四Obj';
    }
    if (type === '李四' && name === '李四typePlus') {
    
        return '李四ObjPlusObj';
    }
    if (type === '小明' && name === '小明type') {
    
        return '小明Obj';
    }
    if (type === '小明' && name === '小明typePlus') {
    
        return '小明ObjPlus';
    }
    return '--';
};

优化方式1

const gitObj = (type, name) => {
    
    let newArr = [
        ['张三', false, '张三的Obj'],
        ['李四', '李四type', '李四Obj'],
        ['李四', '李四typePlus', '李四ObjPlusObj'],
        ['小明', '小明type', '小明Obj'],
        ['小明', '小明typePlus', '小明ObjPlus']
    ];
    let res = newArr.filter((item) => {
    
        return type === newArr[0] && (type.name === newArr[1] || !!type.name === !!newArr[1]);
    });
    return res.length === 0 ? '--': res[0][2];
};

优化方式2

const gitObj = (type, name) => {
    
    const map = {
    
        '张三': '张三的Obj',
        '李四': {
    
            '李四type': '李四Obj',
            '李四typePlus': '李四ObjPlusObj',  
        },
        '小明': {
    
            '小明type': '小明Obj',
            '小明typePlus':"小明ObjPlus"
        }
    }
   return  (name ? map[type][name] : map[type]) || '--';
};