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 相关文章推荐
HTML TO JavaScript 转换
Jun 26 Javascript
jquery实现公告翻滚效果
Feb 27 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
Mar 07 Javascript
input输入密码变黑点密文的实现方法
Jan 09 Javascript
JavaScript实现简单动态进度条效果
Apr 06 Javascript
使用 vue-i18n 切换中英文效果
May 23 Javascript
深入Node TCP模块的理解
Mar 13 Javascript
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
vue 监听 Treeselect 选择项的改变操作
Aug 31 Javascript
通过实例解析JavaScript常用排序算法
Sep 02 Javascript
Vue自定义组件双向绑定实现原理及方法详解
Sep 03 Javascript
vue实现拖拽进度条
Mar 01 Vue.js
鼠标事件延时切换插件
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 文件上传模型,支持多文件上传
2009/08/13 PHP
php将数据库导出成excel的方法
2010/05/07 PHP
PHP利用str_replace防注入的方法
2013/11/10 PHP
PHP中if和or运行效率对比
2014/12/12 PHP
在php7中MongoDB实现模糊查询的方法详解
2017/05/03 PHP
Yii2语言国际化自动配置详解
2018/08/22 PHP
PHP PDOStatement::debugDumpParams讲解
2019/01/30 PHP
Select标签下拉列表二级联动级联实例代码
2014/02/07 Javascript
jQuery+ajax中getJSON() 用法实例
2014/12/22 Javascript
jQuery DOM插入节点操作指南
2015/03/03 Javascript
javascript弹出拖动窗口
2015/08/11 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
2015/12/08 Javascript
使用JavaScript实现弹出层效果的简单实例
2016/05/31 Javascript
jQuery实现日期联动效果实例
2016/07/26 Javascript
JavaScript蒙板(model)功能的简单实现代码
2016/08/04 Javascript
原生JS实现网络彩票投注效果
2016/09/25 Javascript
js实现简单的二级联动效果
2017/03/09 Javascript
js原生Ajax的封装和原理详解
2017/03/11 Javascript
基于对象合并功能的实现示例
2017/10/10 Javascript
java遇到微信小程序 "支付验证签名失败" 问题解决
2019/12/22 Javascript
使用JavaScript通过前端发送电子邮件
2020/05/22 Javascript
Vue3配置axios跨域实现过程解析
2020/11/25 Vue.js
Python实现获取汉字偏旁部首的方法示例【测试可用】
2018/12/18 Python
Python实现使用request模块下载图片demo示例
2019/05/24 Python
python实现桌面气泡提示功能
2019/07/29 Python
Python实现图片查找轮廓、多边形拟合、最小外接矩形代码
2020/07/14 Python
PyQT5速成教程之Qt Designer介绍与入门
2020/11/02 Python
python3列表删除大量重复元素remove()方法的问题详解
2021/01/04 Python
css3图片边框border-image的用法
2017/06/30 HTML / CSS
墨尔本照明批发商店:Mica Lighting
2017/12/28 全球购物
REISS美国官网:伦敦最受欢迎的时尚品牌
2019/08/16 全球购物
个人遵守党的政治纪律情况对照检查材料思想汇报
2014/09/25 职场文书
四风对照检查剖析材料
2014/10/07 职场文书
2014年六五普法工作总结
2014/11/25 职场文书
英语辞职信怎么写
2015/02/28 职场文书
大学军训通讯稿
2015/07/18 职场文书