Javascript常用小技巧汇总

本文实例讲述了Javascript常用小技巧。分享给大家供大家参考。具体分析如下：

一、True 和 False 布尔表达式

下面的布尔表达式都返回 false:

null undefined '' 空字符串 0 数字0

但小心下面的,可都返回 true:

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

下面段比较糟糕的代码:

代码如下:

你可以直接写成下面的形式(只要你希望 x 不是 0 和空字符串,和 false):

代码如下:

如果你想检查字符串是否为 null 或空:

代码如下:

但这样会更好:

代码如下:

注意: 还有很多需要注意的地方,如:

Boolean('0') == true '0' != true 0 != null 0 == [] 0 == false Boolean(null) ==false null != true null != false Boolean(undefined) ==false undefined != true undefined != false Boolean([]) == true [] != true [] == false Boolean({}) == true {} != true {} != false

二、条件(三元)操作符 (?:)

三元操作符用于替代下面的代码:

rush:js;"> if (val != 0) { return foo(); } else { return bar(); }

你可以写成:

代码如下:

在生成 HTML 代码时也是很有用的:

代码如下:

三、&& 和 ||

二元布尔操作符是可短路的,只有在必要时才会计算到最后一项.

"||" 被称作为 'default' 操作符,因为可以这样:

rush:js;"> function foo(opt_win) { var win; if (opt_win) { win = opt_win; } else { win = window; } // ... }

你可以使用它来简化上面的代码:

rush:js;"> function foo(opt_win) { var win = opt_win || window; // ... }

"&&" 也可简短代码.比如:

rush:js;"> if (node) { if (node.kids) { if (node.kids[index]) { foo(node.kids[index]); } } }

你可以像这样来使用:

rush:js;"> if (node && node.kids && node.kids[index]) { foo(node.kids[index]); }

或者:

rush:js;"> var kid = node && node.kids && node.kids[index]; if (kid) { foo(kid); }

不过这样就有点儿过头了:

代码如下:

四、使用 join() 来创建字符串

通常是这样使用的:

rush:js;"> function listHtml(items) { var html = ''; for (var i = 0; i < items.length; ++i) { if(i > 0) { html += ','; } html += itemHtml(items[i]); } html +=''; return html; }

但这样在 IE 下非常慢,可以用下面的方式:

rush:js;"> function listHtml(items) { var html = []; for (var i = 0; i < items.length; ++i) { html[i] = itemHtml(items[i]); } return '' + html.join(',') + ''; }

你也可以是用数组作为字符串构造器,然后通过 myArray.join('') 转换成字符串.不过由于赋值操作快于数组的 push(),所以尽量使用赋值操作.

五、遍历 Node List

Node lists 是通过给节点迭代器加一个过滤器来实现的. 这表示获取他的属性,如 length 的时间复杂度为 O(n),通过 length 来遍历整个列表需要 O(n^2).

rush:js;"> var paragraphs = document.getElementsByTagName_r('p'); for (var i = 0; i < paragraphs.length; i++) { doSomething(paragraphs[i]); }

这样做会更好:

rush:js;"> var paragraphs = document.getElementsByTagName_r('p'); for (var i = 0,paragraph; paragraph = paragraphs[i]; i++) { doSomething(paragraph); }

这种方法对所有的 collections 和数组(只要数组不包含 falsy 值) 都适用.

在上面的例子中,也可以通过 firstChild 和 nextSibling 来遍历孩子节点.

rush:js;"> var parentNode = document.getElementByIdx_x('foo'); for (var child = parentNode.firstChild; child; child = child.nextSibling) { doSomething(child); }

希望本文所述对大家的javascript程序设计有所帮助。

技巧技巧技巧