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


Posted in Javascript onMarch 12, 2011

尽管我还没使用它去做一些尝试性的测试,但从这里可以看到它的确对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 相关文章推荐
iframe的父子窗口之间的对象相互调用基本用法
Sep 03 Javascript
JavaScript中检测变量是否存在遇到的一些问题
Nov 11 Javascript
jQuery插件Validate实现自定义校验结果样式
Jan 18 Javascript
如何使用jquery修改css中带有!important的样式属性
Apr 28 Javascript
BootStrap创建响应式导航条实例代码
May 31 Javascript
Vue结合原生js实现自定义组件自动生成示例
Jan 21 Javascript
Vue axios 中提交表单数据(含上传文件)
Jul 06 Javascript
Vue.js组件间的循环引用方法示例
Dec 27 Javascript
vue中父子组件注意事项,传值及slot应用技巧
May 09 Javascript
8 个有用的JS技巧(推荐)
Jul 03 Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 Javascript
解决新建一个vue项目过程中遇到的问题
Oct 22 Javascript
鼠标事件延时切换插件
Mar 12 #Javascript
autoIMG 基于jquery的图片自适应插件代码
Mar 12 #Javascript
再谈javascript图片预加载技术(详细演示)
Mar 12 #Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
Mar 12 #Javascript
使用jquery插件实现图片延迟加载技术详细说明
Mar 12 #Javascript
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
Mar 12 #Javascript
javascript textarea光标定位方法(兼容IE和FF)
Mar 12 #Javascript
You might like
用PHP实现文件上传二法
2006/10/09 PHP
PHP数组内存耗用太多问题的解决方法
2010/04/05 PHP
php性能优化分析工具XDebug 大型网站调试工具
2011/05/22 PHP
php实例分享之mysql数据备份
2014/05/19 PHP
浅谈php使用curl模拟多线程发送请求
2019/03/08 PHP
js 操作符实例代码
2009/10/24 Javascript
向大师们学习Javascript(视频与PPT)
2009/12/27 Javascript
jquery 表格分页等操作实现代码(pagedown,pageup)
2010/04/11 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
2015/03/26 Javascript
JavaScript实现大图轮播效果
2017/01/11 Javascript
bootstrap table表格客户端分页实例
2017/08/07 Javascript
ES6学习教程之块级作用域详解
2017/10/09 Javascript
vue语法之拼接字符串的示例代码
2017/10/25 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
2018/07/06 Javascript
让axios发送表单请求形式的键值对post数据的实例
2018/08/11 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
2019/01/29 Javascript
element-ui 中使用upload多文件上传只请求一次接口
2019/07/19 Javascript
Vue开发环境中修改端口号的实现方法
2019/08/15 Javascript
vue v-model的用法解析
2020/10/19 Javascript
使用AutoJs实现微信抢红包的代码
2020/12/31 Javascript
[04:10]2018年度CS GO玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
用Python计算三角函数之acos()方法的使用
2015/05/15 Python
python调用OpenCV实现人脸识别功能
2018/05/25 Python
python enumerate内置函数用法总结
2020/01/07 Python
简单的命令查看安装的python版本号
2020/08/28 Python
html5 canvas实现跟随鼠标旋转的箭头
2016/03/11 HTML / CSS
Canvas制作的下雨动画的示例
2018/03/06 HTML / CSS
.NET程序员的几道面试题
2012/06/01 面试题
销售自我评价
2013/10/22 职场文书
精彩的大学生自我评价
2013/11/17 职场文书
自我鉴定注意事项
2014/01/19 职场文书
班级体育活动总结
2014/07/05 职场文书
毕业生党员个人总结
2015/02/14 职场文书
环卫工人慰问信
2015/02/15 职场文书
Golang gRPC HTTP协议转换示例
2022/06/16 Golang
彻底弄懂Python中的回调函数(callback)
2022/06/25 Python