分析switch语句的穿透效果
<body>
<input type="text">
<button>今天谁学得最好？</button>
<script>
var btn = document.querySelector('button');
var txt = document.querySelector('input');
btn.onclick = function () {
var value = txt.value;
switch (value) {
case '1':
console.log('今天小明学得最好');
//break;
case '2':
console.log('今天张三学得最好');
//break;
case '3':
console.log('今天李四学得最好');
//break;
case '4':
console.log('今天王五学得最好');
//break;
}
}
</script>
</body>
穿透效果总结：
找到对应的匹配项之后，从该匹配项执行，一直到代码的结束
switch中的 value 和 case 变量的判断是全等===比较
利用break解决穿透问题
<body>
<input type="text">
<button>今天谁学得最好？</button>
<script>
var btn = document.querySelector('button');
var txt = document.querySelector('input');
btn.onclick = function () {
var value = txt.value;
switch (value) {
case '1':
console.log('今天小明学得最好');
break;
case '2':
console.log('今天张三学得最好');
break;
case '3':
console.log('今天李四学得最好');
break;
case '4':
console.log('今天王五学得最好');
break;
}
}
</script>
</body>
合理利用switch穿透解决实际问题
<body>
<input type="text">
<button>今天谁没有学习？</button>
<script>
var btn = document.querySelector('button');
var txt = document.querySelector('input');
btn.onclick = function () {
var value = txt.value;
switch (value) {
case '1':
case '2':
case '3':
console.log('今天张三没有学习');
break;
case '4':
console.log('今天王五没有学习');
break;
default:
console.log('今天大家都有学习');
break;
}
}
</script>
</body>
