程式語言教學誌 FB, YouTube: PYDOING: JavaScript 快速導覽

JavaScript 亦有提供多重選擇的控制結構，使用關鍵字 (keyword) switch 、 case 、 default 的陳述 (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 行

10	`switch` `(datab[i]) {`

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

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

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 會放在最後面。