If-Anweisung versus switch-Anweisung in Javascript

Question

Ich habe einen interessanten Fall für alle, die glauben, dass sie JavaScript und seine Schalter und if-Anweisung so gut kennen. So sollte es normalerweise funktionieren:

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

Dies ist extrem vereinfacht. Mit der Switch-Anweisung, geht es wie folgt aus:

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

Allerdings, wenn ich die switch-Anweisung zu tun versuchen, richtig, soweit ich das beurteilen kann, eine Menge zu ersetzen, wenn Aussagen, plötzlich kann ich nicht scheinen, damit es funktioniert. Natürlich wurde diese Frage oft gestellt, aber alle Codes sind unterschiedlich und es gibt kein einheitliches Muster dafür, so dass ich es selbst nicht online finden konnte.

Der Code unten ausgeben soll, die der Held richtigen Werte haben sich nicht bestätigt wird:

<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> 

bat ich den Browser den Wert waarde zu alarmieren zurück, dessen Wert es sich handelt.

Hier ein Screenshot, wie es aussehen soll: http://i.imgur.com/Lu172nY.png

Hier ist, wie es tatsächlich aussieht: (es nicht sagen, dass seine Werte nicht korrekt sind) http://i.imgur.com/oU1Vjxl.png

Ich bin zu antworten bereit zu so vielen Fragen wie Sie vielleicht zu dieser interessanten Szene haben. Vielleicht übersehe ich etwas, aber ich bin mir nicht sicher, was es ist.

Grüße, Patrick

Answer 1

Es ist, weil der Wert, den Sie in dem Switch-Anweisungstext verwendet.

Versuchen Sie es in der Konsole:

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

Sie wahrscheinlich switch(parseInt(a)) verwenden sollten.

Answer 2

Was passiert ist, dass Sie sich daran gewöhnt haben, dass JavaScript vergleicht, was Sie vorhaben, nicht, was Sie sagen.

Dieses Phänomen wird type coercion genannt, und es geschieht, wenn Sie die Verwendung == (2x =) Operator statt === (3x =).

Wenn Sie ==, zum Beispiel in '1' == 1, einer der Werte in den Typ des anderen umgewandelt (dies wird coercion genannt), so - in diesem Beispiel - die Ist-Vergleich '1' == '1' ist, die in true führt.

Wenn Sie === verwenden, um vergleichen zu können, wird der Wert muss sowohl Wert und Typen gleich sein, so '1' === 1 in false führen.

Die switch nicht tut dies coercion, so wird es sich verhalten, als ob Sie den Vergleich mit === (wo beide Wert und Typ muss gleich sein).

Damit die switch ordnungsgemäß funktioniert, müssen Sie sicherstellen, dass der an switch(value) zugeführte Wert den gleichen Typ aufweist wie die Werte, die Sie in case verwenden.

Ihr Code nimmt einen Wert aus dem DOM (eine Form), mit

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

das ist immer ein String-Typ sein, so dass Sie entweder Strings in Ihnen Fall (zB case '1':) oder konvertieren Sie den Wert verwenden müssen erhalten aus dem DOM in eine Anzahl (zB waarde = parseInt(..., 10) (the radix argument is important!))

read more on coercion