Javascript书写技巧

培训

True OR False

以下常见表达式都返回false：

• nul
• undefined
• '' 空字符串
• 0 数字0

以下常见表达式都返回true：

• '0' 字符串
• [] 空数组
• {} 空对象

可能会有某些判断：

while(x != null){}

在你不希望x是0、空字符串和false的情况下可以改写：

while(x){}

想要检查字符串是否为null或空：

if(y != null && y != ''){}

可以直接改写

if(y){}

另外还有一些不直观的布尔表达式：

0

• Boolean('0') == true
• '0' != true
• 0 != null
• 0 == []
• 0 == false

null

• Boolean(null) == false
• null != true
• null != false

undefined

• Boolean(undefined) == false
• undefined != true
• undefined != false

[]

• [] != true
• [] == false //空数组等于false

{}

• Boolean({}) == true
• {} != true
• {} != false

条件（三元）操作符 ? :

下面这段代码可以被三元操作符替换

//常见的if判断
if(val != 0){
    return foo();
}else{
    return bar();
}
//可以写成
return val ? foo() : bar();

生成html的时候是很有用的

//checkbox
var isChecked = false, isEnabled = true;
var ipt = '<input type="checkbox" '+
            (isChecked ? 'checked' : '') +
            (isEnabled ? '' : 'disabled') +
            ' name="foo" >';
//活动状态
var isActive = true;
var status = '<span class="status'+
            (isActive ? ' active' : '') +
            '">'+
            (isActive ? '活动进行中' : '活动已结束') +
            '</span>'

&& 和 || (二元布尔操作符)

这对二元布尔操作符可以根据前面的代码判断后面的代码是否执行，也就是说只有在必要的时候才会执行后面的代码，|| 可以被成为默认操作符，因为它可以替代下面的情况：

//参数判断
function foo(opt_win){
    var win;
    if(opt_win){
        win = opt_win;
    }else{
        win = window;
    }
    //...
};
//可以转换为
function foo(opt_win){
    var win  = opt_win || window;
    //...
};
//jQuery操作classname
$("a").on("click", function(){
    //常见写法
    if($(this).hasClass("on")){
        $(this).removeClass("on");
    }
    //使用||操作符，前项为false时执行后项，可以使用
    $(this).hacClass("on") || $(this).addClass("on");
});

是不是瞬间就觉得自己是老司机了？

&& 也可以用来缩减代码量

if(node){
    if(node.kids){
        if(node.kids[index]){
            foo(node.kids[index]);
        }
    }
}
//可以写成这样
if(node && node.kids && node.kids[index]){
    foo(node.kids[index]);
}
//当然也可以这样
var kid = node && node.kids && node.kids[index];
if(kid){
    foo(kid);
}
//是不是有人想到了||的写法？（jslint禁止写法）
node && node.kids && node.kids[index] && foo(node.kids[index]);
//使用&&操作符，前项为true时执行后项，不推荐使用（jslint禁止写法）
$(this).hacClass("on") && $(this).removeClass("on");

用 join() 构建字符串

通常构建字符串的方式是这样的：

function listHtml(items){
    var html = '<div class="foo">';
    for(var i = 0; i < items.length; i++){
        html += itemHtml(items[i]);
    }
    html += '</div>';
    return html;
};

以上代码在IE中效率很低，better than better的写法是：

function listHtml(items){
    var html = [];
    for(var i = 0; i < items.length; i++){
        //html.push(itemHtml(items[i]));  速度稍微慢一点
        html[i] = itemHtml(items[i]);
    }
    return '<div class="foo">' + html.join("") + '</div>';
};