如何优化JavaScript中大量使用if…else…if的情况？

1. 方法 1: 写一个对象, key为条件, value为满足条件后执行的语句
2. 方法 2: 写一个对象, key为条件, value为满足条件后执行的语句(函数形式)
3. 方法 3: 使用元组
4. 结语

假如我们有如下代码是我在项目中看到并模拟出来的一个分支语句，可以看到有大量的 if...else，给人感觉很臃肿，不好维护，体验极差。

function routingJump(route_name) {
    if (route_name === 'home') {
        console.log('跳转首页');
    } else if (route_name === 'shop') {
        console.log('跳转购物页');
    } else if (route_name === 'information') {
        console.log('跳转资讯页');
    } else if (route_name === 'main') {
        console.log('跳转我的');
    } else if (route_name === 'course') {
        console.log('跳转课程页');
    } else if (route_name === 'activity') {
        console.log('跳转活动页');
    } else if (route_name === 'help') {
        console.log('跳转帮助页');
    } else {
        console.log('不跳转页面');
    }
}

routingJump('home'); // 跳转首页

那么针对这样的情况我们如何进行优化呢?

方法 1: 写一个对象, key为条件, value为满足条件后执行的语句

function routingJump(route_name) {

    const map = {
        home: "跳转首页",
        shop: "跳转购物页",
        information: "跳转资讯页",
        main: "跳转我的",
        course: "跳转课程页",
        activity: "跳转活动页",
        help: "跳转帮助页"
    }

    if (map[route_name]) {
        console.log('map[route_name]: ', map[route_name]);
    } else {
        console.log('不跳转页面');
    }
}

routingJump('home'); // 跳转首页

但这么写会有一个问题, 那就是假设每个分支要做的事情不同，那这样写就没办法实现了，请看方法 2

方法 2: 写一个对象, key为条件, value为满足条件后执行的语句(函数形式)

function routingJump(route_name) {

    const map = {
        home: () => console.log("跳转首页"),
        shop: () => console.log("生成随机数"),
        information: () => console.log("排序"),
        main: () => console.log("关闭页面"),
        course: () => console.log("打印"),
        activity: () => console.log("监听某些事"),
        help: () => console.log("......")
    }

    if (map[route_name]) {
        map[route_name](); // <-------------------这里要改为调用函数
    } else {
        console.log('不跳转页面');
    }
}

routingJump('shop'); // 生成随机数

假如程序复杂, 判断条件很苛刻, 那么又应该怎么写呢? 请看方法 3

方法 3: 使用元组

假设

1. 路由名称里面只要包含了h这个字母, 统统跳转首页
2. 路由名称里面以s开头的, 统统跳转购物页
3. 路由名称里面以n结尾的, 统统跳转资讯页
4. 路由名称里面包含m, 但不包含d的, 统统跳转我的
5. 路由名称里面包含a, 但长度<10的 统统跳转活动页

function routingJump(route_name) {

    const map = [
        [
            () => route_name.includes('h'),
            () => console.log("跳转首页")
        ],
        [
            () => route_name.startsWith('s'),
            () => console.log("跳转购物页")
        ], 
        [
            () => route_name.endsWith('n'),
            () => console.log("跳转资讯页")
        ],
        [
            () => route_name.includes('m') && !route_name.includes('d'),
            () => console.log("跳转我的")
        ],
        [
            () => route_name.includes('a') && route_name.length < 10, () => console.log("跳转活动页")
        ]
    ]

    const targetFn = map.find(item => item[0]());

    if (targetFn) {
        targetFn[1]()
    } else {
        console.log('不跳转页面');
    }
}

routingJump('activity'); // 跳转活动页

以上优化方式就是我们熟悉的策略模式。

结语

以上就是一些简单常用的优化手段, 当然还有 switch、Map等等, 也可以避免大量的if...else。