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 相关文章推荐
jQuery之自动完成组件的深入解析
Jun 19 Javascript
node.js中的console.warn方法使用说明
Dec 09 Javascript
浅谈JavaScript数据类型
Mar 03 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
Oct 16 Javascript
纯javascript移动优先的幻灯片效果
Nov 02 Javascript
JavaScript ParseFloat()方法
Dec 18 Javascript
JavaScript实现输入框(密码框)出现提示语
Jan 12 Javascript
js类式继承与原型式继承详解
Apr 07 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
Sep 06 Javascript
详解Vue自定义过滤器的实现
Jan 10 Javascript
Jquery树插件zTree实现菜单树
Jan 24 Javascript
微信小程序 image组件遇到的问题
May 28 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将网址字符串转换成超链接(网址或email)
2010/05/25 PHP
解析thinkphp的左右值无限分类
2013/06/20 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
CI框架集成Smarty的方法分析
2016/05/17 PHP
PHP中如何判断exec函数执行成功?
2016/08/04 PHP
解决laravel查询构造器中的别名问题
2019/10/17 PHP
PHP变量的作用范围实例讲解
2020/12/22 PHP
js几个不错的函数 $$()
2006/10/09 Javascript
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
为指定的元素添加遮罩层的示例代码
2014/01/15 Javascript
火狐下input焦点无法重复获取问题的解决方法
2014/06/16 Javascript
Bootstrap项目实战之子栏目资讯内容
2016/04/25 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
2016/07/01 Javascript
JS简单获取及显示当前时间的方法
2016/08/03 Javascript
用原生js统计文本行数的简单示例
2016/08/19 Javascript
AngularJS折叠菜单实现方法示例
2017/05/18 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
2018/08/21 jQuery
使用jQuery给Table动态增加行、清空table的方法
2018/09/05 jQuery
vue中axios请求的封装实例代码
2019/03/23 Javascript
vue 实现移动端键盘搜索事件监听
2019/11/06 Javascript
使用vue实现HTML页面生成图片的方法
2020/03/12 Javascript
[05:59]带你看看DPC的台前幕后
2021/03/11 DOTA
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
python中ASCII码和字符的转换方法
2018/07/09 Python
如何通过Python实现标签云算法
2019/07/02 Python
PyTorch中Tensor的数据统计示例
2020/02/17 Python
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
2016/12/30 HTML / CSS
Joules美国官网:出色的英国风格
2017/10/30 全球购物
英国和爱尔兰的自炊式豪华度假小屋:Rural Retreats
2018/06/08 全球购物
AutoShack.com加拿大:北美主要的汽车零部件零售商
2019/07/24 全球购物
趣天网日本站:Qoo10 JP
2019/09/18 全球购物
美国亚马逊旗下时尚女装网店:SHOPBOP(支持中文)
2020/10/17 全球购物
女方婚礼新郎答谢词
2014/01/11 职场文书
单位委托书怎么写
2014/09/21 职场文书
干部作风整顿个人剖析材料
2014/10/06 职场文书
关于python中模块和重载的问题
2021/11/02 Python