JavaScript: switch语句、break\case !

最新推荐文章于 2024-04-29 17:01:02 发布

柒小莫

最新推荐文章于 2024-04-29 17:01:02 发布

阅读量2k

点赞数 2

分类专栏：从JavaScript开始的web前端文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_71170351/article/details/125177524

版权

从JavaScript开始的web前端专栏收录该内容

26 篇文章 4 订阅

订阅专栏

switch语句

switch语句是另外一种JavaScript的条件分支语句，相比于if，在某些情况下，switch语句更加简洁、可读。

基本语法加实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="week" id="week"></div>
		
		<script>
		var day = new Date().getDay();
		var week =document.getElementById("week");
		console.log(week);
		switch (day){
			case 0:
			week.innerHTML="星期日"
			break;
			case 1:
			week.innerHTML="星期1"
			break;
			case 2:
			week.innerHTML="星期2"
			break;
			case 3:
			week.innerHTML="星期3"
			break;
			case 4:
			week.innerHTML="星期4"
			break;
			case 5:
			week.innerHTML="星期5"
			break;
			case 6:
			week.innerHTML="星期6"
			break;
		}
		</script>
	</body>
</html>

switch语句由一个条件语句，至少一个case代码块和一个可选的default语句。

以上代码是自动获取当前星期的js代码

以上案例对初学者可能有些复杂，就以if为例，以上switch语句等同于：

var value = exp;
if(value === 'val1'){
	//代码块1
}else if(value === 'val2'){
	//代码块2
}else if(...){
	//...
}else{
	//相当于default
}

二者的对比可以发现，switch语句相较于if更加简洁。

break的用途

在switch语句中，break语句占有非常重要的地位，通常情况下，每个case代码段末尾都应该添加一个break语句。

如果不添加break，在执行完一个case后，不会跳出switch语句，而是继续执行下一个case代码块，这是switch的重要特性。

举个例子：

var num = 6;
switch( num ){
    case 3:
        alert(num);
        break;
    case 5:
        alert(num);
        break;
    case 6:
        alert(num);
        break;
		case 7:
		alert(num);
		break;
    default:
        alert(num);
        break;
}

以上代码只会执行case 6这种情况，也就是先弹出一个6，随后遇到break结束switch语句的执行。

如果不写break，就会执行case 6以及case 6后面的所有case，直到遇见break语句结束执行。

switch的表达式

和if一样，任何表达式都可以成为switch的判断条件。

var num = '3';
var val = 7;
switch( num * 2){
	case val - 1:
		alert(val - 1);
		break;
	case val - 2:
		alert(val - 2);
		break;
	case val - 3:
		alert(val - 3);
		break;
	default:
		alert("？");
		break;
}

这里num * 2返回6，等于 val - 1，就会弹出6。

case分组

上面的例子都是一个case对应一个代码块，我们还可以使用多个case指向同一个代码块。

举个栗子：

var num = prompt("输入一个数字");
switch( num % 3){
	case 0:
		alert("3的倍数");
		break;
	case 1:
	case 2:
		alert("不是3的倍数");
}

num % 3的值包括0、1、2三种情况，当为0的时候表示num是3的倍数，其他情况不是3的倍数。

如果我们输入的数不是3的倍数，那么num % 3的结果不论1还是2都会执行相同的代码块。

这种case分组的能力实际上是去掉break的副作用，在上例中，正是由于case 1没有break语句，导致1、 2两种情况执行同样的操作。

类型必须相同

switch的比较机制是严格相等，所以必须保持表达式和case中的内容类型相同。

举个栗子：

var num = prompt("请输入一个数字",3);
switch( num ){
	case '1':
		alert(num);
		break;
	case '2':
		alert(num);
		break;
	case 3:
		alert(num);
		break;
}

以上代码中case 3永远不会执行，这是因为prompt只能返回字符串类型的值，而case 3是数字类型，所以永远不能匹配。

课后练习

理解以下代码进行练习

<script>
		var score;
		score = +(window.prompt("请输入个人成绩0~100"));
		var lever =parseInt(score/10);
		
		if(score>100 || score<0){
			alert("成绩不得大于100小于0")
		}else if(isNaN(score)){
			alert("请输入正确成绩w")
		}else{
			switch (lever){
				case 10:
				case 9:
				alert("成绩优秀")
				break;
				case 8:
				alert("成绩优良")
				break;
				case 7:
				case 6:
				alter("成绩合格")
				break;
				default:
				alert("成绩不合格")
			}
		}