switch语句

 

CreateTime--2017年7月13日08:40:07
Author:Marydon

switch语句

参考链接：http://www.w3school.com.cn/js/pro_js_statements_switch.asp

switch 语句是 if 语句的兄弟语句。

一、switch语句介绍

语法：

switch (expression)
  case value: statement;
    break;
  case value: statement;
    break;
  case value: statement;
    break;
  case value: statement;
    break;
...
  case value: statement;
    break;
  default: statement;

说明：　　

　　每个情况（case）都是表示“如果 expression 等于 value，就执行 statement”。

　　关键字 break 会使代码跳出 switch 语句。如果没有关键字 break，代码执行就会继续进入下一个 case。

　　关键字 default 说明了表达式的结果不等于任何一种情况时的操作（事实上，它相对于 else 从句）。

switch 语句主要是为避免让开发者编写下面的代码：

if (i == 20)
  alert("20");
else if (i == 30)
  alert("30");
else if (i == 40)
  alert("40");
else
  alert("other");

等价的 switch 语句是这样的：

switch (i) {
  case 20: alert("20");
    break;
  case 30: alert("30");
    break;
  case 40: alert("40");
    break;
  default: alert("other");
}

举例1：

　　CSS部分

/* 医嘱：长嘱，临嘱，中医样式显示 Start*/
.yz_td1 {
    line-height: 28px;
    height: 28px;
    padding-left: 10px;
    width: 100px;
}
/*灰色背景色*/
.yz_td2 {
    font-size: 14px;
    height: 28px;
    line-height: 28px;
    width: 100px;
    color: #333;
    margin: 4px;
    background: #e7e9e6;
    border-radius: 6px;
    text-align: center;
}
/*绿色背景色*/
.yz_td3 {
    font-size: 14px;
    height: 28px;
    line-height: 28px;
    width: 100px;
    color: #fff;
    margin: 4px;
    background: #42b012;
    border-radius: 6px;
    text-align: center;
}
/* End 医嘱：长嘱，临嘱，中医嘱样式显示*/

　　HTML部分

<table cellspacing="0" cellpadding="1" border="0" class="medical_table" width="100%" height="100%">
    <tbody>
        <tr>
            <td class="yz_td1">查看医嘱</td>
            <td width="100">
                <div class="yz_td3" onclick="ctrlYzTitle('yzOption1');" id="yzOption1">长嘱</div>
            </td>
            <td width="100">
                <div class="yz_td2" onclick="ctrlYzTitle('yzOption2');" id="yzOption2">临嘱</div>
            </td>
            <td width="100">
                <div class="yz_td2" onclick="ctrlYzTitle('yzOption4');" id="yzOption3">中医</div>
            </td>
            <td></td><!-- 空td不要删除 -->
        </tr>
    </tbody>
</table>

　　JS部分

/**
 * 控制医嘱类型显示内容
 */
function ctrlYzTitle(senderId) {
    switch (senderId) {
        case 'yzOption1':
            document.getElementById('yzOption1').className = 'yz_td3';
            document.getElementById('yzOption2').className = 'yz_td2';
            document.getElementById('yzOption3').className = 'yz_td2';
            break;
        case 'yzOption2':
            document.getElementById('yzOption2').className = 'yz_td3';
            document.getElementById('yzOption1').className = 'yz_td2';
            document.getElementById('yzOption3').className = 'yz_td2';
            break;
        case 'yzOption3':
            document.getElementById('yzOption3').className = 'yz_td3';
            document.getElementById('yzOption1').className = 'yz_td2';
            document.getElementById('yzOption2').className = 'yz_td2';
            break;
        default:
            break;
    } 
}

　　实现效果：选中变色

　　效果展示：

　　举例2：巧用break特性

switch (panelId) {
    case 'panel2':// 患者信息
    case 'panel4':// 专家选择
        if('0' == panelStatus) return;    
    case 'panel3':// 病历信息
        if('0' == panelStatus || '3' == panelStatus) return;    
}

二、ECMAScript 和 Java 中的 switch 语句

　　ECMAScript 和 Java 中的 switch 语句有两点不同：

　　　　在 ECMAScript 中，switch 语句可以用于字符串，而且能用不是常量的值。

 　　举例：

var BLUE = "blue", RED = "red", GREEN  = "green";

switch (sColor) {
  case BLUE: alert("Blue");
    break;
  case RED: alert("Red");
    break;
  case GREEN: alert("Green");
    break;
  default: alert("Other");
}

　　解说：switch 语句用于字符串 sColor，声明 case 使用的是变量 BLUE、RED 和 GREEN，这在 ECMAScript 中是完全有效的。