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 相关文章推荐
会自动逐行上升的文本框
Jun 30 Javascript
JS获取后台Cookies值的小例子
Mar 04 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
Mar 26 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
Oct 09 Javascript
Jquery easyui 实现动态树
Nov 17 Javascript
详解JavaScript for循环中发送AJAX请求问题
Jun 23 Javascript
Javascript HTML5 Canvas实现的一个画板
Apr 12 Javascript
js获取form表单所有数据的简单方法
Aug 18 Javascript
bootstrap modal弹出框的垂直居中
Dec 14 Javascript
详解jQuery中的easyui
Sep 02 jQuery
12个提高JavaScript技能的概念(小结)
May 09 Javascript
Vue3.x源码调试的实现方法
Oct 13 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
缅甸的咖啡简史
2021/03/04 咖啡文化
建立文件交换功能的脚本(一)
2006/10/09 PHP
php横向重复区域显示二法
2008/09/25 PHP
php中unlink()、mkdir()、rmdir()等方法的使用介绍
2012/12/21 PHP
PHP四种基本排序算法示例
2015/04/09 PHP
PHP树-不需要递归的实现方法
2016/06/21 PHP
php 调用ffmpeg获取视频信息的简单实现
2017/04/03 PHP
yii2中关于加密解密的那些事儿
2018/06/12 PHP
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
2010/10/14 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
2013/06/27 Javascript
jQuery基础知识小结
2014/12/22 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
2015/03/04 Javascript
AngularJs定制样式插入到ueditor中的问题小结
2016/08/01 Javascript
Javascript blur与click冲突解决办法
2017/01/09 Javascript
微信小程序与php 实现微信支付的简单实例
2017/06/23 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
2017/08/30 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
2018/05/03 Javascript
TypeScript类型声明书写详解
2019/08/28 Javascript
Vuex实现数据增加和删除功能
2019/11/11 Javascript
微信小程序换肤功能实现代码(思路详解)
2020/08/25 Javascript
Openlayers测量距离与面积的实现方法
2020/09/25 Javascript
由Python运算π的值深入Python中科学计算的实现
2015/04/17 Python
python中global用法实例分析
2015/04/30 Python
Python实现字典的遍历与排序功能示例
2017/12/23 Python
Python嵌套式数据结构实例浅析
2019/03/05 Python
运用PyTorch动手搭建一个共享单车预测器
2019/08/06 Python
python离线安装外部依赖包的实现
2020/02/13 Python
keras 获取某层输出 获取复用层的多次输出实例
2020/05/23 Python
生物科学系大学生的自我评价
2013/12/20 职场文书
领导干部群众路线个人对照检查材料思想汇报
2014/09/30 职场文书
2015教师节师德演讲稿
2015/03/19 职场文书
军事理论课感想
2015/08/11 职场文书
MongoDB安装使用并实现Python操作数据库
2021/06/28 MongoDB
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS
Python+Appium自动化测试的实战
2021/06/30 Python
MySQL 条件查询的常用操作
2022/04/28 MySQL