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 相关文章推荐
javascript AutoScroller 函数类
May 29 Javascript
关于二级域名下使用一级域名下的COOKIE的问题
Nov 07 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
Jun 29 Javascript
js实现网页自动刷新可制作节日倒计时效果
May 27 Javascript
javascript实现限制上传文件大小
Feb 06 Javascript
jQuery实现菜单式图片滑动切换
Mar 14 Javascript
react实现pure render时bind(this)隐患需注意!
Mar 09 Javascript
微信小程序开发之map地图实现教程
Jun 08 Javascript
如何实现双向绑定mvvm的原理实现
May 28 Javascript
vue实现简单的日历效果
Sep 24 Javascript
vue 组件开发原理与实现方法详解
Nov 29 Javascript
jQuery实现tab栏切换效果
Dec 22 jQuery
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正则
2006/07/07 PHP
通过html表格发电子邮件
2006/10/09 PHP
php radio 单选框获取与保持值的实现代码
2010/05/15 PHP
PHP读取txt文本文件并分页显示的方法
2015/03/11 PHP
php 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
一段非常简单的让图片自动切换js代码
2006/11/10 Javascript
javascript闭包的理解和实例
2010/08/12 Javascript
jquery关于图形报表的运用实现代码
2011/01/06 Javascript
再谈javascript图片预加载技术(详细演示)
2011/03/12 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
js克隆对象、数组的常用方法介绍
2013/09/26 Javascript
JavaScript操作XML文件之XML读取方法
2015/06/09 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
2015/09/10 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
基于JavaScript的操作系统你听说过吗?
2016/01/28 Javascript
jQuery插件zTree实现删除树子节点的方法示例
2017/03/08 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
2017/09/28 Javascript
教你如何编写Vue.js的单元测试的方法
2018/10/17 Javascript
详解vue中使用protobuf踩坑记
2019/05/07 Javascript
Nuxt.js实战和配置详解
2019/08/05 Javascript
jquery实现聊天机器人
2020/02/08 jQuery
jQuery HTML css()方法与css类实例详解
2020/05/20 jQuery
JavaScript前端开发时数值运算的小技巧
2020/07/28 Javascript
如何在sae中设置django,让sae的工作环境跟本地python环境一致
2017/11/21 Python
浅谈python爬虫使用Selenium模拟浏览器行为
2018/02/23 Python
python 使用poster模块进行http方式的文件传输到服务器的方法
2019/01/15 Python
Python简直是万能的,这5大主要用途你一定要知道!(推荐)
2019/04/03 Python
python lambda函数及三个常用的高阶函数
2020/02/05 Python
Python作用域与名字空间原理详解
2020/03/21 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
localStorage 设置过期时间的方法实现
2018/12/21 HTML / CSS
写出二分查找算法的两种实现
2013/05/13 面试题
魅力教师事迹材料
2014/01/10 职场文书
个人自我剖析材料
2014/09/30 职场文书
python 定义函数 返回值只取其中一个的实现
2021/05/21 Python
go开发alertmanger实现钉钉报警
2021/07/16 Golang