javascript中if和switch,==和===詳解

今天改插件BoxScroll的時候,由於if裏面的條件判斷多於兩個,因而立馬想着改寫switch。改到一半,突然記起來JSHint等代碼質量檢測工具中的一個要求,用===替換==,不用不可靠的強制轉型。而後突然猜測,改爲switch是否是會下降效率啊?switch裏面的實際判斷是==仍是===?html

有了想法,趕忙舉個栗子,好一口吃掉:性能優化

var a = '5';
switch (a) {
  case 5:
    console.log('==');
    break;
  case "5":
    console.log('===');
    break;
  default:
}

  

最後控制檯顯示的是===,看來能夠放心的用。找了下之前的學習筆記,嗯,高三裏面確實也說switch判斷是全等運算符,所以不會發生類型轉換。這裏小結一下工具

  1.if和switch
性能

if 是用得最多的,沒什麼太多好說。值得注意的一點是:if 其實和 || 很像,若是if (conditionA){} else {} 中的conditionA爲true,而後它執行完else以前的代碼塊後就看都不會看else裏面的代碼。和 || 前面爲true的時候後面會被忽略同樣,即使裏面有再多的錯誤。基於這個性質,固然把可能用得最多的代碼塊放在前面,減小判斷次數。另外一方面,若是有不少的js if 判斷,並且可能執行的次數分佈比較均勻,那麼後面的判斷語句每次都要把前面的判斷一個一個執行完,不利於優化。比較好的作法是將一層判斷語句變成兩層判斷語句,如學習

if (a > 0 && a <= 1) {
  //do something
} else if (a > 1 && a <= 2) {
 
} else if (a > 2 && a <= 3) {
 
} else if (a > 3 && a <= 4) {
 
} else if (a > 4 && a <= 5) {
 
} else if (a > 5 && a <= 6) {
 
}...

  


變爲優化

if (a > 0 && a <= 4) {
  if (a <= 1) {
    //do something
  } else if (a > 1 && a <= 2) {
 
  } else if (a > 2 && a <= 3) {
 
  } else if (a > 3 && a <= 4) {
 
  }
} else if (a > 4 && a <= 8) {
  //
}..

  


  雖然前面的每一個判斷都多加了一次,可是後面的判斷就都減小了(4-1)*n次,仍是滿賺的。突然以爲這種方式和嵌套循環有點像,循環次數少的放在外面有助於性能優化,如何分紅兩層甚至多層就要看具體狀況了。spa

  switch是 if 最親密的戰友,每次 if 忙不過來的時候就過來搭把手。switch和 if 互轉估計沒什麼好說的,並且switch和if同樣,都是順序從上往下執行判斷的,有所不一樣的是 if 中的else在switch裏面可無論用,它有本身的小弟:break。若是沒有遇到break,switch會繼續往下執行,如插件

var a = 2;
switch (a) {
  case 1:
    console.log("1");
    //break miss
  case 2:
    console.log("2");
  case 3:
    console.log("3");
  default:
    console.log('no break');
}

  


  最後控制檯顯示 2,3,no break 。其實也蠻好理解,break是提示程序跳出內部執行體到下一個case 判斷,若是沒有了,至關於 if(condition){A}{B},沒有了else,A和B固然都要執行啦。還有兩個小tip,一是switch和case中能夠寫任何表達式,如code

switch (A + B) {
  case a * b:
    console.log("1");
    break;
  case a / b + c:
    break;
    //...
  default:
    console.log('no break');
}

  


  實際上的比較是 (A+B)===(a*b)和(A+B)===(a/b+c)。二是switch有一種特殊的用法,如htm

switch (true) {
  case condition1:
    //do something
    break;
  case condition2:
    break;
    //...
  default:
    //..
    ;
}

  


  此時switch中的每個case都會按照順序判斷執行。至於switch(false)?並無什麼卵用。

  2.==與===

  一句話搞定,除了在比較以前不轉換操做數以外,全等和不全等操做符與相等和不相等操做符並無什麼不一樣。

  最經典的案例

var a = "5",
  b = 5;
a == b     //true
a === b     //false
var a = "ABC",
  b = "AB" + "C";
a === b     //true

  


  下面的顯示true的緣由其實和string類型不可變是分不開的。表面看上去b只是簡單的拼接一個字符串,但實際上它已經和原來的b沒有關係。每個字符串都存在內存池中特定的地方,當b="AB"+"C"執行完的時候,字符串AB和C就已經被銷燬,而b指向內存池中ABC的位置。因爲在指向前在內存池中發現了字符串ABC(由於a引用着它,因此存在),因此b就和a指向同一塊區域,全等判斷相等。若是在b以前沒有任何變量指向字符串ABC,那麼內存池中沒有,就會在裏面劃一塊地方給ABC,並將b指向ABC。

相關文章
相關標籤/搜索