其实你可以少写点if else与switch(推荐)


Posted in Javascript onJanuary 10, 2019

前言

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

不过他强任他强,if-else全搞定,搬就完了。但是随着业务迭代或者项目交接,自己在看自己或者别人的if代码的时候,心情就不再表述了,各自深有体会。所以我们一起看看if还能怎么写

最基本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')
}
/* n..... */

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

每动一下就战战兢兢,谁知道哪里会遗漏。

那么换种方式呢

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')
 }
 /* n.... */
}
// 执行
let a = 1 
statusMap[a || 1]()

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

数组映射

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

// 这里就涉及其他优化了,例如将执行函数抽离出来,大家不要关注func的内容就好。
// 它就是个function,内容很复杂
const statusArr = [function(){
 console.log(1)
},
 function () {
  console.log(2)
 },]
// 执行
let a = 1
statusArr[a || 1]()

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

升级版:不同key相同value

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

前面是每种处理方式都不同,下面有几种情况下处理函数相同的,

例如1-39的时候,调用a,40之后调用b,如果我们继续来用映射的方式来处理。

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。

也就是说我们的键值不是字符串而是个数组,object显然只支持字符串,

那么可以将这么多key合并成一个:'1,2,3,4,..,9'。

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

接着走下去,是不是做个遍历加个判断,包含在子集内的都算匹配,那么代码看起来就是下面这个样子。

// 将键值key设置为一个拼接之后的字符串
const statusMap = {
 '1,2,3,4,5': f1,
 //省略
 40: f2
}
// 获取所有的键值,待会遍历用
const keys = Object.keys(statusMap),
 len = keys.length
// 遍历获取对应的值 
const getVal=(param='')=>{
 // 用for循环的原因在于匹配之后就不需要继续遍历
 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() // 1

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

map

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

/**
 * map键值索引的是引用地址,
 * 如果是下面这样的写法不好意思,永远得不到值
 * map1.set([1,4,5],'引用地址')
 * map1.get([1,4,5]) //输出为undefined
 * 就像直接访问
 * map1.get([1,2,3,4,5]) //同样为undefined
 */
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()

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

二维数组

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

// 键值数组和value 保持对应关系
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也是可以到达目的,不过自己思考过之后再去看大神的作品理解会更深入一点。

Javascript 相关文章推荐
向fckeditor编辑器插入指定代码的方法
May 25 Javascript
jQuery 表单验证扩展代码(一)
Oct 11 Javascript
jQuery定义背景动态切换效果的方法
Mar 23 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
Mar 31 Javascript
封装获取dom元素的简单实例
Jul 08 Javascript
微信小程序 Image API实例详解
Sep 30 Javascript
JavaScript 继承详解(六)
Oct 11 Javascript
node.js操作MongoDB的实例详解
Oct 11 Javascript
Vue 中axios配置实例详解
Jul 27 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
Apr 17 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
Dec 10 Javascript
JS字符串和数组如何实现相互转化
Jul 02 Javascript
微信小程序提取公用函数到util.js及使用方法示例
Jan 10 #Javascript
浅谈JavaScript 代码简洁之道
Jan 09 #Javascript
react组件从搭建脚手架到在npm发布的步骤实现
Jan 09 #Javascript
微信小程序公用参数与公用方法用法示例
Jan 09 #Javascript
微信小程序实现的日期午别医生排班表功能示例
Jan 09 #Javascript
Windows下Node爬虫神器Puppeteer安装记
Jan 09 #Javascript
jQuery简单实现根据日期计算星期几的方法
Jan 09 #jQuery
You might like
php基于GD库画五星红旗的方法
2015/02/24 PHP
PHP使用mkdir创建多级目录的方法
2015/12/22 PHP
Jquery 基础学习笔记
2009/05/29 Javascript
jQuery之选择组件的深入解析
2013/06/19 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
2013/12/16 Javascript
Javascript实现简单的富文本编辑器附演示
2014/06/16 Javascript
AngularJS入门教程(零):引导程序
2014/12/06 Javascript
AngularJS 最常用的功能汇总
2016/02/17 Javascript
js实现浏览器倒计时跳转页面效果
2016/08/12 Javascript
关于动态执行代码(js的Eval)实例详解
2016/08/15 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
2016/08/24 Javascript
AngularJS 过滤与排序详解及实例代码
2016/09/14 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
2017/06/29 Javascript
vue的toast弹窗组件实例详解
2018/05/14 Javascript
微信小程序页面间值传递的两种方法
2018/11/26 Javascript
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
2019/12/10 Javascript
JavaScript经典案例之简易计算器
2020/08/24 Javascript
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
python实现壁纸批量下载代码实例
2018/01/25 Python
python调用百度语音识别api
2018/08/30 Python
如何使用pyinstaller打包32位的exe程序
2019/05/26 Python
pyqt 实现为长内容添加滑轮 scrollArea
2019/06/19 Python
python自动分箱,计算woe,iv的实例代码
2019/11/22 Python
TensorFlow2.0:张量的合并与分割实例
2020/01/19 Python
使用Python实现牛顿法求极值
2020/02/10 Python
python opencv实现图片缺陷检测(讲解直方图以及相关系数对比法)
2020/04/07 Python
python报错: 'list' object has no attribute 'shape'的解决
2020/07/15 Python
详解使用Python写一个向数据库填充数据的小工具(推荐)
2020/09/11 Python
python 爬虫如何实现百度翻译
2020/11/16 Python
德国骆驼商店:ActiveFashionWorld
2017/11/18 全球购物
运动会四百米广播稿
2014/01/19 职场文书
保密协议书范本
2014/04/22 职场文书
工作经验交流材料
2014/12/30 职场文书
新年晚会主持词开场白
2015/05/28 职场文书
2019年工作总结范文
2019/05/21 职场文书