js中if语句的几种优化代码写法

更新时间：2011年03月12日 19:15:16 作者：

UglifyJS是一个对javascript进行压缩和美化的工具，在它的文档说明中，我看到了几种关于if语句优化的方法。

尽管我还没使用它去做一些尝试性的测试，但从这里可以看到它的确对js作了美化的工作。也许有人认为if语句就那么简单，能优化到什么程度？但是看看以下的几种方式，你也许会改变看法。

一、使用常见的三元操作符

 
if (foo) bar(); else baz(); ==> foo?bar():baz(); 
if (!foo) bar(); else baz(); ==> foo?baz():bar(); 
if (foo) return bar(); else return baz(); ==> return foo?bar():baz(); 

对于以上使用三元操作符来优化if语句你肯定不会陌生，或许你经常使用它。

二、使用and(&&)和or(||)运算符

复制代码代码如下:

 
if (foo) bar(); ==> foo&&bar(); 
if (!foo) bar(); ==> foo||bar(); 

老实说，我并没有这样去写过代码，这种写法我在学习《鸟哥的 Linux 私房菜》时看到过，但我并没想到在js中实现它。

三、省略大括号{}

复制代码代码如下:

if (foo) return bar(); else something(); ==> {if(foo)return bar();something()}

这种写法你我都很熟悉，但我建议在代码优化的时候这样做，或者交给UglifyJS帮你去解决。毕竟少一个大括号，代码的可阅读性并不高。

写到这里，我想到jQuery之父在《精通 JavaScript》中的一个获取HTML元素属性的方法。

复制代码代码如下:

 
function getAttr(el, attrName){ 
var attr = {'for':'htmlFor', 'class':'className'}[attrName] || attrName; 
}; 

如果我们不这样写，可能我们需借助于两个if语句来进行处理，而上面的代码不仅简洁有效，而且可阅读性强。

仔细想想，好些时候我们都能找到解决问题的有效途径，但关键在于我们是否用心去寻找一种更好的途径。

您可能感兴趣的文章:

简单聊聊JavaScript的事件循环机制
前端开发的童鞋应该都知道,JavaScript是一门单线程的脚本语言,这就意味着JavaScript 代码在执行的时候,只有一个主线程来执行所有的任务,同一个时间只能做同一件事情,这篇文章主要给大家介绍了关于JavaScript事件循环机制的相关资料,需要的朋友可以参考下
2022-03-03
javascript使用递归算法求两个数字组合功能示例
这篇文章主要介绍了javascript使用递归算法求两个数字组合功能,结合实例形式分析了JS基于递归算法的数组遍历、判断、转换等相关操作技巧,需要的朋友可以参考下
2017-01-01
JavaScript可否多线程? 深入理解JavaScript定时机制
JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感
2012-05-05
JS判断点是否在线段上的代码
这篇文章主要介绍了JS判断点是否在线段上的相关资料,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2023-11-11
探索Javascript中this的奥秘
本文介绍了JavaScript中的this关键字在各种情况下的含义，实例都很简单，这样更能有助于加深理解。虽然这只是js中一个很小的概念，但借此我们可以了解js中函数的执行环境，充分掌握this的相关知识有助于我们在编写面向对象的JavaScript程序时能够游刃有余。
2016-12-12
js实现窗口全屏示例详解
这篇文章主要为大家详细介绍了js实现窗口全屏示例，包含全屏事件、退出全屏事件等，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-09-09
解决JS内存泄露之js对象和dom对象互相引用问题
这篇文章主要介绍了解决JS内存泄露之js对象和dom对象互相引用问题,需要的朋友可以参考下
2017-06-06
微信小程序获取手机号 JavaScript解密示例代码详解
这篇文章主要介绍了微信小程序获取手机号 JavaScript解密的示例代码，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-05-05
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
看到这种百叶窗效果的动画，以为是用flash做的，下面通过本文给大家介绍基于JavaScript实现百叶窗动画效果，需要的朋友参考下吧
2016-02-02
微信小程序多文件上传 Tdesign及导入失败问题
小程序文件上传还是有点麻烦的,其实主要还是小程序对的接口有诸多的不便,比如说,文件不能批量提交,只能一个个的提交,小程序的上传需要专门的接口,这篇文章主要介绍了微信小程序多文件上传 Tdesign及导入失败问题,需要的朋友可以参考下
2023-11-11