使用控制結構

JavaScript 具有大部分程式語言提供的標準條件敘述,其語法來自 Java 和 C,這些敘述都是分支敘述,根據情況將導向不同路徑
特別注意 Javascript 區分大小寫,條件敘述不能自行改成大寫。
參考程式流程圖繪製:http://www2.lssh.tp.edu.tw/~hlf/class-1/lang-c/flow/flow-chat.htm

1if-else & if-else if 條件敘述

若條件成立所執行的程式碼只有一行,JavaScript 允許省略大括號。
單行時,要與 if 同行還是放在下一行,一直都有爭議性,所以有括弧比較易讀,且較不容易出現 bug,若要一行建議都在同一行上,比較清楚

if 條件敘述


如果條件為真(true)就執行大括弧中的敘述;倘若為假(false)則忽略其內的敘述。
if( 條件敘述 ){ ... }
          if( score > 60 ){
            ...
          }

          if( score > 60 )
            ...

          if( score > 60 )  ...
        
          
什麼為真?
為準確使用任何類型的控制結構,必須完全掌握語言中的「真」條件,只要知道什麼是假(false),就能知道什麼是真(true),非假即真的道理,除了以下敘述為假,其他為真:
  • false
  • 0
  • 空字串(""或者'')
  • NaN(非數字)
  • null
  • undefined

if-else 條件敘述


最好將 else 敘述作為預設情況:除非符合特定條件,否則就發生敘述所表達的情況。
if( 條件敘述 ){ ... }
else{ ... }
          if( score > 60 ){
              ...
          }else{
              ...
          }
        
          if( score > 60 ){
              if( score > 80 ){
                  ...
              }else{
                  ...
              }
          }else{
              ...
          }
        

if-else if 條件敘述


多重條件下才使用,基於性能考量,建議從最可能為真的條件開始排序,將求值條件減到最少
if( 條件敘述一 ){ ... }
else if( 條件敘述二 ){ ... }
else{ ... }

          if( score > 80 ){
              ...
          }else if( score > 60 ){
              ...
          }else{
              ...
          }
        
            var score = 65;
            if(score > 60){
              document.write('if(score > 60) => true');
            }

            if(score > 60){
              document.write('if(score > 60) => true');
            }else{
              document.write('else => false');
            }

            if(score > 80){
              document.write('if(score > 80) => true');
            }else if(score > 60){
              document.write('else if(score > 60) => true');
            }else{
              document.write('else => false');
            }
          
          
巢狀結構
巢狀結構設計應注意:
  • 縮排下層結構,從視覺上呈現邏輯架構
  • 完整建立一組控制結構,加上所有大括號和小括號,增加巢狀結構
  • 使用註解說明控制結構結束位置,避免解析錯誤
參考 MSDN if...else 陳述式:https://msdn.microsoft.com/zh-tw/library/85yyde5c(v=vs.94).aspx

2switch 條件敘述

switch 方案比 if-else if 來得更簡潔易讀,JavaScript 按照順序檢查各條件,直到發生一致性比對:
          switch (x) {
            case 1:
              ...
              break;
            case 2:
              ...
              break;
            case 3:
              ...
              break;
            default:
              ...
          }
        
            var date = new Date();
            var day = date.getDay();
            switch (day) {
              case 1:
                document.write('Monday');
                break;
              case 2:
                document.write('Tuesday');
                break;
              case 3:
                document.write('Wednesday');
                break;
              case 4:
                document.write('Thursday');
                break;
              case 5:
                document.write('Friday');
                break;
              case 6:
              case 0:
                document.write('Holiday!');
                break;
              default:
                document.write('Hey, no day!');
            }
          
參考 MSDN switch 陳述式:https://msdn.microsoft.com/zh-tw/library/hzc6t81t(v=vs.94).aspx

3隱密型條件敘述

標準 if-else 有兩種變型,語法更隱密而不明顯:
            var n = 2;
            var statement = (n % 2 == 0) ? '偶數' : '奇數';

            var y = 6;
            var x = y || 1;

            var y = 6;
            var z = (y < 10) || (1 + y);

            var b = 1;
            var a = (b - 1) && (b - 10);

            var b = 1;
            var c = (b + 1) && (b - 10);
          
參考 MSDN 條件 (三元) 運算子:https://msdn.microsoft.com/zh-tw/library/be21c7hw(v=vs.94).aspx

4條件運算子

比較運算子


            var x = 20;
            if(x > 10)
            if(x < 10)
            if(x >= 10)
            if(x <= 10)
            if(x == true)
            if(x != true)
            if(x === true)
            if(x !== true)

            if(null === undefined)
            if(null == undefined)
            if(NaN === '')
            if(1 === true)
            if(1 !== true)
            if(1 == true)
          
          
兩個相等/全等值之間的差別
            var n = 0;
            if(n){...}
          
雖 n 在條件敘述前才剛賦值,但數值 0 被當作假值,當只使用一個變數作為條件時,JavaScript 將在背景轉換成布林值,所以 n 等同 false,以上該條件應為假,當處理這種情況可採用「嚴格相等」代替,下列條件都為假:
  • null === undefined
  • " === NaN
  • 1 === true
相反地,以下都為真:
  • null == undefined
  • null !== undefined
  • 1 == true
  • 1 !== true
