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(){
...
}
}
看来还得继续学习进行总结。
猜你喜欢
- 前言人类都是视觉动物,不管是男生还是女生看到漂亮的小姐姐、小哥哥就想截图保存下来。可是截图会对画质会产生损耗,截取的画面不规整,像素不高等问
- Selenium 封装了现成的文件上传操作。但是随着现代前端框架的发展,文件上传的方式越来越多样。而有一些文件上传的控件,要做自动化控制会更
- 使用Python进行插值非常方便,可以直接使用scipy中的interpolateimport numpy as npx1 = np.lin
- with/as使用open打开过文件的对with/as都已经非常熟悉,其实with/as是对try/finally的一种替代方案。当某个对象
- 有时候我们会有这样的一个需求:我们定义了一个 Python 的方法,方法接收一些参数,但是调用的时候想将这些参数用命令行暴露出来。比如说这里
- 1、获取文件的创建、修改、访问时间# -*- encoding=utf-8 -*-import osimport timedef get_f
- CSS文件的链接方式·附加链接:外部CSS文件·导入CSS:常用应用多个CSS文件时,将多个CSS导入一个CSS文件中CSS规则定义有三种:
- 代码如下from bs4 import BeautifulSoup #网页解析,获取数据import sys #正则表达式,进行文字匹配im
- 刚刚想从数据库中的表EXPERT_DETAILS中检索出修改人Modifier(类型 VARCHAR2(20),可为空)为空的那些记录,因为
- 1.指向“开始->程序->Microsoft SQL Server 2005->配置工具->SQL Server 外
- 本文实例为大家分享了python名片管理系统的具体代码,供大家参考,具体内容如下import oslist_all = []def page
- 前言ppi-cpi 剪刀差大家可能都听说过,通过这个指标可以了解当前的经济运行状况,小编为了学习 python 的图形绘制,通过爬
- 本文实例讲述了python RC4加密操作。分享给大家供大家参考,具体如下:# -*- conding:utf-8 -*-from Cryp
- 本文实例讲述了python打开文件并获取文件相关属性的方法。分享给大家供大家参考。具体分析如下:下面的代码通过open函数打开文件,并输出文
- 公司运营着的网站,流量很大,网站是交互式的,经常在过了三四个月的时候索引生成的碎片就很多,由于很大一部分页面没有生成静态,这就导致网站在打开
- windows server 2016 与 sql server 2016 都可用允许不许要加入AD ,管理方面省了挺多操作,也不用担心域控
- 在最近的项目中,需要做到一个时间,就是用户离开页面的时候,我需要缓存页面其中一部分的内容,但是我不需要用户刷新的时候也缓存,我只希望在我用户
- 玩QQ桌球游戏时,有时候用鼠标控制鼠标指针的微小移动比较费劲儿,所以想写个程序,可以用键盘的上下左右键来控制鼠标的移动,每次只移动一个像素。
- 用Python实现学生信息管理系统,供大家参考,具体内容如下系统功能有:1.录入,查找,删除,修改学生信息2.学生成绩排名3.显示全部学生信
- 本文实例讲述了Python AES加密模块用法。分享给大家供大家参考,具体如下:AES是新的一种加密模块。在上次介绍过在C语言中如何来Ope