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 获取元素样式必杀技
May 04 Javascript
基于jQuery实现仿淘宝套餐选择插件
Mar 04 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
Mar 11 Javascript
用原生JS对AJAX做简单封装的实例代码
Jul 13 Javascript
input输入密码变黑点密文的实现方法
Jan 09 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
May 17 Javascript
JSON对象转化为字符串详解
Aug 11 Javascript
React教程之Props验证的具体用法(Props Validation)
Sep 04 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
Sep 28 Javascript
angularjs获取到My97DatePicker选中的值方法
Oct 02 Javascript
微信小程序调用微信支付接口的实现方法
Apr 29 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
Apr 10 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
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
js+php实现静态页面实时调用用户登陆状态的方法
2015/01/04 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
Jquery知识点二 jquery下对数组的操作
2011/01/15 Javascript
javascript针对DOM的应用分析(三)
2012/04/15 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
2013/08/14 Javascript
单元选择合并变色示例代码
2014/05/26 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
jQuery实现切换页面过渡动画效果
2015/10/29 Javascript
深入浅析NodeJs并发异步的回调处理
2015/12/21 NodeJs
JS实现点击登录弹出窗口同时背景色渐变动画效果
2016/03/25 Javascript
TableSort.js表格排序插件使用方法详解
2017/02/10 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
2017/11/09 Javascript
Angular封装搜索框组件操作示例
2019/04/25 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
2019/04/29 Javascript
Layui给switch添加响应事件的例子
2019/09/03 Javascript
对python for 文件指定行读写操作详解
2018/12/29 Python
Django 中自定义 Admin 样式与功能的实现方法
2019/07/04 Python
使用python socket分发大文件的实现方法
2019/07/08 Python
django使用django-apscheduler 实现定时任务的例子
2019/07/20 Python
python爬虫可以爬什么
2020/06/16 Python
Python matplotlib读取excel数据并用for循环画多个子图subplot操作
2020/07/14 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
h5使用canvas画布实现手势解锁
2019/01/04 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
2020/04/16 HTML / CSS
Html5页面获取微信公众号的openid的方法
2020/05/12 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
专门出售各种儿童读物的网站:Put Me In The Story
2016/08/07 全球购物
JD Sports意大利:英国篮球和运动时尚的领导者
2017/10/29 全球购物
大学生毕业自我评价范文分享
2013/11/07 职场文书
单位提档介绍信
2014/01/17 职场文书
人力资源主管岗位职责
2014/01/29 职场文书
创业计划书的写作技巧及要点
2014/01/31 职场文书
学校领导干部民主生活会整改方案
2014/09/29 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
SpringBoot中HttpSessionListener的简单使用方式
2022/03/17 Java/Android