本站電子書

您可以在這些電子書店找到本站電子書: Google Play 圖書iBooks StoreHyReadReadmooPubu
===>>>本站推出學習遊戲意見調查<<<===《如何自學程式設計》入選 Google Play 台灣地區2016年度最佳書籍

JavaScript 快速導覽 - 多重選擇結構

JavaScript 亦有提供多重選擇的控制結構,使用關鍵字 (keyword) switchcasedefault 的陳述 (statement) ,形式如下




簡單來說, switch 後頭接一小括弧,小括弧內為一常數運算式 (expression) ,計算出常數值若與其後 case 的位標 (label) 相符,就會執行該 case 的陳述。 case 的位標也可以是常數運算式,不過通常直接用常數值。


如下列程式,假設有一位元編碼儲存在整數陣列 (array) datab 之中,程式累計 0 與 1 各自出現的數目
function run() {
    var c = document.getElementById("content");
    var n = document.createElement("p");
    var datab = [1, 0 ,0, 1, 0, 1, 1, 0, 1, 1, 1, 0, 0, 0, 1, 1];
    var oneCount = 0;
    var zeroCount = 0;
    var i;
    
    for (i = 0; i < 16; i++ ) {
        switch (datab[i]) {
            case 0:
                zeroCount++;
                break;
                
            case 1:
                oneCount++;
                break;
        }
    }
    
    var message = "資料中有 " + zeroCount + " 個 0 , " + oneCount + " 個 1....";    
    n.appendChild(document.createTextNode(message));
    c.appendChild(n);
}

/* 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名:run22.js
     功能:示範 JavaScript 程式 
     作者:張凱慶
     時間:西元 2010 年 11 月 */


利用以下的 HTML 文件載入
<html>

<head>
<title>JavaScript Demo</title>
<script src="run22.js" type="text/javascript"></script>
</head>

<body>
<input id="b" type="button" value="RUN" onclick="run();">
<div id="content"></div>
</body>

</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名:jsexample25.html
     功能:示範 JavaScript 程式 
     作者:張凱慶
     時間:西元 2010 年 11 月 -->


瀏覽器 (broswer) 開啟後執行,如下



第 9 行
switch (datab[i]) {


datab[i] 會取得該陣列的第 i 個元素值,此為常數運算式。


由於情況只有 0 與 1 ,因此上列程式只用 0 與 1 兩個位標。另外第 13 及第 17 行都有
break;
break;


關鍵字 break 是用來暫時中斷程式的執行,放在迴圈內遇到 break 就會跳出迴圈,而在 switch 裡頭的位標後面則是可以不讓程式繼續往下檢查其他的位標,因為檢查到相符的位標,程式即可暫停,若是沒有用 break ,程式會持續執行到右大括弧 } ,也就是 switch 陳述結束的地方,這樣容易增加額外的程式執行時間。


以下程式計算字串中母音字母出現的次數,若非母音字母則用 default 位標執行另外的計算
function run() {
    var c = document.getElementById("content");
    var n = document.createElement("p");
    var saying = "Never put off till tomorrow what you can do today.";
    var aV, eV, iV, oV, uV, other, i;
    aV = eV = iV = oV = uV = other = i = 0;
    
    while (saying.charAt(i) != '.') {
        switch(saying.charAt(i)) {
            case 'A':
            case 'a':
                aV++;
                break;
                
            case 'E':
            case 'e':
                eV++;
                break;
                
            case 'I':
            case 'i':
                iV++;
                break;
            
            case 'O': 
            case 'o':
                oV++;
                break;
           
            case 'U':
            case 'u':
                uV++;
                break;
                
            default:
                other++;
                break;
        }
        
        i++;
    } 
        
    var message = "a: " + aV + ", e: " + eV + ", i: " + iV + ", o: " + oV + ", u: " + uV + ", other: " + other;    
    n.appendChild(document.createTextNode(message));
    c.appendChild(n);
}

/* 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名:run23.js
     功能:示範 JavaScript 程式 
     作者:張凱慶
     時間:西元 2010 年 11 月 */


利用以下的 HTML 文件載入
<html>

<head>
<title>JavaScript Demo</title>
<script src="run23.js" type="text/javascript"></script>
</head>

<body>
<input id="b" type="button" value="RUN" onclick="run();">
<div id="content"></div>
</body>

</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名:jsexample26.html
     功能:示範 JavaScript 程式 
     作者:張凱慶
     時間:西元 2010 年 11 月 -->


瀏覽器開啟後執行,如下



default 位標下的 break 其實可有可無,但習慣上每個 case 都有給一個 break ,所以 default 後加上 break 只是相對看起來整齊而已。


case 的位標或 default 的出現順序並沒有強制規定,但習慣上, default 會放在最後面。


中英文術語對照
關鍵字keyword
陳述statement
運算式expression
位標label
陣列array






沒有留言: