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 相关文章推荐
用javascript控制iframe滚动的代码
Apr 10 Javascript
Javascript 命名空间模式
Nov 01 Javascript
js 判断上传文件大小及格式代码
Nov 13 Javascript
javasctipt如何显示几分钟前、几天前等
Apr 30 Javascript
深入学习JavaScript中的原型prototype
Aug 13 Javascript
jQuery自动完成插件completer附源码下载
Jan 04 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
Mar 09 Javascript
js实现简单的二级联动效果
Mar 09 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
Mar 02 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
Sep 05 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
Oct 09 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
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
Cannot modify header information错误解决方法
2008/10/08 PHP
使用PHP备份MYSQL数据的多种方法
2014/01/15 PHP
php 使用html5实现多文件上传实例
2016/10/24 PHP
JavaScript开发时的五个注意事项
2007/12/08 Javascript
再论Javascript下字符串连接的性能
2011/03/05 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
2012/12/21 Javascript
jQuery中:not选择器用法实例
2014/12/30 Javascript
探讨JavaScript语句的执行过程
2016/01/28 Javascript
Bootstrap下拉菜单效果实例代码分享
2016/06/30 Javascript
利用JS提交表单的几种方法和验证(必看篇)
2016/09/17 Javascript
用Vue.js实现监听属性的变化
2016/11/17 Javascript
js多个物体运动功能实例分析
2016/12/20 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
2017/07/11 Javascript
vue实例中data使用return包裹的方法
2018/08/27 Javascript
Vue编程式跳转的实例代码详解
2019/07/10 Javascript
Vue中inheritAttrs的使用实例详解
2020/12/31 Vue.js
python 与GO中操作slice,list的方式实例代码
2017/03/20 Python
python去除字符串中的换行符
2017/10/11 Python
python 获取sqlite3数据库的表名和表字段名的实例
2019/07/17 Python
Roots加拿大官网:加拿大休闲服饰品牌
2016/10/24 全球购物
Ref与out有什么不同
2012/11/24 面试题
opencv实现图像几何变换
2021/03/24 Python
采购主管工作职责
2013/12/12 职场文书
公司清洁工岗位职责
2013/12/14 职场文书
如何打造一封优秀的留学推荐信
2014/01/25 职场文书
业务部门经理岗位职责
2014/02/23 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
2014校长四风问题对照检查材料思想汇报
2014/09/16 职场文书
购房委托书范本
2014/09/18 职场文书
交通事故委托书范本(2篇)
2014/09/21 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
总经理岗位职责
2015/02/04 职场文书
浅谈redis五大数据结构和使用场景
2021/04/12 Redis
解决jupyter notebook图片显示模糊和保存清晰图片的操作
2021/04/24 Python
JS实现扫雷项目总结
2021/05/19 Javascript