謹守一個原則:若希望確認變數值為 undefined、null、false,而不是類假值(0、null、空字串、undefined)時,應進行全等比較。
另要注意,已經宣告但未賦值的變數,其初始值為 undefined,即使變數的值為 false、0、空字串、null,都不會全等於 undefined。
參考 MSDN 邏輯運算子:https://msdn.microsoft.com/zh-tw/library/6hsc0eak(v=vs.94).aspx
參考 MSDN 運算子優先順序:https://msdn.microsoft.com/zh-tw/library/z3ks45k7(v=vs.94).aspx

邏輯運算子


條件敘述通常會使用三種邏輯運算子: 一般來說 and 和 or 的優先順序比大部分的運算子低,因此可不用加括號,但 not 的優先順序高於比較運算子,所以使用 not 的時候要有括號的習慣,使用 and 和 or 時, 要另外考慮短路評估(Short circuit evaluation),有效求取條件值,例如 and 條件式中,第一個條件為假,便忽略第二個條件,因已確定條件為假;而在 or 條件式中,第一個條件為真,就不求第二個條件,因已確定條件為真。
            var x = 20;
            if( (x > 10) && (x > 5) )
            if( (x < 10) && (x > 5) )
            if( (x < 22) || (x > 25) )
            if( (x < 10) || (x < 11) )
            if( !(x == 20) )
            if( !(x < 10) )
            if( !(false) )
          
參考 MSDN 邏輯運算子:https://msdn.microsoft.com/zh-tw/library/6hsc0eak(v=vs.94).aspx
參考 MSDN 運算子優先順序:https://msdn.microsoft.com/zh-tw/library/z3ks45k7(v=vs.94).aspx

處理複雜條件敘述的技巧


數字 Number


字串 String


typeof 運算子


            var x = 1-.8, y = .3-.1;                //JavaSciprt 和其他語言用近似值來代表數值
            if(x == y)
            if(x.toFixed(2) == y.toFixed(2))

            if(NaN === NaN)                         //NaN 這個非數字進行等值或全等比較,也為假
            if(isNaN(NaN))                          //當需檢查一個數值變數是否為非數值時,改用 isNaN() 函數才能判定
            if(isFinite(x))                         //如果提供的數值不是 NaN 或無限大,isFinite() 就返回 ture

            var w = 'domojiun', u = 'DomoJiun';
            if(w == u)
            if(w.toLowerCase() == u.toLowerCase())
            if(w.indexOf('domo'))
            if(w.indexOf('domo') != -1)

            if('cat' > 'dog')
            if('cat' > 'catwalk')
            if('cat' > 'Cat')

            if(typeof x == 'number')
            if(typeof NaN == 'number')
            if(typeof w == 'string')
            if(typeof null == 'object')
          

5for 迴圈

迴圈用來重複執行一個動作,使用一種條件來確定是否要執行迴圈內容。
執行 for 迴圈有三個部份:
  1. 評估初始運算式: 通常用來定義變數或建立所需的任何基準,運算式總會被 JavaScript 執行一次,也僅一次。
  2. 確定條件: 當條件為真的時候,執行迴圈內容;條件為假時,停止執行(在條件設定不佳,可能會造成無窮迴圈)。
  3. 執行迴圈後求值: 執行次數運算式會在每完成一次迴圈後,對初始值做變化,意味著與迴圈內容執行次數相同
for( 初始值 ; 條件式 ; 執行次數運算式 ){ ... }
          for(var i=0 ; i<10 ; i++){
              ...
          }
        
            for(var i = 0; i <= 5; i++){
              document.write('i: ' + i + '
'); } for(var i = 0, j = 0; (i + j) <= 10; i++, j += i){ document.write('i: ' + i + ', j: ' + j + '
'); }
            
巢狀迴圈
使用巢狀迴圈時,要留意語法、大括號,並註解結構說明,變數名稱也要不同,例如:外部迴圈用 i 做計數器,內部迴圈則用 j,以免造成衝突。
參考 MSDN for 陳述式:https://msdn.microsoft.com/zh-tw/library/s1cyybdf(v=vs.94).aspx

6while & do-while 迴圈

for 迴圈和 while 迴圈功能差不多,不過 for 迴圈適用在「知道迴圈次數」的條件下;而 while 則是不知道重複執行次數的情況下使用。在 JavaScript 中較常使用 for 迴圈。
while 迴圈和 do-while 迴圈最大不同是,while 有可能不符合條件會完全不執行;但 do-while 至少執行一次迴圈內容,因為 do-while 的條件判斷是在執行完迴圈才做;while是執行前做判斷。

while 迴圈


while( 條件式 ){ ... }
          while(i < 10){
              ...
          }
        

do-while 迴圈


do{ ... }while( 條件式 )
          do {
              ...
          }while(i < 10);
        
            var i = 0;
            while(i <= 5){
              document.write('i: ' + i + '
'); i++; } var j = 0; while(j < 0){ document.write('j: ' + j + '
'); j++; } do{ document.write('j: ' + j + '
'); j++; }while(j < 0);
參考 MSDN while 陳述式:https://msdn.microsoft.com/zh-tw/library/6wsy66x9(v=vs.94).aspx

7特殊敘述

            for (var i = 1; i <= 50; i++) {
                if (i == 15) {
                    break;
                }
                document.write (i + ", ");
            }

            for (var i = 1; i <= 50; i++) {
                if (i == 15) {
                    continue;
                }
                document.write (i + ", ");
            }
          
參考 MSDN break 陳述式:https://msdn.microsoft.com/zh-tw/library/3fhdxafb(v=vs.94).aspx
參考 MSDN continue 陳述式:https://msdn.microsoft.com/zh-tw/library/8de3fkc8(v=vs.94).aspx