4.2 switch条件语句
本节介绍ECMAScript语法规范中的另一个条件选择语句——switch语句。在许多情况下，比如选择项很多的编程场景，switch条件选择语句会比if条件选择语句更为适用。
ECMAScript语法规范中定义的switch语句同样是一种条件选择语句，主要用于基于不同的条件来执行不同的操作的场景。
switch语句的语法格式如下：
switch(n) {
case 1:
执行代码块 1;
break;
case 2:
执行代码块 2;
break;
……
case n:
执行代码块 n;
break;
default:
case 1、case 2…case n不同时执行的代码;
}
其中，n是用于选择的表达式（通常是一个变量）。然后，表达式的值依次与结构体中的每一个case值进行比较，如果存在匹配的case项，则执行该case项的代码块；如果与任何一个case项不匹配，则执行default项的代码块。另外，case项与case项之间通过break来间隔，default项通常写在全部case项之后。
下面来看一个使用switch语句的代码示例（详见源代码ch04目录中ch04-js-switch.html文件）。
【代码4-4】
01 <!-- 添加文档主体内容 -->
02 前端编程语言菜单:
03 <select id="id-select-switch" onchange="on_select_change(this.value);">
04 <option value="HTML5">HTML 5</option>
05 <option value="CSS3">CSS 3</option>
06 <option value="EcmaScript">EcmaScript</option>
07 </select>
08 <div id="id-div-switch">
09 请选择您喜欢的前端编程语言:
10 </div>
11 <!-- 添加文档主体内容 -->
12 <script type="text/javascript">
13 var v_div = document.getElementById("id-div-switch");
14 function on_select_change(value) {
15 switch(value) {
16 case "HTML5":
17 v_div.innerHTML = "您选择前端编程语言: " + value;
18 break;
19 case "CSS3":
20 v_div.innerHTML = "您选择前端编程语言: " + value;
21 break;
22 case "EcmaScript":
23 v_div.innerHTML = "您选择前端编程语言: " + value;
24 break;
25 default:
26 v_div.innerHTML = "您选择前端编程语言: ";
27 break;
28 }
29 }
30 </script>
关于【代码4-4】的分析如下：
第03～07行代码通过<select>标签定义了一个下拉选择框控件，并添加了三个<option>选择项。其中，第03行代码中为该标签定义了“id”属性，并定义了“onchange”事件处理函数方法（on_select_change(this.value)），参数“this.value”代表<select>标签的选中值。关于JavaScript事件处理的内容我们会在后续的章节中详细介绍，此处只需要知道“onchange”事件是在用户操作<select>标签后被触发的；
第08～10行代码通过<div>标签定义了一个层，用于显示用户操作<select>标签结果的返回值；
第12～30行代码通过<script>标签定义了一段嵌入式JavaScript脚本。
第13行代码通过document.getElementById()方法获取了第08～10行代码定义的<div>标签的“id”值；
第14～29行代码定义了第03行代码中的“onchange”事件处理函数（on_select_change(value)），参数“value”为传递过来的<select>标签的选中值；
第15～28行代码通过switch语句对参数“value”进行选择判断，其中每个case语句定义了根据不同选择所执行的代码，主要是通过“innerHTML”属性将用户的操作结果显示到第08～10行代码定义的<div>标签中。
页面初始效果如图4.4所示。点开下拉菜单，任意选择一项，操作后的效果如图4.5和图4.6所示。
图4.4 switch语句（1）
图4.5 switch语句（2）
图4.6 switch语句（3）