详解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 相关文章推荐
用javascript实现的激活输入框后隐藏初始内容
Jun 29 Javascript
jQuery中绑定事件的命名空间详解
Apr 05 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
Oct 18 Javascript
JS比较2个日期间隔的示例代码
Apr 15 Javascript
Javascript学习指南
Dec 01 Javascript
JavaScript中的Function函数
Aug 27 Javascript
javascript三种代码注释方法
Jun 02 Javascript
Bootstrap零基础入门教程(二)
Jul 18 Javascript
javascript实现滑动解锁功能
Mar 22 Javascript
解决bootstrap模态框数据缓存的问题方法
Aug 10 Javascript
教你搭建按需加载的Vue组件库(小结)
Jul 29 Javascript
如何在微信小程序中存setStorage
Dec 13 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
discuz图片顺序混乱解决方案
2015/07/29 PHP
摘自织梦CMS的HTTP文件下载类
2015/08/08 PHP
适用于初学者的简易PHP文件上传类
2015/10/29 PHP
Yii编程开发常见调用技巧集锦
2016/07/15 PHP
Laravel5.5以下版本中如何自定义日志行为详解
2018/08/01 PHP
PHP+redis实现的限制抢购防止商品超发功能详解
2019/09/19 PHP
javascript suggest效果 自动完成实现代码分享
2012/02/17 Javascript
input输入框鼠标焦点提示信息
2015/03/17 Javascript
jQuery实现平滑滚动到指定锚点的方法
2015/03/20 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
2015/04/07 Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
2015/04/10 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
2016/02/17 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
2016/05/31 Javascript
AngularJS应用开发思维之依赖注入3
2016/08/19 Javascript
jQuery EasyUI封装简化操作
2016/09/18 Javascript
jQuery UI仿淘宝搜索下拉列表功能
2017/01/10 Javascript
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
webpack将js打包后的map文件详解
2018/02/22 Javascript
JS实现的3des+base64加密解密算法完整示例
2018/05/18 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
2019/02/28 Javascript
[48:29]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS KG
2018/03/31 DOTA
python中reload(module)的用法示例详解
2017/09/15 Python
python实现图书馆研习室自动预约功能
2018/04/27 Python
Django渲染Markdown文章目录的方法示例
2019/01/02 Python
Python txt文件加入字典并查询的方法
2019/01/15 Python
Python代码实现http/https代理服务器的脚本
2019/08/12 Python
python实现在列表中查找某个元素的下标示例
2020/11/16 Python
python re.match()用法相关示例
2021/01/27 Python
极简的HTML5模版
2015/07/09 HTML / CSS
详解HTML5中的picture元素响应式处理图片
2018/01/03 HTML / CSS
《乡下孩子》教学反思
2014/04/17 职场文书
班主任2015新年寄语
2014/12/08 职场文书
政工师工作总结2015
2015/05/26 职场文书
校园运动会广播稿
2015/08/19 职场文书
实习员工转正的评语汇总,以备不时之需
2019/12/17 职场文书
星际争霸:毕姥爷vs解冻03
2022/04/01 星际争霸