Javascript简写条件语句(推荐)
作者:jingxian 发布时间:2023-09-01 04:10:25
经常在各处牛人的代码中看到许多简写的条件表达语句,看了一些介绍这方面的文章,觉得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(){
...
}
}
看来还得继续学习进行总结。
猜你喜欢
- 1.漏洞介绍在XHTML 1.0标准下,使用特殊构造的CSS样式,在Internet Explorer 7.0
- 假设你有一套登录注册业务。一开始很简单,老板说只需要常规的注册登录就行。但是到了后面,接口被刷,老板然你在注册登录前加个验证码然后没过多久,
- 举例: 如:在字段名处输入:username,password,email,telphone 注意:不同的字段名用英文逗号隔开,且不支持星号
- 本文实例为大家分享了微信小程序实现登陆注册滑块验证的具体代码,供大家参考,具体内容如下一、创建自定义组件MoveVerifyMoveVeri
- 如何在网上查找链接? 见下:findlinks.html<html><head>
- Python函数的设计规范1、Python函数设计时具备耦合性和聚合性1)、耦合性:(1).尽可能通过参数接受输入,以及通过return产生
- 有时在处理不规则数据时需要提取文本包含的时间日期。dateutil.parser模块可以统一日期字符串格式。datefinder模块可以在字
- 本文介绍了保护MySQL数据库中重要数据受外部攻击的六个注意事项,以减少面临的风险。与自动的数据库备份不同,对系统管理员来说,保护数据免受未
- 现在的离线浏览器很多,可是多数都是共享软件,或是英文软件,这给我们的操作带来了很大的不便。其实微软的网页制作工具FrontPage XP有一
- 本文实例为大家分享了Jsp+Servlet实现简单登录注册查询的具体代码,供大家参考,具体内容如下1、注册功能:制作一个注册页面用户输入:用
- 演示:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//
- oracle服务器没有建立目标数据库的TNS时,在客户端(有权限的情况下)建立dblink语法如下: create database lin
- 网页离不开链接,而默认链接的表现形式总是千篇一律的蓝色文字加底线,每当我们点击它时,周围会出现虚线框,表示该链接是当前的焦点,影
- 说完了理论,我们来做点实事。这篇文章将介绍使用 Javascript 实现的动画组件。下面记录下当时编写这个组件的考虑的些问题,对技术细节感
- 设计,用户说好,才是真的好!14期的友商联线,同事认为风格不美观,需要重新设计。这次,我们引入了用户调研,调研数据可以帮助我们快速决策!ED
- 1、纯粹的截取字符串function cutstr(thestr1,strlen) dim l,t,c&nbs
- javascript 代码实现vbscript中的trim、left、right等函数兼容IE,FireFox。<style>b
- 先下载:http://signup.qq.com/js/a.js用 IntelliJ IDEA 格式化代码:var naa = true;O
- Console 对象提供对浏览器控制台的接入(如:Firefox 的 Web Console)。不同浏览器上它的工作方式是不一样的,但这里会
- 导语在设计论坛之前的讨论中曾经谈到过“设计师应该抓住这个时代的情感”,这是设计师的设计嗅觉和职业特性的体现,那么在纷纷扰扰中“裂变”的Web