详解JavaScript 中 if / if...else...替换方式


Posted in Javascript onJuly 15, 2018

详解JavaScript 中 if / if...else...替换方式

说说烂大街的if/if...else...,程序中用得最多的流程判断语句。

对着曾经满屏的if/if...else...,心想能不能搞点事情,折腾点浪花浪里呀浪。

对顶着“这个需求很简单,怎么实现我不管,明天上线”的程序猿,答案必须YES。

"Write Less, Do More",学习进步的本质就是为了更有效率地偷懒。

废话说完,直接上方法汇总,让我们来一窥究竟:

switch改写if

// if 版本
var a = 1;
if(a > 1 && a < 5) {
 return 1
} else if(a > 5 && a < 10){
 return 5
}else{
 return 10
}

// switch 改版
switch(true){
 case (a > 1 && a < 5):
  return 1
 case (a > 5 && a < 10):
  return 5
 default:
  return 10
}

以上代码的switch...case...的用法实际使用不多,仅供参考。
 一般case为常量时switch...case...用得较多。

选择分支较多时,建议选用switch…case可提高程序的效率,但switch...case不足的地方在于只能处理字符或者数字类型的变量,if…else更加灵活,可用于判断表达式是否成立,比如if(a+b>c),if…else的应用范围更广。

三元运算符改写if

// if 版本
if (bool) {
 value = 1;
} else {
 value = 2;
}

// 三元运算符 版本
value = bool ? 1 : 2;
// 三元预算符 多个运算需要括号包裹 此处用了逗号表达式
return typeof foo === 'object'?(console.log(1),1):(console.log(2),2);

优点:代码简化,更加清爽,write less

缺点:复杂的三元运算符可读性较差,需友好注释

TIPS: 三元运算符后面不能带return
// 错误用法,运算符号后不能带return
bool ? return 1 : return 2;

逻辑判断 and(&&)和or(||) 改写if

原理:利用逻辑判断的短路运算来实现

短路:&& 中第一个表达式为假就不会去处理第二个表达式,|| 则相反

// if为真
if (bool) {
 value = getYes();
}
// &&改版
bool && (value = getYes());

// if为假
if (!bool) {
 value = getNo();
}
bool || (value = getNo());

优点:代码简化,更加清爽,write less

缺点:适用于简单判断逻辑,复杂的判断运算可读性较差,需友好注释

TIPS:适用于没有else的场景, 逻辑运算符后面不能带return

// 错误用法,运算符号后不能带return
boll || return true;

--------------------------------------------------------------------------------

知识点插播 —— (1)

1.三元运算符和逻辑运算符都有一层return作用,但不可作用于函数return语句,所以像以下这种用法都是错误的;

// 错误用法
function getResult(value) {
 value ? 'yes' : 'no';
}
var result = getResult(true); // 并不会有值返回
1.js逻辑运算中,0/""/null/false/undefined/NaN都会判为false,其它都为true;
2.很多开源代码中可见if(!!attr),为什么不直接写if(attr), 其实这是一种更严谨的写法,!!attr会强制转化为boolean类型。typeof !!attr == true 比 typeof attr == true 更加严谨。
--------------------------------------------------------------------------------
对象属性
// if版本
if (a == 1) {
 return 'one';
} else if (a == 2) {
 return 'two';
} else if (a == 3) {
 return 'three';
} else {
 return '';
}
// 对象属性 改版
var ret = {
 1: 'one',
 2: 'two',
 3: 'three'
};
return ret[a] ? ret[a] : '';
TIPS:

1.判断值需为确定值,如== ,其它如>=/<=/>/<不适用
2.条件作为对象属性,需要注意对象属性的读取方式

--------------------------------------------------------------------------------

知识点插播 —— (2)

JS的命名规则(变量的命名规则)

•标识符只能由字母、数字、下划线和‘$'组成
•数字不可以作为标识符的首字符

对象属性的命名规则

•通过[]操作符为对象添加属性时,属性名可以是任何字符串(包括只包含空格的字符串和空字符串);
•通过.操作符为对象添加属性时,属性名必须是合法的标识符名称;
•如果属性名包含非法的标识符字符,则只能采用obj[“propertyName”]的形式;
•如果属性名是合法的标识符,读取时可采用obj.propertyName或obj[“propertyName”]的形式;

--------------------------------------------------------------------------------

策略模式

策略模式:定义一系列的算法,把它们一个个封装起来,目的就是将算法的使用与算法的实现分离开来

以下为常见的表单验证,用策略模式来构建,替换if...else的方式

// html
<form id = "registerForm" method="post" action="http://xxxx.com/api/register">
 用户名:<input type="text" name="userName">
 密码:<input type="text" name="password">
 手机号码:<input type="text" name="phoneNumber">
 <button type="submit">提交</button>
