javascript - 为什么我的 switch 语句运行多个 case？

Question

我有以下功能:

$("#drpType").change(function () {
    var SelectedVal = this.value;
    switch (SelectedVal) {
        case "2021":
            console.log('a');
            console.log('b');
        case "2020":
            console.log('a');
        case "ADB":
            console.log('b');
        case "PWP":
            console.log('c');
    }
}

为什么当SelectedVal为2021时，是否打印a,b,a,b,c？

在 jsfiddle 中创建场景.现在我能理解你的问题了。当选择 2021 时，它返回 2 个 div。如果 switch 语句基于 fall-thought 那么为什么它会很高兴如果选择 EFGH 唯一可见的 div 而不是 3？

<select id="drpQuotaType" >
  <option value="0">Select</option>
  <option value="2021">2021</option>
  <option value="2020">2020</option>
  <option value="ABCD">ABCD</option>
  <option value="EFGH">EFGH</option>
</select>

<div id="dv1" style="display:none">Div 1 </div></br>
<div id="dv2" style="display:none">Div 2 </div></br>
<div id="dv3" style="display:none">Div 3 </div></br>
<div id="dv4" style="display:none">Div 4 </div>


$("#drpQuotaType").change(function () {
            var SelectedVal = this.value;
            $('#dv1').hide();
            $('#dv2').hide();
            $('#dv3').hide();
            switch (SelectedVal) {
                case "2021":
                    $('#dv1').show();
                    $('#dv2').show();
                case "2020":
                    $('#dv2').show();
                case "ABCD":
                    $('#dv2').show();
                case "EFGH":
                    $('#dv3').show();
            }

});

Answer 1

那是因为你没有break语句。没有它，代码将“失败”。

var x = 10;
switch (x) {
  case 10:
    console.log('With break');
    break;
    
  case 20:
    console.log('I never run');
    break;
}

console.log('-------');

switch (x) {
  case 10:
    console.log('Without');
  case 20:
    console.log('a break');
  case 30:
    console.log('it just');
  case 40:
    console.log('keeps going');
}

存在这种情况的原因是有时失败是有用的。您可以想象这样一种情况，您正在更新游戏的状态以及针对特定类型的敌人以及所有敌人会发生什么。

var characterType = 'big boss';

switch (characterType) {
  case 'big boss':
    console.log('Update the big boss');
  
  case 'enemy':
    console.log('The big boss is also an enemy so run the basic enemy code');
    break;
    
  case 'player':
    console.log('The boss is not a player so we will not run this.');
    break;
}

使用 fall-through 并不常见，但它确实有其用例。

最后，您的代码应该如下所示:

$("#drpType").change(function () {
    var SelectedVal = this.value;
    switch (SelectedVal) {
        case "2021":
            console.log('a');
            console.log('b');
            break; // <--

        case "2020":
            console.log('a');
            break; // <--

        case "ADB":
            console.log('b');
            break; // <--

        case "PWP":
            console.log('c');
            break; // optional. It's visually consistent but doesn't do anything
    }
}