DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> Javascript常用小技巧匯總
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

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

  三元操作符用於替代下面的代碼:

  ?

1 2 3 4 5 if (val != 0) { return foo(); } else { return bar(); }

  你可以寫成:

   代碼如下:

  return val ? foo() : bar();

  在生成 HTML 代碼時也是很有用的:

   代碼如下:

  var html = '';

  三、&& 和 ||

  二元布爾操作符是可短路的, 只有在必要時才會計算到最後一項.

  "||" 被稱作為 'default' 操作符, 因為可以這樣:

  ?

1 2 3 4 5 6 7 8 9 function foo(opt_win) { var win; if (opt_win) { win = opt_win; } else { win = window; } // ... }

  你可以使用它來簡化上面的代碼:

  ?

1 2 3 4 function foo(opt_win) { var win = opt_win || window; // ... }

  "&&" 也可簡短代碼.比如:

  ?

1 2 3 4 5 6 7 if (node) { if (node.kids) { if (node.kids[index]) { foo(node.kids[index]); } } }

  你可以像這樣來使用:

  ?

1 2 3 if (node && node.kids && node.kids[index]) { foo(node.kids[index]); }

  或者:

  ?

1 2 3 4 var kid = node && node.kids && node.kids[index]; if (kid) { foo(kid); }

  不過這樣就有點兒過頭了:

   代碼如下:

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

  四、使用 join() 來創建字符串

  通常是這樣使用的:

  ?

1 2 3 4 5 6 7 8 9 10 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 下非常慢, 可以用下面的方式:

  ?

1 2 3 4 5 6 7 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).

  ?

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

  這樣做會更好:

  ?

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

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

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

  ?

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

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved