详解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...替换方式 ,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

(0)

相关推荐

  • vue.js 使用v-if v-else发现没有执行解决办法

    使用v-if v-else发现没有执行 最近在学习Vue,因为刚开始学习,所以总会遇到这样那样的问题,今天要说的一个错误就是在看Vue的官方文档的时候,发现在使用v-if和v-else指令的时候,相应的内容都出现了 初始代码: <div v-if="Math.random > 0.5"> " Math.random > 0.5 " </div> <div v-else> " Math.random <=

  • jsp自定义标签之ifelse与遍历自定义标签示例

    第一个示例: 简单的jsp自定标签获取内容: 首先创建一个jsp实例类然后继承SimpleTagSupport类 然后实现父类的doTag()方法 在这个方法里获取标签体里的内容this.getJspBody(); 返回的是JspFragment 类,根据这个类对象调用invoke(this.getJspContext().getOut()); 这个方法里面也可以写空,所表达的意思也是输出到浏览器: 复制代码 代码如下: public class SimpleDmeo1 extends Simp

  • js利用与或运算符优先级实现if else条件判断表达式

    复制代码 代码如下: <script type="text/javascript"> /******************************************************************* 利用运算符优先级实现ifelse表达式 result = expression1 && expression2 当且仅当两个表达式的值都等于 True 时, result 才是 True. 如果任一表达式的值等于 False, 则 res

  • JavaScript If...Else 声明

    JavaScript中的条件声明用于完成不同条件下的行为. 条件声明 在你编写代码时,经常需要根据不同的条件完成不同的行为.可以在代码中使用条件声明来完成这个任务. 在JavaScript中,我们可以使用下面几种条件声明: if 声明  在一个指定的条件成立时执行代码.  if...else 声明  在指定的条件成立时执行代码,当条件不成立时执行另外的代码.  if...else if....else 声明  使用这个声明可以选择执行若干块代码中的一个.  switch 声明  使用这个声明可以

  • JS中三目运算符和if else的区别分析与示例

    今天写了一个图片轮播的小demo,用到了判断 先试了一下if else,代码如下: 复制代码 代码如下: if(n >= count-1){ n =0; }else{ n ++; } 随后代码写完了,准备优化一下代码,将此段改成了三目运算符的写法 复制代码 代码如下: n = n >= (count-1) ? n=0 : n++ 结果完全不同 随后研究了一下这两者的区别,总结为一句话:三目运算有返回值,if else没有返回值 做了如下测试: 复制代码 代码如下: var n=1;  if(n

  • js 中的switch表达式使用示例

    前言 switch 这种表达式在很多语言中都有,比如java, C等待, 使用switch比使用if else 来得方便,来得清晰. 使用语法很简单: 复制代码 代码如下: switch(n) { case 1: 执行代码块 1 break; case 2: 执行代码块 2 break; default: n 与 case 1 和 case 2 不同时执行的代码 } 各种语言的使用基本类似. 需要特别提出的时,在java 1.6 及以下版本, 变量(n)只能是整型.在java 7 之后支持Str

  • javascript 从if else 到 switch case 再到抽象

    我的答案是,超过两个 else 的 if ,或者是超过两个 case 的 switch .可是在代码中大量使用 if else 和 switch case 是很正常的事情吧?错!绝大多数分支超过两个的 if else 和 switch case 都不应该以硬编码( hard-coded )的形式出现. 复杂分支从何而来 首先我们要讨论的第一个问题是,为什么遗留代码里面往往有那么多复杂分支.这些复杂分支在代码的首个版本中往往是不存在的,假设做设计的人还是有点经验的话,他应该预见将来可能需要进行扩展

  • 其实你可以少写点if else与switch(推荐)

    前言 作为搬砖在第一线的底层工人,业务场景从来是没有做不到只有想不到的复杂. 不过他强任他强,if-else全搞定,搬就完了.但是随着业务迭代或者项目交接,自己在看自己或者别人的if代码的时候,心情就不再表述了,各自深有体会.所以我们一起看看if还能怎么写 最基本if-else 假设有这么个场景,不同情况下打印不同值. 因为涉及到的条件太多,就不提三目运算之类优化了. if (a == 1) { console.log('a1') } else if (a == 2) { console.log

  • JavaScript中switch判断容易犯错的一个细节

    switch语句与if语句的关系最为密切,也是其它编程语言中普遍使用的一种流程控制语句,但switch的匹配是全等模式,如果不注意这个细节则写程序时往往会出错. 代码: var n = '5'; switch(n){     case 5:         alert('执行case分支');         break;     default:         alert('执行default分支'); } 结果: 可能很多人会误以为以上程序会走case分支,结果却走了default分支.难

  • JavaScript switch case 的用法实例[范围]

    几个例子: 复制代码 代码如下: function case1(num){ switch(num){ case 1: document.writeln("show 1!!"); break; case 2: document.writeln("show 2!!"); break; case 3: document.writeln("show 3!!"); break; default: document.writeln("show ot

随机推荐