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

相关推荐
baiduopenmap1 分钟前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
小牛itbull13 分钟前
ReactPress vs VuePress vs WordPress
开发语言·javascript·reactpress
请叫我欧皇i21 分钟前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_24 分钟前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
guokanglun30 分钟前
空间数据存储格式GeoJSON
前端
GIS瞧葩菜33 分钟前
局部修改3dtiles子模型的位置。
开发语言·javascript·ecmascript
zhang-zan1 小时前
nodejs操作selenium-webdriver
前端·javascript·selenium
ZBY520311 小时前
【Vue】 npm install amap-js-api-loader指南
javascript·vue.js·npm
猫爪笔记1 小时前
前端:HTML (学习笔记)【2】
前端·笔记·学习·html
brief of gali1 小时前
记录一个奇怪的前端布局现象
前端