JavaScript Switch 语句
JavaScript Switch 语句
switch 语句用于基于不同条件执行不同动作。
JavaScript Switch 语句
请使用 switch 语句来选择多个需被执行的代码块之一。
语法
switch(表达式) {
case n:
代码块
break;
case n:
代码块
break;
default:
默认代码块
}
代码解释：
- 计算一次 switch 表达式
- 把表达式的值与每个 case 的值进行对比
- 如果存在匹配，则执行关联代码
示例代码：
getDay() 方法返回 0 至 6 之间的周名数字（weekday number）。
(Sunday=0, Monday=1, Tuesday=2 ..)
本例使用周名数字来计算周的名称：
switch (new Date().getDay()) {
case 0:
day = "星期天";
break;
case 1:
day = "星期一";
break;
case 2:
day = "星期二";
break;
case 3:
day = "星期三";
break;
case 4:
day = "星期四";
break;
case 5:
day = "星期五";
break;
case 6:
day = "星期六";
}
结果将是：
今天是星期三
完整实例：
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var day;
switch (new Date().getDay()) {
case 0:
day = "周日";
break;
case 1:
day = "周一";
break;
case 2:
day = "周二";
break;
case 3:
day = "周三";
break;
case 4:
day = "周四";
break;
case 5:
day = "周五";
break;
case 6:
day = "周六";
}
document.getElementById("demo").innerHTML = "今天是" + day;
</script>
</body>
</html>
运行结果：
今天是周三
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
break 关键词
如果 JavaScript 遇到 break 关键词，它会跳出 switch 代码块。
此举将停止代码块中更多代码的执行以及 case 测试。
如果找到匹配，并完成任务，则随机中断执行（break）。无需更多测试。
break 能够节省大量执行时间，因为它会“忽略” switch 代码块中的其他代码的执行。
不必中断 switch 代码块中的最后一个 case。代码块在此处会自然结束。
default 关键词
default 关键词规定不存在 case 匹配时所运行的代码：
示例代码：
getDay() 方法返回 0 至 6 的数字周名。
如果今日既不是周六（6）也不是周日（0），则输出一段默认消息：
switch (new Date().getDay()) {
case 6:
text = "今天是周六";
break;
case 0:
text = "今天是周日";
break;
default:
text = "期待周末~";
}
text 的结果是：
期待周末~
完整实例：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript switch</h2>
<p id="demo"></p>
<script>
var text;
switch (new Date().getDay()) {
case 6:
text = "今天是周六";
break;
case 0:
text = "今天是周日";
break;
default:
text = "期待周末";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
运行结果：
Javascript switch 期待周末
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
默认的 case 不必是 switch 代码块中最后一个 case：
示例代码：
switch (new Date().getDay()) {
default:
text = "期待周末！";
break;
case 6:
text = "今天是周六";
break;
case 0:
text = "今天是周日";
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript switch</h2>
<p id="demo"></p>
<script>
var text;
switch (new Date().getDay()) {
default:
text = "期待周末";
break;
case 6:
text = "今天是周六";
break;
case 0:
text = "今天是周日";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
运行结果：
Javascript switch 期待周末
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
如果 default 不是 switch 代码块中最后一个 case，请记得用 break 结束默认 case。
常见的代码块
有时您会需要不同的 case 来使用相同的代码。
在本例中，case 4 和 5 分享相同的代码块，而 0 和 6 分享另一段代码块：
示例代码：
switch (new Date().getDay()) {
case 4:
case 5:
text = "周末快到了：）";
break;
case 0:
case 6:
text = "今天是周末~";
break;
default:
text = "期待周末！";
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript switch</h2>
<p id="demo"></p>
<script>
var text;
switch (new Date().getDay()) {
case 4:
case 5:
text = "周末马上就到了";
break;
case 0:
case 6:
text = "今天是周末";
break;
default:
text = "期待周末";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
运行结果：
Javascript switch 期待周末
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
Switching 的细节
如果多种 case 匹配一个 case 值，则选择第一个 case。
如果未找到匹配的 case，程序将继续使用默认 label。
如果未找到默认 label，程序将继续 switch 后的语句。
严格的比较
Switch case 使用严格比较（===）。
值必须与要匹配的类型相同。
只有操作数属于同一类型时，严格比较才能为 true。
在这个例子中，x 将不匹配：
示例代码：
var x = "0";
switch (x) {
case 0:
text = "Off";
break;
case 1:
text = "On";
break;
default:
text = "No value found";
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript switch</h2>
<p id="demo"></p>
<script>
var x = "0";
switch (x) {
case 0:
text = "Off";
break;
case 1:
text = "On";
break;
default:
text = "未找到值";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
运行结果：
Javascript switch 未找到值
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
课外书
如需更多有关 JavaScript Switch 语句的知识，请阅读 JavaScript 高级教程中的相关内容：
- ECMAScript switch 语句
- switch 语句是 if 语句的兄弟语句。本节介绍了 switch 语句的用法，以及与 Java 中的 switch 语句的不同。