</form>
// js
// 策略对象
var strategies = {
 isNoEmpty: function (value, errorMsg) {
  if (value === '') {
   return errorMsg;
  }
 },
 isNoSpace: function (value, errorMsg) {
  if (value.trim() === '') {
   return errorMsg;
  }
 },
 minLength: function (value, length, errorMsg) {
  if (value.trim().length < length) {
   return errorMsg;
  }
 },
 maxLength: function (value, length, errorMsg) {
  if (value.length > length) {
   return errorMsg;
  }
 },
 isMobile: function (value, errorMsg) {
  if (!/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|17[7]|18[0|1|2|3|5|6|7|8|9])\d{8}$/.test(value)) {
   return errorMsg;
  }    
 }
}
// 验证类
var Validator = function() {
 this.cache = [];
}
Validator.prototype.add = function(dom, rules) {
 var self = this;
 for(var i = 0, rule; rule = rules[i++];) {
  (function(rule) {
   var strategyAry = rule.strategy.split(':');
   var errorMsg = rule.errorMsg;
   self.cache.push(function() {
   var strategy = strategyAry.shift();
   strategyAry.unshift(dom.value);
   strategyAry.push(errorMsg);
   return strategies[strategy].apply(dom, strategyAry);
   })
  })(rule)
 }
};
Validator.prototype.start = function() {
 for(var i = 0, validatorFunc; validatorFunc = this.cache[i++];) {
  var errorMsg = validatorFunc();
  if (errorMsg) {
   return errorMsg;
  }
 }
};
// 调用代码
var registerForm = document.getElementById('registerForm');
var validataFunc = function() {
 var validator = new Validator();
 validator.add(registerForm.userName, [{
  strategy: 'isNoEmpty',
  errorMsg: '用户名不可为空'
 }, {
  strategy: 'isNoSpace',
  errorMsg: '不允许以空白字符命名'
 }, {
  strategy: 'minLength:2',
  errorMsg: '用户名长度不能小于2位'
 }]);
 validator.add(registerForm.password, [ {
  strategy: 'minLength:6',
  errorMsg: '密码长度不能小于6位'
 }]);
 validator.add(registerForm.phoneNumber, [{
  strategy: 'isMobile',
  errorMsg: '请输入正确的手机号码格式'
 }]);
 var errorMsg = validator.start();
 return errorMsg;
}
registerForm.onsubmit = function() {
 var errorMsg = validataFunc();
 if (errorMsg) {
  alert(errorMsg);
  return false;
 }
}

•第一个部分是一组策略类,策略类封装了具体的算法,并负责具体的计算过程;
•第二个部分是环境类Context,该Context接收客户端的请求,随后把请求委托给某一个策略类;

优点:

1.有效避免多重条件选择语句
2.提供了对外开放 - 封装原则的完美支持,将方法封装在独立的strategy中,使得它们易于切换、易于理解、易于扩展。
3.复用性

缺点:

1.增加了策略类/对象的使用
2.使用策略模式,必须先了解所有的strategy,违反了最少知识原则

总结

以上所述是小编给大家介绍的JavaScript 中 if / if...else...替换方式 ,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
删除重复数据的算法
Nov 23 Javascript
基于jquery的Repeater实现代码
Jul 17 Javascript
jquery获取div距离窗口和父级dv的距离示例
Oct 10 Javascript
Javascript delete 引用类型对象
Nov 01 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
Nov 29 Javascript
js 动态修改css文件的方法
Aug 05 Javascript
优化RequireJS项目的相关技巧总结
Jul 01 Javascript
如何在Angular.JS中接收并下载PDF
Nov 26 Javascript
jQuery向webApi提交post json数据
Jan 16 Javascript
ES6中Iterator与for..of..遍历用法分析
Mar 31 Javascript
vue自定v-model实现表单数据双向绑定问题
Sep 03 Javascript
javascript利用键盘控制小方块的移动
Apr 20 Javascript
简述JS控制台的使用
Jul 15 #Javascript
简述JS浏览器的三种弹窗
Jul 15 #Javascript
Vue路由钩子之afterEach beforeEach的区别详解
Jul 15 #Javascript
js+SVG实现动态时钟效果
Jul 14 #Javascript
vue实现通讯录功能
Jul 14 #Javascript
微信小程序自定义组件实现tabs选项卡功能
Jul 14 #Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
Apr 21 #Javascript
You might like
php4的彩蛋
2006/10/09 PHP
php中文字母数字验证码实现代码
2008/04/25 PHP
PHP运行时强制显示出错信息的代码
2011/04/20 PHP
PHP网站备份程序代码分享
2011/06/10 PHP
php字符串分割函数explode的实例代码
2013/02/07 PHP
在视频前插入广告
2006/11/20 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
2015/11/04 Javascript
javascript实现拖动元素交换位置
2015/11/29 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
2016/03/25 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
2016/09/17 Javascript
基于vue循环列表时点击跳转页面的方法
2018/08/31 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
2018/09/19 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
2019/01/03 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
2019/04/17 Javascript
JavaScript基于用户照片姓名生成海报
2020/05/29 Javascript
[05:26]2014DOTA2西雅图国际邀请赛 iG战队巡礼
2014/07/07 DOTA
[55:25]2018DOTA2亚洲邀请赛3月29日 小组赛A组 VG VS OG
2018/03/30 DOTA
[42:06]2019国际邀请赛全明星赛 8.23
2019/09/05 DOTA
[01:04:31]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第二场 1月8日
2021/03/11 DOTA
python动态监控日志内容的示例
2014/02/16 Python
详解使用python的logging模块在stdout输出的两种方法
2017/05/17 Python
对Python中内置异常层次结构详解
2018/10/18 Python
python3.6 tkinter实现屏保小程序
2019/07/30 Python
python 生成器和迭代器的原理解析
2019/10/12 Python
完美解决Django2.0中models下的ForeignKey()问题
2020/05/19 Python
python定义类的简单用法
2020/07/24 Python
python对 MySQL 数据库进行增删改查的脚本
2020/10/22 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
最新的小工具和卓越的产品设计:Oh That Tech!
2019/08/07 全球购物
eBay比利时购物网站:eBay.be
2019/08/09 全球购物
业务副厂长岗位职责
2014/01/03 职场文书
中学生综合素质自我评价
2015/03/06 职场文书
通用员工手册范本
2015/05/14 职场文书
解决golang 关于全局变量的坑
2021/05/06 Golang