其实我们可以少写点if else和switch-CSDN博客

关注“重度前端”

专注前端、专注全栈、输出价值

助力前端深度学习

━━━━

640?wx_fmt=png

前言

作为搬砖在第一线的底层工人，业务场景从来是没有做不到只有想不到的复杂。

最基本if-else

假设有这么个场景,不同情况下打印不同值。因为涉及到的条件太多，就不提三目运算之类优化了。

if (a == 1) {	
    console.log('a1')	
} else if (a == 2) {	
    console.log('b2')	
} else if (a == 3) {	
    console.log('c3')	
} else if (a == 4) {	
    console.log('d4')	
}

现在还算能看，因为逻辑简单，如果逻辑复杂，迭代多个版本之后，你还敢动吗。

switch-case

这样稍微清晰那么一点,差别好像没什么差别：

switch(a){	
    case 1:	
        console.log('a1');	
        break;	
    case 40:	
        console.log('a40');	
        break;	
}

分离配置信息与执行动作

object映射

定义一个object作为配置对象来存放不同状态，通过链表查找

const statusMap = {	
    1:()=>{	
        console.log('a1')	
    },	
    2:()=>{	
        console.log('b2')	
    }	
}	
// 执行	
let a = 1 	
statusMap[a || 1]()

这样比较清晰，将条件配置与具体执行分离。如果要增加其他状态，只修改配置对象即可。

数组映射

当然在某些状态下可以使用数组，来做这个配置对象。

// 它就是个function，内容很复杂	
const statusArr = [function(){	
    console.log(1)	
},	
    function () {	
        console.log(2)	
    },]	
let a = 1	
statusArr[a || 1]()

数组的要求更高一点，如果是其他key，例如字符串，那么数组就不能满足需求了

升级版：不同key相同value

这样看起来好一点了，那么需求又有变动了，

function f1 (){	
    console.log(1)	
}	
function f2 (){	
    console.log(2)	
}	
const statusMap={	
    1:f1,	
    2:f1,	
    3:f1,	
    4:f1,	
    40:f2	
}	
let a = 2	
statusMap[a]()

这样当然也可以，不过重复写那么多f1，代码看起来不够简洁。

开始重构之前我们先捋一下思路，无非是想把多个key合并起来，对应一个value。

但是查找的时候有点问题了，我们的参数肯定不能完全匹配。

const statusMap = {	
    '1,2,3,4,5': f1,	
    40: f2	
}	
const keys = Object.keys(statusMap),	
    len = keys.length	
const getVal=(param='')=>{	
    for (let i = 0; i < len; i++) {	
        const key = keys[i],	
            val = statusMap[key]	
        if (key.includes(param)) {	
            return val	
        }	
    }	
}	
let a = 2,	
    handle = getVal(a)	
handle()

但是这样来看，增加了个遍历的过程，而且是拼接字符串，万一哪天传了个逗号进来，会得到了预料之外的结果。

map

es6有个新的数据结构Map，支持任意数据结构作为键值。如果用Map可能更清晰一点。

const map1 = new Map()	
const statusArr = [1,2,3,4,5]	
map1.set(statusArr,f1)	
let handle = function(){}	
const getVal = (param = '') => {	
for (let value of map1.entries()) {	
    console.log(JSON.stringify(value))	
    if (value[0].includes(param)){	
        console.log(value)	
        handle = value[1]	
    }	
}	
}	
const a = 2	
getVal(a)	
handle()

个人而言虽然这样减少了重复代码，但是又增加了一步匹配值的操作，优劣就见仁见智吧。

双数组

肯定有部分人就是不想做遍历的操作，既然一个数组不能满足，那么两个数组呢。

const keyArr = ['1,2,3,4,5','40']	
const valArr = [f1,f2]	
const getVal = (param = '')=>{	
    let index = keyArr.findIndex((it)=>{	
        return it.includes(param)	
    })	
    return valArr[index]	
}	
let a = 2,	
    handle = getVal(a)	
handle()

利用数组提供的下标，将key和value对应起来，进而获取想要的值。

总结

这是在写业务需求的时候做的一点总结，数组和对象的映射可能大家都在用。当遇到了不同key相同value的情况时，从懒出发不像重复罗列，就尝试了下。当然了，因为个人水平问题，肯定有更好的处理方式，欢迎一起讨论，抛砖引玉共同进步。此外现有成熟的库里loadsh也是可以到达目的，不过自己思考过之后再去看大神的作品理解会更深入一点。更多文章请转我的博客(https://github.com/xiaoxiangdaiyu/blog)

END