判断条件很多时,会降低代码的可读性,例如下面这段代码
function fn(type){
if(type === 1){
console.log('待把相思灯下诉')
}else if(type === 2){
console.log('一缕新欢')
}else if(type === 3){
console.log('旧恨千千缕')
}else if(type === 4){
console.log('最是人间留不住')
}else if(type === 5){
console.log('朱颜辞镜花辞树')
}
}
可以使用一个对象进行映射,优化后写法如下
function fn(type){
let obj = {
1: '待把相思灯下诉',
2: '一缕新欢',
3: '旧恨千千缕',
4: '最是人间留不住',
5: '朱颜辞镜花辞树'
}
if(obj[type]){
console.log(obj[type])
}else{
console.log('参数不合法')
}
}
但上述举例过于绝对,真是开发中可能不同的参数有着不同的逻辑,如:type为1:打印、2:保存数据、3:发送请求、4:…
这里可以优化对象进行映射
function fn(type){
let obj = {
1: () => {console.log('待把相思灯下诉')}, // 在函数内处理相应操作
2: () => {console.log('一缕新欢')},
3: () => {console.log('旧恨千千缕')},
4: () => {console.log('最是人间留不住')},
5: () => {console.log('朱颜辞镜花辞树')},
}
if(obj[type]){
obj[type]() // 调用对应处理函数
}else{
console.log('参数不合法')
}
}
上述场景虽已经然适用于大部分场景,但是部分情境下,判断条件会比直接判断参数更加复杂,如参数是否处于某一区间,是否为number类型,能否被2整除…
这里只是表明每个参数判断逻辑不同
function fn(type){
if(type === 1){
console.log('待把相思灯下诉')
}else if(type % 2 === 0){
console.log('一缕新欢')
}else if(type === [3][0]){
console.log('旧恨千千缕')
}else if([5].includes(type)){
console.log('最是人间留不住')
}else if(type === 7){
console.log('朱颜辞镜花辞树')
}
}
可以使用元组来映射,将判断条件也变为函数
function fn(type){
let map = [
[
() => type === 1, // 条件
() => console.log('待把相思灯下诉'), // 处理函数
],
[
() => type % 2 === 0,
() => console.log('一缕新欢'),
],
[
() => type === [3][0],
() => console.log('旧恨千千缕'),
],
[
() => [5].includes(type),
() => console.log('最是人间留不住'),
],
[
() => type === 7,
() => console.log('朱颜辞镜花辞树'),
],
]
// 根据每个数组第一项
const target = map.find(m=>m[0]()) // 找到符合判断条件的元组
if(target){
target[1]()
}else{
console.log('参数不合法')
}
}