JavaScript中判断的优雅写法示例
前言
我们在写 JavaScript 时经常遇到一些逻辑判断,可以使用 if/else 或者 switch 来实现,但是对于复杂的判断,过多的条件往往会让我们的代码变得冗长,可读性下降。故我们需要优化我们的代码,使之更优雅💎。
一、一元判断
1.1 举个例子🌰
我们写一个常见的 if/else 判断的函数,然后对他进行优化。
const myFunction = (status) => { if (status === 1) { console.log("status1"); } else if (status === 2) { console.log("status2"); } else if (status === 3) { console.log("status3"); } };
1.2 放入 Object 中
我们知道, JavaScript 的 Object 其实就是一些 键值对 的无序集合,正因如此我们可以借助其存放判断的条件。例如上述情况,判断条件是一个数字类型,后续操作也仅仅是用到了一个字符串,这时我们就可以创建一个对象,把所用到的数字和字符串分别作为 Object 的键名和对应值。
// 将判断条件放入 Object 中 const statusObj = { 1: "status1", 2: "status2", 3: "status3", }; // 优化后函数💎 const myFunction = (status) => { console.log(statusObj[status]); };
1.3 放入 Map 中
除了原始对象以外,我们还可以使用 Map 对象。我们来看下 MDN 对其的描述:
Map 对象保存键值对,并且能够记住键的原始插入顺序。任何值(对象或者原始值) 都可以作为一个键或一个值。
不难看出,Map 对象其实就是普通对象的加强版,特别是任何值都可以作为其键值对,这意味着 函数 、 正则 等也可以作为其键或值,这也就大大方便了我们将其作为判断的操作。具体关于 Map 对象的细节此处不再展开。
// 将判断条件放入 Map 中 const statusMap = new Map([ [1, "status1"], [2, "status2"], [3, "status3"], ]); // 优化后函数💎 const myFunction = (status) => { console.log(statusMap.get(status)); };
二、多元判断
2.1 举个例子🌰
既然一元判断可以优化,那么多元判断也可以进行优化,下面是有两种判断条件的案例。
// 举个例子🌰 const myFunction = (right, status) => { if (right === "administrator" && status === 1) { console.log("管理员喜欢王冰冰"); } else if (right === "administrator" && status === 2) { console.log("管理员不喜欢王冰冰"); } else if (right === "user" && status === 1) { console.log("用户喜欢王冰冰"); } else if (right === "user" && status === 2) { console.log("用户不喜欢王冰冰"); } }; // 有重复情况的例子🌰 const myFunction = (right, status) => { if (right === "administrator" && status === 1) { console.log("管理员喜欢王冰冰"); } else if (right === "administrator" && status === 2) { console.log("管理员喜欢王冰冰"); } else if (right === "user" && status === 1) { console.log("用户喜欢王冰冰"); } else if (right === "user" && status === 2) { console.log("用户喜欢王冰冰"); } };
2.2 将判断条件拼成字符串放入 Object 中
两种情况也同样可以用 Object 进行优化。
// 优化"例子🌰" // 将判断条件放入 Object 中 const actionsObj = { "administrator-1": "管理员喜欢王冰冰", "administrator-2": "管理员不喜欢王冰冰", "user-1": "用户喜欢王冰冰", "user-2": "用户不喜欢王冰冰", }; // 优化后函数💎 const myFunction = (right, status) => { console.log(actionsObj[`${right}-${status}`]); }; // 可以将函数作为"value",以下几种情况类似,不再赘述🥕 const actionsObj = { "administrator-1": () => console.log("管理员喜欢王冰冰"), "administrator-2": () => console.log("管理员喜欢王冰冰"), "user-1": () => console.log("管理员喜欢王冰冰"), "user-2": () => console.log("管理员喜欢王冰冰"), }; // 优化后函数💎 const myFunction = (right, status) => { actionsObj[`${right}-${status}`](); }; // 优化"有重复情况的例子🌰" // 可以提取公共函数,以下几种情况类似,不再赘述🍓 const actions = () => { const f1 = () => console.log("管理员喜欢王冰冰"); const f2 = () => console.log("用户喜欢王冰冰"); return { "administrator-1": f1, "administrator-2": f1, "user-1": f2, "user-2": f2, }; }; // 优化后函数💎 const myFunction = (right, status) => { actions()[`${right}-${status}`](); };
2.3 将判断条件拼成字符串放入 Map 中
同样的,我们也可以用 Map 对象。我们把两个条件存成字符串。
// 优化"例子🌰" // 将判断条件放入 Map 中 const actionsMap = new Map([ ['administrator-1', '管理员喜欢王冰冰'], ['administrator-2', '管理员不喜欢王冰冰'], ['user-1', '用户喜欢王冰冰'], ['user-2', '用户不喜欢王冰冰'] ]); // 优化后函数💎 const myFunction = (right, status) => { console.log(actionsMap.get(`${right}-${status}`)); };
2.4 将判断条件放入 Object 后再放入 Map 中
// 优化"例子🌰" // 将判断条件放入 Map 中 const actionsMap = new Map([ [{ right: 'administrator', status: 1 }, () => console.log('管理员喜欢王冰冰')], [{ right: 'administrator', status: 2 }, () => console.log('管理员不喜欢王冰冰')], [{ right: 'user', status: 1 }, () => console.log('用户喜欢王冰冰')], [{ right: 'user', status: 2 }, () => console.log('用户不喜欢王冰冰')] ]); // 优化后函数💎 const myFunction = (right, status) => { const action = [...actionsMap].filter(([e]) => (e.right === right && e.status === status)); action.forEach(([_, index]) => index.call()); };
2.5 将判断条件写成 正则 后再放入 Map 中
利用正则表达式可以处理相对复杂一点的情况。
// 优化"有重复情况的例子🌰" // 将判断条件写成 正则 后再放入 Map 中 const actions = () => { const f1 = () => console.log('管理员喜欢王冰冰'); const f2 = () => console.log('用户喜欢王冰冰'); return new Map([ [/^administrator-[1-2]/, f1], [/^user-[1-2]/, f2] ]); }; // 优化后函数💎 const myFunction = (right, status) => { const action = [...actions()].filter(([e]) => e.test(`${right}-${status}`)); action.forEach(([_, index]) => index.call()); };
结语
我们利用原生 Object 和 Map 对象对判断进行了优化,不过在真正的开发过程中,我们还是要遵循 实用优先 的原则,避免过度优化。
到此这篇关于JavaScript中判断的优雅写法的文章就介绍到这了,更多相关JavaScript判断优雅写法内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要介绍了js如何实现浏览器打印功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 作为前端,一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手,前端能做的太少。而且由于源码的暴露,攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的,本文的许多方法,用在其他方面也是大有作用。...2021-05-24
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 使用 conditional comment 来判断 IE 的版本。嗯,是早早有人提出,但没有认真看代码。昨天刚好在看 CSS3 PIE 的时候看到,觉得是不是不靠谱。今天看到 Paul Irish 也提起,那么,推荐一下吧。这是作者博客上写的:复制代码 代码...2014-05-31
- 那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签...2016-01-02
- 这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮,感兴趣的小伙伴们可以参考一下...2016-03-03
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
- 下面小编就为大家分享一篇c# 判断是否为空然后赋值的4种实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-06-25
- 这篇文章主要给大家介绍了一个关于JS正则匹配的踩坑记录,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-13
- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-06
- 这篇文章主要介绍了如何使用JavaScript实现“无缝滚动 自动播放”轮播图效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-08-20
- 这篇文章主要为大家详细介绍了js实现列表按字母排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-11
- 这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
- 为了网站的安全性,很多朋友都把密码设的比较复杂,但是如何密码不能明显示,不知道输的是对是错,为了安全起见可以把密码显示的,那么基于js代码如何实现的呢?下面通过本文给大家介绍JavaScript实现表单密码的隐藏和显示,需要的朋友参考下...2016-03-03
- 这篇文章主要介绍了JS实现响应鼠标点击动画渐变弹出层效果代码,具有非常自然流畅的动画过度效果,涉及JavaScript针对鼠标事件的响应及页面元素样式的动态操作相关技巧,需要的朋友可以参考下...2016-03-28