Javascript简写条件语句(推荐)


Posted in Javascript onJune 12, 2016

经常在各处牛人的代码中看到许多简写的条件表达语句,看了一些介绍这方面的文章,觉得3 ways 2 say if这篇文章(http://www.thomasfrank.se/3_ways_2_say_if.html)还不错。在这篇文章中作者对传统的if...else...、?:、&&/||三种条件表达的写法的特点及用处进行了总结归纳,简述如下:

1. if...else结构

// Set r to 0 or 1 
var r= Math.floor(2*Math.random()) 
 
// Set a, b and c to "small" if r==0 an else set them to "big" 
// using three different techniques 
 
// Method 1: If else 
var a; if (r==0){a = "small"} else {a = "big"}; 
 
// Method 2: Conditional operator 
var b = r==0 ? "small" : "big"; 
 
// Method 3: And/or operators 
var c = r==0 && "small" || "big"; 
 
// Check the values of our variables 
alert(r+" "+a+" "+b+" "+c);

2. if...else if...else结构

// Set r to 0,1,2 or 3 
var r= Math.floor(4*Math.random()) 
 
// Set a, b and c to "nada","small","big" and "huge" 
// depending on the value or r using three different techniques 
 
// Method 1: If.. else if... else 
var a; 
if (r==0){a="nada"} 
else if (r==1){a="small"} 
else if (r==2){a="big"} 
else {a="huge"}; 
 
// Method 2: Conditional operators 
var b = 
r==0 ? "nada" 
: r==1 ? "small" 
: r==2 ? "big" 
: "huge"; 
 
// Method 3: And/or operators 
var c = 
r==0 && "nada" 
|| r==1 && "small" 
|| r==2 && "big" 
|| "huge"; 
 
// Check the values of our variables 
alert(r+" "+a+" "+b+" "+c);

3. 执行函数

// Set r to 0,1,2 or 3 
var r= Math.floor(4*Math.random()) 
 
// The global variable x and our four functions 
var x=""; 
nada=function(){x+="Nada! "}; 
small=function(){x+="Small! "}; 
big=function(){x+="Big! "}; 
huge=function(){x+="Huge! "}; 
 
// Call a specific function depending on the value of r 
// using three different techniques 
 
// Method 1: If.. else if... else 
if (r==0){nada()} 
else if (r==1){small()} 
else if (r==2){big()} 
else {huge()}; 
 
// Method 2: Conditional operators 
r==0 ? nada() 
: r==1 ? small() 
: r==2 ? big() 
: huge(); 
 
// Method 3: And/or operators 
r==0 && (nada() || true) //nada()函数不一定返回true,为了保证后续的逻辑或||判断不被执行,需要返回true值,下同
|| r==1 && (small() || true) 
|| r==2 && (big() || true) 
|| huge(); 
 
// Check the values of our variables 
alert(r+" "+x);

4. 执行代码

// Set r to 0,1,2 or 3 
var r= Math.floor(4*Math.random()) 
 
// The global variable x 
var x=""; 
 
// Executing different code depending on the value of r 
// using three different techniques 
 
// Method 1: If.. else if... else 
if (r==0){x+="Nada! "} 
else if (r==1){x+="Small! "} 
else if (r==2){x+="Big! "} 
else {x+="Huge! "}; 
 
// Method 2: Conditional operators 
r==0 ? function(){x+="Nada! "}() 
: r==1 ? function(){x+="Small! "}() 
: r==2 ? function(){x+="Big! "}() 
: function(){x+="Huge! "}(); 
 
// Method 3: And/or operators 
r==0 && (function(){x+="Nada! "}() || true) 
//有人在评论中指出这里的匿名函数是不必需的,在只有一条可执行代码时是这样的,但是如果有多条代码需要执行,匿名函数还是不错的
|| r==1 && (function(){x+="Small! "}() || true) 
|| r==2 && (function(){x+="Big! "}() || true) 
|| function(){x+="Huge! "}(); 
 
// Check the values of our variables 
alert(r+" "+x);

在这篇网文中,作者的关注重心是代码的简短与否,所以在一般情况下实现同等功能,作者更倾向于使用?:运算符,而觉得&&和||的方式要多打几个字母,因而显得比较累赘。在执行函数的情况下,使用传统的if...else更方便。在它的评论中有人提出,让Client端代码更简洁短小作用大过提高一些不起眼的运行效率,这一点从某种程序上来说也是正确的。所以从形式上选取一种更简洁的形式处理条件语句,可能比这些语句本身的运行效率更为重要,何况运行效率还会因UA而异。

在只存在两种条件的判断中,用if...else或?:都是相当直白,而&&和||的运算方式就稍嫌复杂。但是其实只要明白以下两个基本原则,所有问题都会迎刃而解了:

其一、当用逻辑与&&和逻辑或||运算符运算时,方向都是自左向右的,&&运算到第一个值为false的条件(或可转换为false的值,如null/undefined/0/""/NaN等)时停止,而运算到第一个值为true的条件(或可转换为true的值)时停止;整个条件返回的值是最后检测的条件的值,不一定只是true/false。

其二、逻辑与&&运算符较逻辑或运算符相比,前者有更高的优先级。

根据第一个原则,r==0和"small"按自左向右的顺序计算,如果r==0为true,则检测"small","small"为非空字符串,故这样c取值为"small";如果r==0为false,则直接开始逻辑或||的第二个条件"big"检测,同样的道理,c应当取值为"big"。根据第二个原则,在对上述代码中的变量c的运算过程中,没有必要加括号。

由于使用?:和&&、||运算符在一定程序上能起到精简代码的作用,在jQuery这样的库源代码中非常重要。归纳起来,这类运算符主要有两方面的应用,一是赋值或返回值,二是执行代码(暂且这样分类)。

用于赋值的用法在jQuery或其他库中比比皆是,一个经典应用就是为接口实现默认值的功能,我们可以很容易写出这样的代码来,如:

var myObj = function(options) {
  var color = options.color || this.defaults.defaults;
  var backgroundColor = options.backgroundColor
      || this.defaults.backgroundColor;
};
myObj.prototype.defaults = {
  color : "#393939",
  backgroundColor : "#222"
}
var myIns = new myObj({
  color : "#80FF80"
});
console.log("color:"+myIns.color+", backgroundColor: "+myIns.backgroundColor);

不管用?:还是&&和||,由于不具备if...else与生俱来的代码块功能(用{}号包裹),所以它们都仅能执行单行代码,如:

(xmlHttpRequest.readyState==4 && xmlHttpRequest.status ==200) ? alert("Success!"): alert("Failure!");

所以如果有多条代码需要执行,就应该用匿名函数。如:

(xmlHttpRequest.readyState==4 && xmlHttpRequest.status ==200) ? function(){alert("Success!"); var a=100; alert(a);}: alert("Failure!");

在jQuery 1.7.1源代码这两种简写形式太多了,如line 2643就有:

// Hook for boolean attributes
boolHook = {
  get: function( elem, name ) {
    // Align boolean attributes with corresponding properties
    // Fall back to attribute presence where some booleans are not supported
    var attrNode,
      property = jQuery.prop( elem, name );
    return property === true || 
typeof property !== "boolean" && ( attrNode = elem.getAttributeNode(name) ) && attrNode.nodeValue !== false ?
      name.toLowerCase() :
      undefined;
  },
  set:function(){
...
  }
}

看来还得继续学习进行总结。

以上这篇Javascript简写条件语句(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS链式调用的实现方法
Mar 07 Javascript
Javascript中的默认参数详解
Oct 22 Javascript
js闭包的用途详解
Nov 09 Javascript
JavaScript中操作字符串小结
May 04 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
Sep 02 Javascript
三个js循环的关键字示例(for与while)
Feb 16 Javascript
AngularJS 中文API参考手册
Jul 28 Javascript
使用vue-router为每个路由配置各自的title
Jul 30 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
Sep 21 Javascript
简单说说angular.json文件的使用
Oct 29 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
Jun 05 Javascript
JavaScript实现滑块验证解锁
Jan 07 Javascript
jQuery 3 中的新增功能汇总介绍
Jun 12 #Javascript
JavaScript_ECMA5数组新特性详解
Jun 12 #Javascript
喜大普奔!jQuery发布 3.0 最终版
Jun 12 #Javascript
浅谈JavaScript变量的自动转换和语句
Jun 12 #Javascript
浅谈jquery点击label触发2次的问题
Jun 12 #Javascript
Bootstrap学习笔记之js组件(4)
Jun 12 #Javascript
JSP基于Bootstrap分页显示实例解析
Jun 12 #Javascript
You might like
php IP及IP段进行访问限制的代码
2008/12/17 PHP
PHP实现获取域名的方法小结
2014/11/05 PHP
分享PHP函数实现数字与文字分页代码
2015/07/28 PHP
thinkPHP使用post方式查询时分页失效的解决方法
2015/12/09 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
php-fpm重启导致的程序执行中断问题详解
2019/04/29 PHP
php字符串截取函数mb_substr用法实例分析
2019/06/25 PHP
Javascript的一种模块模式
2008/03/22 Javascript
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
ExtJS4 动态生成的grid导出为excel示例
2014/05/02 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
2016/08/03 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
2017/01/18 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
2017/12/11 jQuery
使用vue-router为每个路由配置各自的title
2018/07/30 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
2019/08/01 Javascript
JS面向对象编程——ES6 中class的继承用法详解
2020/03/03 Javascript
利用js canvas实现五子棋游戏
2020/10/11 Javascript
Python Socket编程入门教程
2014/07/11 Python
Python原始字符串(raw strings)用法实例
2014/10/13 Python
Python中使用MELIAE分析程序内存占用实例
2015/02/18 Python
Python多进程multiprocessing用法实例分析
2017/08/18 Python
python实现简单中文词频统计示例
2017/11/08 Python
python三大神器之fabric使用教程
2019/06/10 Python
Django学习之文件上传与下载
2019/10/06 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
Python3使用腾讯云文字识别(腾讯OCR)提取图片中的文字内容实例详解
2020/02/18 Python
python检查目录文件权限并修改目录文件权限的操作
2020/03/11 Python
python对批量WAV音频进行等长分割的方法实现
2020/09/25 Python
python实现excel公式格式化的示例代码
2020/12/23 Python
洲际酒店集团大中华区:IHG中国
2016/08/17 全球购物
Blancsom美国/加拿大:服装和生活用品供应商
2018/07/27 全球购物
学生手册家长评语
2014/02/10 职场文书
租赁协议书
2015/01/27 职场文书
评测 | 大屏显示带收音机的高端音箱,JBL TUNE2便携式插卡音箱实测
2021/04/24 无线电
SQL SERVER存储过程用法详解
2022/02/24 SQL Server
十大最强奥特曼武器:怪兽战斗仪在榜,第五奥特之父只使用过一次
2022/03/18 日漫