JavaScript-switch
switch 格式
switch(表达式){
case 表达式A:
语句A;
break;
case 表达式B:
语句B;
break;
... ...
default:
前面所有case都不匹配执行的代码;
break;
}
switch 特点
- 会从上至下的依次判断每一个 case 是否和 () 中表达式的结果相等, 如果相等就执行对应 case 后面的代码, 如果前面所有的 case 都不匹配, 那么就会执行 default 后面的代码。
- 并且所有的 case 和 default 只有一个会被执行, 并且只会被执行一次。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script>
let day = 7;
switch (day) {
case 1:
console.log("星期1");
break;
case 2:
console.log("星期2");
break;
case 3:
console.log("星期3");
break;
default:
console.log("Other");
break;
}
</script>
</head>
<body>
</body>
</html>
switch 注意点
case 判断的是 ===, 而不是 ==。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script>
let num = 123;
switch (num) {
case "123":
console.log("字符串123");
break;
case 123:
console.log("数值的123");
break;
default:
console.log("Other");
break;
}
</script>
</head>
<body>
</body>
</html>
() 中可以是常量也可以是变量还可以是表达式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script>
switch (123) {
case 123:
console.log("数值的123");
break;
default:
console.log("Other");
break;
}
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script>
let num = 123;
switch (num) {
case 123:
console.log("数值的123");
break;
default:
console.log("Other");
break;
}
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script>
switch (122 + 1) {
case 123:
console.log("数值的123");
break;
default:
console.log("Other");
break;
}
</script>
</head>
<body>
</body>
</html>
case 后面可以是常量也可以是变量还可以是表达式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script>
let num = 123;
switch (123) {
// case 123: // 常量
// case num: // 变量
case 100 + 23: // 表达式
console.log("数值的123");
break;
default:
console.log("Other");
break;
}
</script>
</head>
<body>
</body>
</html>
break 的作用是立即结束整个 switch 语句。
在 switch 语句中一旦 case 或者 default 被匹配, 那么其它的 case 和 default 都会失效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script>
let num = 1;
switch (num) {
case 1:
console.log("1");
break;
case 2:
console.log("2");
break;
default:
console.log("Other");
break;
}
</script>
</head>
<body>
</body>
</html>
default 不一定要写在最后。
switch 中的 default 无论放到什么位置, 都会等到所有 case 都不匹配再执行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script>
let num = 7;
switch (num) {
case 1:
console.log("1");
break;
default:
console.log("Other");
break;
case 2:
console.log("2");
break;
}
</script>
</head>
<body>
</body>
</html>
和 if / else 中的 else 一样, default 也可以省略。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script>
let num = 7;
switch (num) {
case 1:
console.log("1");
break;
case 2:
console.log("2");
break;
}
</script>
</head>
<body>
</body>
</html>
if 和 switch 如何选择
需求: 要求判断一个数是否是大于 100 的数
- 在企业开发中如果是对区间进行判断, 那么建议使用 if。
- 在企业开发中如果是对几个固定的值的判断, 那么建议使用 switch。
- 原则: 能用 if 就用 if。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script>
let num = 20;
if (num > 100) {
alert("大于100的数");
} else {
alert("不大于100的数");
}
switch (num) {
case 101:
case 102:
case 103:
case 104:
}
</script>
</head>
<body>
</body>
</html>
