Javascript常用小技巧總結_javascript技巧

本文實例講述了Javascript常用小技巧。分享給大家供大家參考。具體分析如下：

一、True 和 False 布林表達式

下面的布林表達式都回傳 false:

null
undefined
'' 空字串
0 數字0

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

'0' 字串0
[] 空數組
{} 空物件

下面段比較糟糕的程式碼:

複製程式碼 程式碼如下:

while (x != null) {

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

複製程式碼 程式碼如下:

while (x) {

如果你想檢查字串是否為 null 或空:

複製程式碼 程式碼如下:

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

但這樣會更好:

複製程式碼 程式碼如下:

if (y) {

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

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
 
二、條件(三元)操作符 (?:)

三元運算子用來取代下面的程式碼:

if (val != 0) {
 return foo();
} else {
 return bar();
}

你可以寫成:

複製程式碼 程式碼如下:

return val ? foo() : bar();

在產生 HTML 程式碼時也是很有用的:

複製程式碼

程式碼如下:

var html = '';

三、&& 和 ||

二元布林運算子是可短路的, 只有在必要時才會計算到最後一項.

"||" 被稱為 'default' 運算子, 因為可以這樣:

function foo(opt_win) {
 var win;
 if (opt_win) {
  win = opt_win;
 } else {
  win = window;
 }
 // ...
}

你可以用它來簡化上面的程式碼:

function foo(opt_win) {
 var win = opt_win || window;
 // ...
}

"&&" 也可簡短程式碼.如:

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);
}

不過這樣就有點過頭了:

複製程式碼

程式碼如下:

node && node.kids && node.kids[index] && foo(node.kids [index]);

  四、使用 join() 來建立字串

通常是這樣使用的:

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 下非常慢, 可以用下面的方式:

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 ).

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

這樣做會更好:

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

這種方法對所有的 collections 和數組(只要數組不包含 falsy 值) 都適用.

在上面的例子中, 也可以透過 firstChild 和 nextSibling 來遍歷孩子節點.

var parentNode = document.getElementByIdx_x('foo');
for (var child = parentNode.firstChild; child; child = child.nextSibling) {
 doSomething(child);
}

希望本文所述對大家的javascript程式設計有所幫助。