javascript教程:关于if简写语句优化的方法_javascript技巧

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>

时间: 2024-11-02 19:42:19

javascript教程:关于if简写语句优化的方法_javascript技巧的相关文章

在JavaScript中调用Java类和接口的方法_javascript技巧

前言 本文中所有的代码使用 JavaScript 编写,但你也可以用其他兼容 JSR 223 的脚本语言.这些例子可作为脚本文件也可以在交互式 Shell 中一次运行一个语句的方式来运行.在 JavaScript 中访问对象的属性和方法的语法与 Java 语言相同. 本文包含如下几部分: 1.访问 Java 类 为了在 JavaScript 中访问原生类型或者引用 Java 类型,可以调用 Java.type() 函数,该函数根据传入的完整类名返回对应对象的类型.下面代码显示如何获取不同的对象类

javascript实现图片循环渐显播放的方法_javascript技巧

本文实例讲述了javascript实现图片循环渐显播放的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>图片的循环渐显播放效果代码</title> <head> <!--1.将下面的代码插入到HEML的<head></head>之间: --> <script language=javaScript> <!--// sandra0 = new Image()

JavaScript排序算法动画演示效果的实现方法_javascript技巧

之前在知乎看到有人在问 自己写了一个冒泡排序算法如何用HTML,CSS,JavaScript展现出来排序过程.   感觉这个问题还挺有意思 .前些时间就来写了一个.这里记录一下实现过程. 基本的思想是把排序每一步的时候每个数据的值用DOM结构表达出来. 问题一:如何将JavaScript排序的一步步进程展现出来? 我试过的几种思路: 1.让JavaScript暂停下来,慢下来. JavaScript排序是很快的,要我们肉眼能看到它的实现过程,我首先想到的是让排序慢下来. 排序的每一个循环都让它停

JavaScript绑定事件监听函数的通用方法_javascript技巧

事件绑定的3中常用方法:传统绑定.W3C绑定方法.IE绑定方法.但是,在实际开发中对于我们来讲重要的是需要一个通用的.跨浏览器的绑定方法.如果我们在互联网上搜索一下会发现许多方法,以下是比较知名的几种方法: 在开始学期下面几种方法之前,应当讨论一下,一个好的addEvent()方法应当达到哪些要求: a.支持同一元素的同一事件句柄可以绑定多个监听函数: b.如果在同一元素的同一事件句柄上多次注册同一函数,那么第一次注册后的所有注册都被忽略: c.函数体内的this指向的应当是正在处理事件的节点(

JavaScript获取对象在页面中位置坐标的方法_javascript技巧

本文实例讲述了JavaScript获取对象在页面中位置坐标的方法.分享给大家供大家参考,具体如下: <script language="javascript" type="text/javascript" > function getXY(Obj) { var h = Obj.offsetHeight; for (var sumTop=0,sumLeft=0;Obj!=document.body;sumTop+=Obj.offsetTop,sumLeft

javascript基于prototype实现类似OOP继承的方法_javascript技巧

本文实例讲述了javascript基于prototype实现类似OOP继承的方法.分享给大家供大家参考,具体如下: 这里要说明的是,公有属性(使用this.修饰符)可以被覆盖,私有属性(使用var 修饰符)不能被覆盖 子类不能访问父类的私有属性,父类的方法正常访问父类的私有变量. function Vegetable(){ this.taste='delicious'; var a = 'I\'m Vegetable\'a!' this.fun1 = function(){ alert('Veg

JavaScript控制table某列不显示的方法_javascript技巧

本文实例讲述了JavaScript控制table某列不显示的方法.分享给大家供大家参考.具体实现方法如下: 1.table代码 复制代码 代码如下: <table id="mytable" border="0" width="1400" align="center"    cellpadding="3" cellspacing="1" bgcolor="#dfdfdf&q

javascript检测flash插件是否被禁用的方法_javascript技巧

本文实例讲述了javascript检测flash插件是否被禁用的方法.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus"> <meta name="Author&

借助JavaScript脚本判断浏览器Flash Player信息的方法_javascript技巧

今天研究了点Flex技术,做了一个小的Demo,在测试时发现经常报错,网上一查发现是浏览器Flash Player版本较低造成(需要10及其以上的版本)的,对此总结了一下借助JavaScript脚本判断浏览器Flash Player信息的方法: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>JavaScript判断浏