其实你可以少写点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 相关文章推荐
点击下载链接 弹出页面实现代码
Oct 01 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
Sep 09 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
May 10 Javascript
javascript实现字符串反转的方法
Feb 05 Javascript
jQuery实现仿Google首页拖动效果的方法
May 04 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
Aug 05 Javascript
JS动态添加iframe的代码
Sep 14 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
May 09 Javascript
基于JS实现checkbox全选功能实例代码
Oct 31 Javascript
基于bootstrap的选择框插件icheck
Dec 23 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
Apr 24 Javascript
vue+elementUI实现图片上传功能
Aug 20 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跨时区(UTC时间)应用解决方案
2013/01/11 PHP
PHP中session变量的销毁
2014/02/27 PHP
iOS自定义提示弹出框实现类似UIAlertView的效果
2016/11/16 PHP
基于php编程规范(详解)
2017/08/17 PHP
javascript 全角转换实现代码
2009/07/17 Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
2013/03/19 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
2013/12/28 Javascript
JavaScript函数的4种调用方法详解
2014/04/22 Javascript
jQuery 删除/替换DOM元素的几种方式
2014/05/20 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
jquery遍历函数siblings()用法实例
2015/12/24 Javascript
Jquery判断form表单数据是否变化
2016/03/30 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
2016/07/24 Javascript
vue拦截器Vue.http.interceptors.push使用详解
2017/04/22 Javascript
jQuery模拟爆炸倒计时功能实例代码
2017/08/21 jQuery
使用Vue完成一个简单的todolist的方法
2017/12/01 Javascript
详解Vue.js项目API、Router配置拆分实践
2018/03/16 Javascript
微信小程序实现美团菜单
2018/06/06 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
2020/10/12 Javascript
Python的净值数据接口调用示例分享
2016/03/15 Python
python实现简单爬虫功能的示例
2016/10/24 Python
python并发2之使用asyncio处理并发
2017/12/21 Python
《与孩子一起学编程》python自测题
2018/05/27 Python
Python判断两个文件是否相同与两个文本进行相同项筛选的方法
2019/03/01 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
利用Python实现Shp格式向GeoJSON的转换方法
2019/07/09 Python
基于python使用tibco ems代码实例
2019/12/20 Python
Timberland美国官网:全球领先的户外品牌
2016/08/15 全球购物
初一地理教学反思
2014/01/16 职场文书
人力资源管理专业应届生求职信
2014/04/24 职场文书
乡镇党建工作汇报材料
2014/08/14 职场文书
公司授权委托书样本
2014/09/15 职场文书
幼儿园教师节感谢信
2015/01/23 职场文书
跟班学习心得体会(共6篇)
2016/01/23 职场文书
奖学金发言稿(范文)
2019/08/21 职场文书
《王者天下》第4季首话新剧照 4月9日正式开播
2022/04/07 日漫