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 相关文章推荐
表单填写时用回车代替TAB的实现方法
Oct 09 Javascript
jquery URL参数判断,确定菜单样式
May 31 Javascript
jQuery动态添加 input type=file的实现代码
Jun 14 Javascript
JavaScript设计模式之抽象工厂模式介绍
Dec 28 Javascript
JQuery实现的图文自动轮播效果插件
Jun 19 Javascript
bootstrap table复杂操作代码
Nov 01 Javascript
多种方式实现js图片预览
Dec 12 Javascript
js实现文字列表无缝滚动效果
Jun 23 Javascript
微信小程序开发之好友列表字母列表跳转对应位置
Sep 26 Javascript
对vue中v-on绑定自定事件的实例讲解
Sep 06 Javascript
原生js检测页面加载完毕的实例
Sep 11 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
Nov 02 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 格式化数字的时候注意数字的范围
2010/04/13 PHP
解析strtr函数的效率问题
2013/06/26 PHP
php动态生成函数示例
2014/03/21 PHP
php一行代码获取文件后缀名实例分析
2014/11/12 PHP
页面利用渐进式JPEG来提升用户体验度
2014/12/01 PHP
PHP中Enum(枚举)用法实例详解
2015/12/07 PHP
PHPMailer使用QQ邮箱实现邮件发送功能
2017/08/18 PHP
php实现session共享的实例方法
2019/09/19 PHP
php实现断点续传大文件示例代码
2020/06/19 PHP
PHP实现Snowflake生成分布式唯一ID的方法示例
2020/08/30 PHP
E3 tree 1.6在Firefox下显示问题的修复方法
2013/01/30 Javascript
JS+JSP checkBox 全选具体实现
2014/01/02 Javascript
javascript检测flash插件是否被禁用的方法
2016/01/14 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
2016/08/17 Javascript
Vue 过渡实现轮播图效果
2017/03/27 Javascript
javascript 中Cookie读、写与删除操作
2017/03/29 Javascript
微信小程序之数据双向绑定与数据操作
2017/05/12 Javascript
javascript计算渐变颜色的实例
2017/09/22 Javascript
vue实现导航栏效果(选中状态刷新不消失)
2017/12/13 Javascript
关于vue状态过渡transition不起作用的原因解决
2019/04/09 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
2020/11/09 Javascript
[52:52]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第三局
2016/02/27 DOTA
Python实现按特定格式对文件进行读写的方法示例
2017/11/30 Python
python编程实现12306的一个小爬虫实例
2017/12/27 Python
python修改list中所有元素类型的三种方法
2018/04/09 Python
python 信息同时输出到控制台与文件的实例讲解
2018/05/11 Python
pandas Dataframe行列读取的实例
2018/06/08 Python
pytorch 模型可视化的例子
2019/08/17 Python
Selenium 滚动页面至元素可见的方法
2020/03/18 Python
巴西宠物店在线:Geração Pet
2017/05/31 全球购物
2014年教研室工作总结
2014/12/06 职场文书
金正昆讲礼仪观后感
2015/06/11 职场文书
餐馆开业致辞
2015/08/01 职场文书
Python3 类型标注支持操作
2021/06/02 Python
使用python绘制分组对比柱状图
2022/04/21 Python
MySQL 字符集 character
2022/05/04 MySQL