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

假如我们有如下代码是我在项目中看到并模拟出来的一个分支语句，可以看到有大量的 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。

以上关于如何优化JavaScript中大量使用if…else…if的情况？的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。