JavaScript中的if语句与switch语句

Question

对于每个认为自己很了解javascript及其开关以及if语句的人来说，我都有一个有趣的案例。 这是正常的工作方式：

var a = 1;
if (a == 1) alert("true");

这是极其简化的。 使用switch语句，它像这样：

var a = 1;
switch (a)
{
  case 1: alert("true");
}

但是，当我尝试执行switch语句时，据我所知正确地替换了许多if语句，我突然似乎无法使它工作。 当然，这个问题已经被问过很多次了，但是所有代码都不同，并且没有一致的模式，所以我自己无法在线找到它。

下面的代码应该输出未确认英雄的值正确的代码：

<script type="text/javascript">
  Skilllevel = [0,20,80,150,300,800,1000,1200,1400,1600,2000,2250,2500,2750,3000,4000,4200,4400,4700,5000];
  Merclevel = [0,150];
  A = 0;
  B = "";
  hero = "";
  heroesMain = [0,0,0,0,0,0,0,0,0,0,16,0,0,0,16,0,18,16,16,16,0,0,0,0,0,0,0];
  heroesCost = [0,0,0,0,0,0,1,0,2,1,1,0,0,1.5,1,1,2,1,1,1.5,0,0,0,0,0,0,0];
  function skillcalc()
  {
    var confirmed = "";
    var skillQ = document.getElementById("SkillQ").value;
    var skillA = document.getElementById("SkillA").value;
    if (skillQ == "max") skillQ = 20;
    else if (skillQ == "min") skillQ = 1;
    else if (skillQ < 0) skillQ = 0;
    if (skillA > 20) skillA = 20;
    else if (skillA == "tomin")
    {
      waarde = document.getElementById("heroes").value;
      hero = document.getElementById("heroes");
      /*if (waarde == 1 || waarde == 2 || waarde == 3 || waarde == 4 || waarde == 5 || waarde == 6 || waarde == 7 || waarde == 8 || waarde == 9 || waarde == 10 || waarde == 11 || waarde == 12 || waarde == 13 || waarde == 14 || waarde == 15 || waarde == 16 || waarde == 17 || waarde == 18 || waarde == 19 || waarde == 20 || waarde == 22 || waarde == 22 || waarde == 23 || waarde == 24 || waarde == 25 || waarde == 26) confirmed = "NOT ";*/
//switch statement not working
switch (waarde)
{
case 1: confirmed = "NOT ";
}
      hero = hero.options[hero.selectedIndex].text;
      skillA = heroesMain[waarde];
      if (heroesMain[waarde] == 0 || heroesCost[waarde] == 0) B+="I don\'t know some of it, but here it comes:<br />";
     // if (waarde == 1 || waarde == 2) confirmed = "NOT ";
      B += "The " + hero + " costs " + heroesCost[waarde] + " rage at level " + heroesMain[waarde] + ". <br />WARNING! Everything is still being tested. <br /> This hero is " + confirmed + "confirmed to have correct values.";
    }
    else if (skillA < 0) skillA = 0;
    while (skillA > skillQ)
    {
      A+=Skilllevel[skillQ];
      skillQ++;
    }
    WriteNew = document.getElementById("writeNew");
    if (WriteNew.checked)
    {
      document.getElementById("Answer").innerHTML+= "The # of rings required = " + A  + "<br />"+ B;
    }
    else
    {
      document.getElementById("Answer").innerHTML= "The # of rings required = " + A  + "<br />"+ B;
    }
    A=0;
    B="";
  }
</script>
Your hero: 
<select id="heroes">
<option value="0" selected="selected">[Any epic hero]</option>
<option value="1">Air Elite</option>
<option value="2">Glory Priestress</option>
<option value="3">Blockhead</option>
<option value="4">Carol d'Belle</option>
<option value="5">Blitz Bomber</option>
<option value="6">Pounder</option>
<option value="7">Hydrasaur</option>
<option value="8">Renee Ven</option>
<option value="9">Arctic Lord</option>
<option value="10">Pan Goli</option>
<option value="11">Sapphirix</option>
<option value="12">Dark Rider</option>
<option value="13">Great Sage</option>
<option value="14">Abyss Demon</option>
<option value="15">Landslide</option>
<option value="16">Ambrosia</option>
<option value="17">Skull Mage</option>
<option value="18">Chiron</option>
<option value="19">Djinni</option>
<option value="20">Demon Slayer</option>
<option value="21">Enchantress</option>
<option value="22">The Berserker</option>
<option value="23">Savage Chief</option>
<option value="24">Won Ton</option>
<option value="25">Arcane Caster</option>
<option value="26">Toxic Shaman</option>
</select>
<br />
Your skilllevel: <input type="text" id="SkillQ"><br />
Required skilllevel: <input type="text" id="SkillA"><br />
<label for="writeNew">Write New?</label><input type="checkbox" id="writeNew" /><br />
<button onclick="skillcalc()">Calculate</button>

<p id="Answer"></p>

我要求浏览器提醒waarde的值，这是关于waarde的值。

以下是其外观的屏幕截图： http : //i.imgur.com/Lu172nY.png

实际上是这样的：（并没有说明其值不正确） http://i.imgur.com/oU1Vjxl.png

对于这个有趣的场景，我愿意回答尽可能多的问题。 也许我正在忽略某些东西，但是我不太确定它是什么。

问候，帕特里克

Answer 1

这是因为您在切换语句中使用的值是文本。

在控制台中尝试：

var a = '1'; 
switch(a) {
    case 1: alert('Number'); 
    case '1': alert('Text');
}

您可能应该使用switch(parseInt(a)) 。

Answer 2

发生的事情是您已经习惯于用JavaScript比较您的意图，而不是您说的话。

这种现象称为type coercion ，当您使用== （2x =）运算符而不是=== （3x =）时会发生这种现象。

当您使用== ，例如在'1' == 1 ，其中一个值将转换为另一个值的类型（这称为coercion ），因此-在此示例中-实际比较为'1' == '1' ，结果为true 。

如果使用===进行比较，则该值的值和类型必须相等，因此'1' === 1将导致false 。

switch不会coercion执行此操作，因此它的行为就像使用===进行比较（其中值和类型必须相等）一样。

为了使switch正常工作，必须确保馈送到switch(value)的值与case使用的值具有相同的类型。

您的代码使用以下命令从DOM（表单）中获取值：

waarde = document.getElementById("heroes").value

这将始终是字符串类型，因此您必须在这种情况下使用字符串（例如， case '1': waarde = parseInt(..., 10) ，或将从DOM获得的值转换为数字，（例如， waarde = parseInt(..., 10) （ 基数参数很重要！ ））

阅读有关强制的更多信息