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: 使用元组
假设
- 路由名称里面只要包含了
h
这个字母, 统统跳转首页 - 路由名称里面以
s
开头的, 统统跳转购物页 - 路由名称里面以
n
结尾的, 统统跳转资讯页 - 路由名称里面包含
m
, 但不包含d
的, 统统跳转我的 - 路由名称里面包含
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'); // 跳转活动页
以上就是一些简单常用的优化手段, 当然还有 switch
、Map
等等, 也可以避免大量的if...else