javascript教程:关于if简写语句优化的方法


Posted in Javascript onMay 17, 2014

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语句你肯定不会陌生,或许你经常使用它。

三水点靠木给出的例子:

<script>
var i=9
var ii=(i>8)?100:9;
alert(ii);
</script>

输出结果:

100

二、使用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技巧】if(x==null)简写

if(x==null)或if (typeof (x) == 'undefined')可以简写为if(!x),未验证。

反之if(x)表示x非空

判断对象是否存在

if(document.form1.softurl9){
//判断是否存在softurl9,防止js出错
}
if(document.getElementById("softurl9")){
//判断是否存在softurl9,防止js出错
}

补充:

javascript || && 简写 if

<script type="text/javascript">     如果你想写 
    if (!false) 
    { 
        alert('false'); 
    } 
    不妨考虑写成: 
    false || alert('false'); 
    false || alert('false'); true || alert('true'); //output false; 
    用"||"的情况下,第一个条件true,不检测第二个直接返回true.第一个条件false,会执行第二个条件检测 
    false && alert('false'); true && alert('true'); //output true 
    用"&&"的情况下,第一个条件true,还会检测第二个条件。第一个条件false,直接返回false退出。 
    简而言之, 替换 if 的简单实用, ? : 替换 if else的实用。 写短小精悍的代码 
    usage: 
    $("#regform input[type!=hidden]").each( 
        function(index) { 
            $(this).parent().has("div.valid-under").length || $('<div class="valid-under"></div>').appendTo($(this).parent()); 
        } 
    );   
</script>
Javascript 相关文章推荐
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
Jan 11 Javascript
简单实例处理url特殊符号&amp;处理(2种方法)
Apr 02 Javascript
JS文本框追加多个下拉框的值的简单实例
Jul 12 Javascript
jquery实现文字由下到上循环滚动的实例代码
Aug 09 Javascript
分享经典的JavaScript开发技巧
Nov 21 Javascript
AngularJS中的表单简单入门
Jul 28 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
Nov 07 Javascript
JS设置随机出现2个数字的实例代码
Jul 19 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
浅析vue给不同环境配置不同打包命令
Aug 17 Javascript
React 项目迁移 Webpack Babel7的实现
Sep 12 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
Oct 29 Javascript
javascript if条件判断方法小结
May 17 #Javascript
js加减乘除丢失精度问题解决方法
May 16 #Javascript
js脚本获取webform服务器控件的方法
May 16 #Javascript
js加入收藏夹代码(兼容ie/ff/op)
May 16 #Javascript
javascript生成随机数的方法
May 16 #Javascript
从零学jquery之如何使用回调函数
May 16 #Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
May 16 #Javascript
You might like
解决phpcms更换javascript的幻灯片代码调用图片问题
2014/12/26 PHP
php在线解压ZIP文件的方法
2014/12/30 PHP
PHP实现WebService的简单示例和实现步骤
2015/03/27 PHP
微信支付开发交易通知实例
2016/07/12 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
通过jquery实现tab标签浏览效果
2007/02/20 Javascript
javascript开发技术大全-第1章javascript概述
2011/07/03 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
2015/01/19 Javascript
js实现九宫格图片半透明渐显特效的方法
2015/02/16 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
2015/08/06 Javascript
window.onload使用指南
2015/09/13 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
2016/02/23 Javascript
javascript html5摇一摇功能的实现
2016/04/19 Javascript
JavaScript实战之带收放动画效果的导航菜单
2016/08/16 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
2016/09/17 Javascript
使用jquery给指定的table动态添加一行、删除一行
2016/10/13 Javascript
Vue作用域插槽slot-scope实例代码
2018/09/05 Javascript
angularjs中判断ng-repeat是否迭代完的实例
2018/09/12 Javascript
js实现延迟加载的几种方法详解
2019/01/19 Javascript
微信小程序select下拉框实现效果
2019/05/15 Javascript
如何使用JS console.log()技巧提高工作效率
2020/10/14 Javascript
记录一次websocket封装的过程
2020/11/23 Javascript
vue-router懒加载的3种方式汇总
2021/02/28 Vue.js
[52:07]完美世界DOTA2联赛PWL S3 LBZS vs access 第二场 12.10
2020/12/13 DOTA
Python的Tornado框架实现图片上传及图片大小修改功能
2016/06/30 Python
浅析Python中元祖、列表和字典的区别
2016/08/17 Python
python编程实现随机生成多个椭圆实例代码
2018/01/03 Python
python实现excel读写数据
2021/03/02 Python
浅谈Python中eval的强大与危害
2019/03/13 Python
python生成器推导式用法简单示例
2019/10/08 Python
Python实现曲线拟合的最小二乘法
2021/02/19 Python
卡骆驰德国官方网站:Crocs德国
2019/03/29 全球购物
十八大闭幕感言
2014/01/22 职场文书
摄影展策划方案
2014/06/02 职场文书
集体生日活动方案
2014/08/18 职场文书
运动会通讯稿100字
2015/07/20 职场文书