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  Error 对象 错误处理
May 18 Javascript
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Jun 11 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
Apr 16 Javascript
百度地图api如何使用
Aug 03 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
Aug 03 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
Nov 09 Javascript
vue源码学习之Object.defineProperty 对数组监听
May 30 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
Oct 20 Javascript
使用koa2创建web项目的方法步骤
Mar 12 Javascript
微信公众号平台接口开发 菜单管理的实现
Aug 14 Javascript
JavaScript对象原型链原理详解
Feb 05 Javascript
Vue watch响应数据实现方法解析
Jul 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
Php中文件下载功能实现超详细流程分析
2012/06/13 PHP
PHP时间戳 strtotime()使用方法和技巧
2013/10/29 PHP
图文介绍PHP添加Redis模块及连接
2015/07/28 PHP
php连接oracle数据库的核心步骤
2016/05/26 PHP
Laravel+jQuery实现AJAX分页效果
2016/09/14 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
JavaScript高级程序设计 客户端存储学习笔记
2011/09/10 Javascript
Javascript核心读书有感之词法结构
2015/02/01 Javascript
总结AngularJS开发者最常犯的十个错误
2016/08/31 Javascript
浅谈JS验证表单文本域输入空格的问题
2017/02/14 Javascript
在javaScript中检测数据类型的几种方式小结
2017/03/04 Javascript
js实现图片加载淡入淡出效果
2017/04/07 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
2017/05/22 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
2017/08/09 jQuery
React如何将组件渲染到指定DOM节点详解
2017/09/08 Javascript
JS获取指定月份的天数两种实现方法
2018/06/22 Javascript
原生JS实现简单的倒计时功能示例
2018/08/30 Javascript
详解如何用VUE写一个多用模态框组件模版
2018/09/27 Javascript
微信小程序实现简单文字跑马灯
2020/05/26 Javascript
js动态添加带圆圈序号列表的实例代码
2021/02/18 Javascript
python 实现插入排序算法
2012/06/05 Python
Python中基本的日期时间处理的学习教程
2015/10/16 Python
Python实现Smtplib发送带有各种附件的邮件实例
2017/06/05 Python
通过python顺序修改文件名字的方法
2018/07/11 Python
windows+vscode安装paddleOCR运行环境的步骤
2020/11/11 Python
python模块内置属性概念及实例
2021/02/18 Python
NFL墨西哥官方商店:Tienda NFL
2017/11/28 全球购物
机关办公室岗位职责
2014/04/16 职场文书
初中升旗仪式演讲稿
2014/05/08 职场文书
五一口号
2014/06/19 职场文书
关于运动会的广播稿(10篇)
2014/09/12 职场文书
副校长个人对照检查材料思想汇报
2014/10/04 职场文书
2015年大学班级工作总结
2015/04/28 职场文书
国王的演讲观后感
2015/06/03 职场文书
银行求职信范文
2019/05/13 职场文书
阿里面试Nacos配置中心交互模型是push还是pull原理解析
2022/07/23 Java/Android