js if判断多个条件_JS条件判断小技巧(一)
经常code review,我发现JS newbie很容易写出一堆冗长的代码。今天就列几个比较常见的“解决之道”,看看如何减少JS里的条件判断。
提前返回,少用if...else
“if...else是编程语言的精华。——鲁迅”
但是过多的嵌套,还是挺令人抓狂的。这里有一个很典型的条件嵌套:
function func(){ var result; if( conditionA ) { if( condintionB ) { result = 'Success'; } else { result = 'Error1'; } } else { result = 'Error2' } return result;}
这种嵌套的特点就是else里的代码块很小,但是由于不得不做的分支语句导致多层嵌套。动动脑筋,怎样精简一下呢?在if里做非判断——条件反转,并通过卫语句提前return else分支。
function func(){ if( !conditionA ) { return 'Error2' } if( !condintionB ) { return 'Error1' } return 'Success';}
forEach优化
遍历的时候也经常产生大量的嵌套,如下代码所示,我们先对数组元素做一次合法性校验,通过后再做一次新的操作,最后把操作结果追加到新数组里。
const func = (arr) => { const res = [] arr.forEach( (e) => { if( e !== 'Onion' ){ res.push(`${e} Run!`) } }) return res;}
仔细观察这就是一个filter加map的过程。我们不妨试试函数式编程:
const func = (arr) => { return arr .filer( (e) => e !== 'Onion' ) .map( (e) => `${e} Run!` );}
我自己是一名从事了多年开发的web前端老程序员,目前辞职在做自己的web前端私人定制课程,今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴,想要获取的可以关注我的头条号并在后台私信我:前端,即可免费获取。
多条件,用Array.includes
再举个例子,某个页面需要检验输入type是否合法。我收到过一个MR曾经是这么写的。
const init(type) { if( type === 'Seminar' || type === 'Interview' ) { console.log('valid'); } ... console.error('invalide');}
如果合法的类型只有两种,代码其实也没啥问题。只是一般的业务很容易有后续的延展。今后将合法类型增加到10种的话,上述代码里将是一大长串的if判断。这种代码可读性极差,我们不如转换一下思想,把非法类型储到数组里,用Array.includes来帮你完成冗长的判断。之后每增加一种新的类型,只需在数组后追加新字符串就行了。
const init(type) { const invalidArray = ['Seminar', 'Interview'] if( invalidArray.includes(type) ) { console.log('valid'); } ...}
使用object索引
类似的情况也出现在三元表达式里:
const dateFormat = (dateTime) => { const format = this.$i18n.locale === 'en' ? 'mmm d, yyyy' : 'yyyy年m月d日'; return DateFormat(dateTime, format);}
我们现阶段多语言只有en和zh,上述代码自然不是问题,但是也难保哪天会支持日语——ja。这时候再写成下面这类代码就很搞笑了:
const format = this.$i18n.locale === 'en' ? 'mmm d, yyyy' : (this.$i18n.locale === 'zh' ? 'yyyy年m月d日' : 'yyyy/m/d');
比较合适的写法就是使用object键索引,这样当语言业务扩展后,只需要在localeFormats后追加新格式就行了。
const localeFormats = { en: 'mmm d, yyyy', zh: 'yyyy年m月d日', ja: 'yyyy/m/d',}const format = localeFormats[this.$i18n.locale];
尽量少用swith
长Switch也及其难看。
export function(type) { switch( type ) { case 'Onion': return func1(); case 'Garlic': return func2(); case 'Ginger': return func3(); default: return () => {console.error('ERROR')}; }}
我记得OOP设计模式里提到过:尽量使用多态和继承代替Switch结构。JS里倒不必非得往这方面想,用Object或是Map索引来代替Switch也是极好滴!
const arr = [ ['Onion', func1], ['Garlic', func2], ['Ginger', func3],]const def = () => {console.error('ERROR')}const vegetable = new Map(arr);export function(type) { return ( vegetable.get(type) || def ).call(null);}
Optional Chaining
Optional Chaining(以下简称OC)是我极力推荐的一个语法糖。我写过一期《Javascript Optional Chaining》具体介绍它的用法,有兴趣的小伙伴可以看一看,这里稍微点一下。比如我们想获取地址里的街道信息,但是并不确定地址本身是否存在,因此只能在获取街道前,事先判断一下地址合法性,一般我们会这么写:
if( address ) { var street = address.street;}
但假如再多一层呢,从basicInfo.address.street这样找下来呢?
if( basicInfo ) { var address = basicInfo.address; if( address ) { var street = address.street; }}
上面的代码我已经觉得很丑陋了,再多个几层真是没法看了。不过不用担心,有了OC一切迎刃而解。(虽然OC还在ECMAScript stage2,但是大家可以用babel尝鲜;babel会自动把如下源码转义成上面的形式)
var street = basicInfo?.address?.street;
写在最后
自学过几种编程语言,我感觉这类小技巧在各类语言中大同小异;实现上也许有细微差别,但基本思想都是一样的——减少大括号的数量!!
我在面试的时候经常看到一些人写代码及其冗长,嵌套极多。我提醒后,得到的回复一般是:“我没做过这种面试”,“我熟悉的是另外一种语言”等等。回过头来再想想,这真的是好理由吗?
作者:anOnion
链接:https://www.jianshu.com/p/a196f976cdd0
js if判断多个条件_JS条件判断小技巧(一)相关推荐
- vue.js bootstrap 下拉列表_Excel下拉菜单制作的小技巧
在工作中,常常需要对多行多列的数据设置下拉菜单,但在使用数据验证,设置下拉菜单时,序列来源是不能执行引用多行多列区域的,否则即会出现下图提示框,应该如何进行设置呢? 第一步:定义名称框 鼠标依次点击公 ...
- java 判断手机运营商_JS正则表达式判断手机号所属运营商
根据用户的输入手机号码判断该号的运营商是移动.联通.电信或其他,再根据不同的运营商做出相应的处理,下面介绍js中如何判断手机号的运营商的代码电话号码是电话管理部门为电话机设定的号码.一般7--8位数组 ...
- java判断是否为数组_JS如何判断是否是数组?
1.通过instanceof判断 instanceof运算符用于检验构造函数的prototype属性是否出现在对象的原型链中的任何位置,返回一个布尔值. let a = []; a instanceo ...
- if js 判断成绩等级_JS 条件语句
在编写 js 的过程中,我们肯定会用到条件语句. 常用的 if...else 大部分的条件语句都是用 if...else,适用于"非黑即白"的情况: 场景一:是否登录 根据不同的登 ...
- php页面添加js判断语句,JavaScript中if条件语句怎么使用
JavaScript中的if可实现条件分支也就是条件语句,所以,接下来的这篇文章就来给大家介绍关于JavaScript中if条件语句的用法,下面我们来看具体内容. 我们先来看看条件分支(if语句)语句 ...
- vue 判断是否位 float_VUE中条件注释法css,判断ie浏览器
float的css等样式,在ie中有些低版本浏览器不会生效,所以可以采用以下办法解决, vue中,条件注释法判断ie9及ie9以下浏览器,使用css 但是打包之后,css在js中 所以,ie9及ie9 ...
- python的列表的remove()方法、判断if xxx in xx条件比较耗时问题
最近在coding的时候,写的代码中只有一层循环,却很耗时,不明觉厉.不知道是哪里出了问题,于是我就在每一行代码中都打印一下耗时,最终发现了这个罪魁祸首.这里我只说明两个我遇到耗时的场景,当然还有很多 ...
- php switch 函数,PHP丨PHP基础知识之条件语SWITCH判断「理论篇」
Switch在一些计算机语言中是保留字,其作用大多情况下是进行判断选择.以PHP来说,switch(开关语句)常和case break default一起使用 典型结构 switch($control ...
- 1.4编程基础之逻辑表达式与条件分支 01判断数正负
http://noi.openjudge.cn/ch0104/01/ /* 1.4编程基础之逻辑表达式与条件分支 01判断数正负 http://noi.openjudge.cn/ch0104/01/ ...
最新文章
- golang 编译后文件过大问题处理
- 动图与数据同步关系研究
- no.8 C控制语句:循环 01
- c++反汇编与逆向分析
- 在苏州的一个超级棒的事情
- 【Python】强烈建议你学这 3 个 Python AutoEDA 工具包!
- RabbitMQ入门(五)-Topics(主题)
- 使用UTL_FILE在oracle中读写文本数据
- 用Jackson进行Java JSON处理
- 奇怪的电梯(信息学奥赛一本通-T1360)
- 0基础学java可行吗_上海0基础学JAVA可行吗?
- 第一周:半导体器件基础(一)
- 360 一个让人又爱又恨的公司
- Linux 系统调用深思:从原理到实战
- Qt 事件过滤器(秒懂)
- MySqlException(0x80004005) 报错
- windows mysql 学习笔记 第八天
- 六大搜索技巧,提升学习工作效率
- 网络分析仪自动化测试软件,基于Agilent PNA系列网络分析仪实现脉冲器件自动测试系统的设计...
- 第二篇 - 设计篇:静馨舍app功能设计
热门文章
- intellij 使用_使用IntelliJ书签
- java命令行参数工具_Java方法中的参数太多,第8部分:工具
- 詹金斯搭建_詹金斯的Maven报告
- 借助财务客户评估解决方案在云中构建AppDev
- lucene索引搜索_Lucene –快速添加索引和搜索功能
- cargo maven_用于集成测试的Maven Cargo插件
- 使用Spring Cloud休息客户电话
- SonarQube中的Maven项目的单元和集成测试报告
- Hibernate中的JPA 2.1条件删除/更新和临时表
- Spring测试上下文缓存+ AspectJ @Transactional + Ehcache的痛苦