JavaScript: 代码分支优化 if...else...if

javascript 复制代码
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'); // 跳转首页

上述代码是我在项目中看到并模拟出来的一个分支语句, 可以看到有大量的 if...else

那么我们如何进行优化呢?

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

javascript 复制代码
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为满足条件后执行的语句(函数形式)

javascript 复制代码
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的 统统跳转活动页
javascript 复制代码
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'); // 跳转活动页

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

相关推荐
耶啵奶膘1 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^2 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie3 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic3 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿4 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具4 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
清灵xmf4 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据5 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161775 小时前
防抖函数--应用场景及示例
前端·javascript
334554325 小时前
element动态表头合并表格
开发语言·javascript·ecmascript