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 相关文章推荐
jQuery 技巧小结
Apr 02 Javascript
JavaScript传递变量: 值传递?引用传递?
Feb 22 Javascript
JS去除右边逗号的简单方法
Jul 03 Javascript
原始的js代码和jquery对比体会
Sep 10 Javascript
js购物车实现思路及代码(个人感觉不错)
Dec 23 Javascript
Jquery Ajax方法传值到action的方法
May 11 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
Dec 08 Javascript
jQuery 处理页面的事件详解
Jan 20 Javascript
JavaScript 浏览器对象模型BOM使用介绍
Apr 13 Javascript
jQuery实现的动态伸缩导航菜单实例
May 07 Javascript
利用Three.js如何实现阴影效果实例代码
Sep 26 Javascript
js实现随机圆与矩形功能
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
PHP设计模式之代理模式的深入解析
2013/06/13 PHP
php基于curl实现随机ip地址抓取内容的方法
2016/10/11 PHP
Swoole源码中如何查询Websocket的连接问题详解
2020/08/30 PHP
Js切换功能的简单方法
2010/11/23 Javascript
基于jquery的一个拖拽到指定区域内的效果
2011/09/21 Javascript
jQuery实现页面滚动时动态加载内容的方法
2015/03/20 Javascript
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
JavaScript各类型的关系图解
2015/10/16 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
BootStrap创建响应式导航条实例代码
2016/05/31 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
2018/03/07 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
vuex的module模块用法示例
2018/11/12 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 Javascript
分享一个vue项目“脚手架”项目的实现步骤
2019/05/26 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
2019/09/15 Javascript
Python爬取网易云音乐热门评论
2017/03/31 Python
Python更新数据库脚本两种方法及对比介绍
2017/07/27 Python
Python实现读取json文件到excel表
2017/11/18 Python
python for循环remove同一个list过程解析
2019/08/14 Python
python数据类型之间怎么转换技巧分享
2019/08/20 Python
python3中利用filter函数输出小于某个数的所有回文数实例
2019/11/24 Python
python 实现Harris角点检测算法
2020/12/11 Python
html5利用canvas实现颜色容差抠图功能
2019/12/23 HTML / CSS
Java里面StringBuilder和StringBuffer有什么区别
2016/06/06 面试题
机械制造专业个人的自我评价
2013/12/28 职场文书
中学家长会邀请函
2014/01/17 职场文书
大学生旷课检讨书
2014/01/22 职场文书
2014端午节活动策划方案
2014/01/27 职场文书
学习教师法的心得体会
2014/09/03 职场文书
整脏治乱工作简报
2015/07/21 职场文书
python 如何在 Matplotlib 中绘制垂直线
2021/04/02 Python
浅谈JS的二进制家族
2021/05/09 Javascript
教你使用Python pypinyin库实现汉字转拼音
2021/05/27 Python
JS前端可视化canvas动画原理及其推导实现
2022/08/05 Javascript