总结:
本文分享了了8种逻辑判断写法,包括:if/else、switch
一元判断时:存到Object里
一元判断时:存到Map里
多元判断时:将condition拼接成字符串存到Object里
多元判断时:将condition拼接成字符串存到Map里
多元判断时:将condition存为Object存到Map里
多元判断时:将condition写作正则存到Map里
愿你未来的代码里,不只是有if/else/switch。
问题:
复杂逻辑判断,我们常用if/else/switch来实现,但随着逻辑复杂度的增加,代码中的if/else/switch会变得越来越臃肿,越来越看不懂。
先看一段代码:

解决:
大家可以很轻易的提出这段代码的改写方案,switch出场:

这样看起来比if/else清晰多了,细心的同学也发现了小技巧,case 2和case 3逻辑一样的时候,可以省去执行语句和break,则case 2的情况自动执行case 3的逻辑。
还有更简单的写法,将判断条件作为对象的属性名,处理逻辑的函数名作为对象的属性值:

我们也可以用ES6的Map对象来实现,它和Object对象的区别是:
一个对象通常都有自己的原型,所以一个对象总有一个"prototype"键。
一个对象的键只能是字符串或者Symbols,但一个Map的键可以是任意值。
你可以通过size属性很容易地得到一个Map的键值对个数,而对象的键值对个数只能手动确认。

我们把问题升级一下,以前按钮点击时候只需要判断status,现在还需要判断用户的身份:
如果用if/else来完成逻辑判断

我们继续用Map来写呢

如果用Object来实现也是类似的:

如果觉得查询条件是字符串有点别扭,还有一种方案就是用Object对象作为key

再将难度升级一点点,假如guest情况下,status1-4的处理逻辑都一样怎么办,最差的情况是这样:

好一点的写法是将处理逻辑函数进行缓存:

但是写4次functionA实在不爽啊,我们可以用字符串为key,然后正则来匹配key。

网友评论