JavaScript中if语句的几种简写与优化技巧

JavaScript中if语句的几种简写与优化技巧

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(||)运算符

二、使用and(&&)和or(||)运算符

if (foo) bar(); 可简化为 foo&&bar(); if (!foo) bar(); 可简化为 foo||bar();

坦白说，我此前并未这样编写代码。这种写法是在学习《鸟哥的 Linux 私房菜》时接触的，当时并未联想到在JavaScript中实现。

省略大括号{}

三、省略大括号{}

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语句处理。上述代码不仅简洁高效，且具备良好的可读性。

仔细思考，许多时候我们都能找到解决问题的有效途径，关键在于是否用心寻求更优方案。

if(x==null)简写技巧

【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

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 else，用"||"和"&&"替换if，编写短小精悍的代码。
usage:
$("#regform input[type!=hidden]").each(
function(index) {
$(this).parent().has("div.valid-under").length || $('<div class="valid-under"></div>').appendTo($(this).parent());
        } 
    );   
</script>