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 相关文章推荐
filters.revealTrans.Transition使用方法小结
Aug 19 Javascript
超级简单实现JavaScript MVC 样式框架
Mar 24 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
Aug 05 Javascript
原生JS:Date对象全面解析
Sep 06 Javascript
微信小程序 PHP后端form表单提交实例详解
Jan 12 Javascript
原生JS和jQuery操作DOM对比总结
Jan 19 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
Jul 13 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
Feb 03 Javascript
node.js部署之启动后台运行forever的方法
May 23 Javascript
手把手教你使用TypeScript开发Node.js应用
May 06 Javascript
mock.js模拟前后台交互
Jul 25 Javascript
vue实现表单录入小案例
Sep 27 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
用PHP的超级变量$_GET获取HTML表单(Form) 数据
2011/05/07 PHP
phpExcel导出大量数据出现内存溢出错误的解决方法
2013/02/28 PHP
实用的简单PHP分页集合包括使用方法
2013/10/21 PHP
PHP之十六个魔术方法详细介绍
2016/11/01 PHP
php判断是否连接上网络的方法实例详解
2016/12/14 PHP
php获取文章内容第一张图片的方法示例
2017/07/03 PHP
PHP crypt()函数的用法讲解
2019/02/15 PHP
php面向对象程序设计入门教程
2019/06/22 PHP
ThinkPHP5框架中使用JWT的方法示例
2020/06/03 PHP
Javascript与vbscript数据共享
2007/01/09 Javascript
js简单实现根据身份证号码识别性别年龄生日
2013/11/29 Javascript
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
vue,angular,avalon这三种MVVM框架优缺点
2016/04/27 Javascript
浅析JSONP技术原理及实现
2016/06/08 Javascript
jQuery简单入门示例之用户校验demo示例
2016/07/09 Javascript
JS简单实现无缝滚动效果实例
2016/08/24 Javascript
angularjs 中$apply,$digest,$watch详解
2016/10/13 Javascript
Bootstrap选项卡学习笔记分享
2017/02/13 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
2017/12/16 jQuery
微信小程序 如何引入外部字体库iconfont的图标
2018/01/31 Javascript
bootstrap table支持高度百分比的实例代码
2018/02/28 Javascript
vue-cli项目中使用echarts图表实例
2018/10/22 Javascript
搭建基于express框架运行环境的方法步骤
2018/11/15 Javascript
微信小程序实现文件、图片上传功能
2020/08/18 Javascript
小程序如何写动态标签的实现方法
2020/02/05 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
2020/03/25 Javascript
[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2
2014/07/11 DOTA
python 字符串split的用法分享
2013/03/23 Python
使用Python读取二进制文件的实例讲解
2018/07/09 Python
pytorch 实现删除tensor中的指定行列
2020/01/13 Python
英国皇室御用百货:福南梅森(Fortnum & Mason)
2017/12/03 全球购物
信息工程学院毕业生推荐信
2013/11/05 职场文书
车间副主任岗位职责
2013/12/24 职场文书
《桥》教学反思
2014/04/09 职场文书
MySQL5.7并行复制原理及实现
2021/06/03 MySQL