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 对象链式操作测试代码
Apr 25 Javascript
五个jQuery图片画廊插件 推荐
May 12 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
Jul 14 Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
Sep 25 Javascript
jquery获取元素索引值index()示例
Feb 13 Javascript
dreamweaver 8实现Jquery自动提示
Dec 04 Javascript
JavaScript之WebSocket技术详解
Nov 18 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
May 19 Javascript
vue.js异步上传文件前后端实现代码
Aug 22 Javascript
JS异步宏队列微队列原理详解
Sep 09 Javascript
vue使用canvas实现移动端手写签名
Sep 22 Javascript
Vue2.0 ES6语法降级ES5的操作
Oct 30 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下删除字符串中HTML标签的函数
2008/08/27 PHP
PHP中uploaded_files函数使用方法详解
2011/03/09 PHP
php 获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法
2013/09/28 PHP
PHP实现的各类hash算法长度及性能测试实例
2017/08/27 PHP
php语言注释,单行注释和多行注释
2018/01/21 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
写给想学习Javascript的朋友一点学习经验小结
2010/11/23 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
2010/12/28 Javascript
javascript基础知识大集锦(二) 推荐收藏
2011/01/13 Javascript
THREE.JS入门教程(5)你应当知道的十件事
2013/01/24 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
2014/06/16 Javascript
jQuery中map()方法用法实例
2015/01/06 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
JQuery插件Marquee.js实现无缝滚动效果
2016/04/26 Javascript
bootstrap配合Masonry插件实现瀑布式布局
2017/01/18 Javascript
移动端效果之Swiper详解
2017/10/09 Javascript
详解如何在vue项目中使用lodop打印插件
2018/09/27 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
2019/01/18 Javascript
vue.js 2.0实现简单分页效果
2019/07/29 Javascript
浅谈Django自定义模板标签template_tags的用处
2017/12/20 Python
对Python中内置异常层次结构详解
2018/10/18 Python
Window版下在Jupyter中编写TensorFlow的环境搭建
2020/04/10 Python
python调用API接口实现登陆短信验证
2020/05/10 Python
简单了解Django项目应用创建过程
2020/07/06 Python
BannerBuzz加拿大:在线定制横幅印刷、广告和标志
2020/03/10 全球购物
Hotels.com韩国:海外国内旅行所需的酒店和住宿预订网站
2020/05/08 全球购物
六道php面试题附答案
2014/06/05 面试题
个人投资计划书
2014/05/01 职场文书
小学生迎国庆演讲稿
2014/09/05 职场文书
2015高考寄语集锦
2015/02/27 职场文书
项目技术负责人岗位职责
2015/04/13 职场文书
导游词之贵州织金洞
2019/10/12 职场文书
vue 实现弹窗关闭后刷新效果
2022/04/08 Vue.js
Win11无法安装更新补丁KB3045316怎么办 附KB3045316补丁修复教程
2022/08/14 数码科技
Windows11 Insider Preview Build 25206今日发布 更新内容汇总
2022/09/23 数码科技