详解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 相关文章推荐
js判断鼠标同时离开两个div的思路及代码
May 31 Javascript
密码框显示提示文字jquery示例
Aug 29 Javascript
js 上下左右键控制焦点(示例代码)
Dec 14 Javascript
JavaScript 封装一个tab效果源码分享
Sep 15 Javascript
AngularJS基础 ng-list 指令详解及示例代码
Aug 02 Javascript
Bootstrap Navbar Component实现响应式导航
Oct 08 Javascript
Canvas 制作动态进度加载水球详解及实例代码
Dec 09 Javascript
利用Javascript开发一个二维周视图日历
Dec 14 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
Apr 22 Javascript
js实现星星海特效的示例
Sep 28 Javascript
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
关于对TypeScript泛型参数的默认值理解
Jul 15 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
jquery 全局AJAX事件使用代码
2010/11/05 Javascript
JavaScript类型转换方法及需要注意的问题小结(挺全面)
2010/11/11 Javascript
jquery 插件学习(六)
2012/08/06 Javascript
使用Node.js实现HTTP 206内容分片的教程
2015/06/23 Javascript
jquery Easyui快速开发总结
2015/08/20 Javascript
js小数运算出现多位小数如何解决
2015/10/08 Javascript
Bootstrap学习笔记之环境配置(1)
2016/12/07 Javascript
JS中的数组转变成JSON格式字符串的方法
2017/05/09 Javascript
JS实现字符串中去除指定子字符串方法分析
2018/05/17 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
2018/05/26 jQuery
React-router4路由监听的实现
2018/08/07 Javascript
js html实现计算器功能
2018/11/13 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
2019/04/23 Javascript
JavaScript实现单点登录的示例
2020/09/23 Javascript
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
Python基于Tkinter实现的记事本实例
2015/06/17 Python
Python中is和==的区别详解
2018/11/15 Python
Django url,从一个页面调到另个页面的方法
2019/08/21 Python
详解基于python-django框架的支付宝支付案例
2019/09/23 Python
python提取xml里面的链接源码详解
2019/10/15 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
django 数据库 get_or_create函数返回值是tuple的问题
2020/05/15 Python
使用phonegap检测网络状态的方法
2017/03/30 HTML / CSS
美国最好的保健品打折网店:Swanson
2017/08/04 全球购物
阿姆斯特丹杜莎夫人蜡像馆官方网站:Madame Tussauds Amsterdam
2019/03/12 全球购物
俄语地区最大的中国商品在线购物网站之一:Umka Mall
2019/11/03 全球购物
Python文件操作的面试题
2013/06/22 面试题
英语专业学子个人的自我评价
2013/10/02 职场文书
酒后驾驶检讨书
2014/01/27 职场文书
总经理的岗位职责
2014/02/23 职场文书
岗位聘任书范文
2014/03/29 职场文书
三好学生演讲稿范文
2014/04/26 职场文书
学习张丽丽心得体会
2014/09/03 职场文书
教师工作失职检讨书
2014/09/18 职场文书
公安局负责人查摆问题及整改方案
2014/09/27 职场文书
Python GUI编程之tkinter 关于 ttkbootstrap 的使用详解
2022/03/03 Python