下面小编就为大家带来一篇 Javascript 简写条件语句 (推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
经常在各处牛人的代码中看到许多简写的条件表达语句,看了一些介绍这方面的文章,觉得 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 简写条件语句 (推荐) 就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持 phperz。
来源: http://www.phperz.com/article/17/0306/264979.html