if-sats - Grundläggande JavaScript if vs. else if

Min fråga är denna: Jag är ny på JavaScript, och jag försöker förstå skillnaden mellan uttalandena "if {" och "else if {". Hittills är de enda svar jag har hittat relaterade till någon som ärver min kod senare, uppenbarligen kommer ingen någonsin att ärva mitt klassprojekt! Min fråga specifikt är denna:

Jag håller på med sten-sax-påse-projektet på Codecademy. Min Math.random()-metod producerar ett slumpmässigt tal. Jag implementerade först min kod if (computerChoice <= 0.33){

och dess alternativ som:

if (computerChoice > 0.67){......    Which checked out and produced a viable answer. 

I sitt förslag använde den dock else if-satsen. Min specifika fråga är i vilket fall som helst att jag i princip sätter ett lågt intervall och ett högt intervall, och låter else representera mitten. Else betyder inte det tidigare villkoret. Men om mitt villkor för en andra if redan logiskt utesluter det tidigare svaret (vilket ändå skulle behöva uteslutas i else if-alternativet), vad exakt är skillnaden och varför använda else if/när skulle else if vara nödvändigt?

Min kod följer:

Alternativ ett (annars om):

var userChoice = prompt("do you want rock paper or scissors?");
var computerChoice = Math.random();

if (computerChoice <= 0.33){
  computerChoice = "rock";
}
else if (computerChoice >= 0.67){
 computerChoice = "scissors";
}
else {
 computerChoice = "paper";
}

console.log(computerChoice);

Alternativ två (2 if-satser):

var userChoice = prompt("do you want rock paper or scissors?");
var computerChoice = Math.random();

if (computerChoice <= 0.33){
 computerChoice = "rock";
}
if (computerChoice >= 0.67){
 computerChoice = "scissors";
}
else {
 computerChoice = "paper";
}

console.log(computerChoice);

Svar #1

If-else if-else-logik är mer elegant än ditt andra exempel eftersom det kommer att sluta utvärdera villkor efter att rätt tilldelning har gjorts.

Tänk på hur ditt andra fall (utan else if) skulle fungera om computerChoice är 0,25. Den första if-villkoret skulle utvärderas till sant och computerChoice skulle tilldelas "rock." Istället för att betrakta sig som klar skulle logiken dock fortsätta och kontrollera om computerChoice >= 0,67. Eftersom computerChoice nu är "rock," kommer tolken att försöka konvertera det till ett numeriskt värde. Eftersom rock inte kan konverteras, gissar jag att din logik, för tillfället, kommer att fungera som avsett.

Överväg dock en situation där du beslutar att definiera dina enheter -- sten, papper och sax -- som ett objekt, och att använda indexet för det objektet som resultatet av din bearbetning. Till exempel:

var myentities = 
{
    1: { name: "rock", image_url: "..." },
    2: { name: "paper", image_url: "..." },
    3: { name: "scissors", image_url: "..." }
};

Och anta att du också bestämmer dig för att sluta använda objektets namn, men istället använda dess ID. I så fall skulle din första if-sats tilldela värdet 1 till computerChoice -- och sedan skulle den andra if-satsen kontrollera om 1 >= 0,67. Som ett resultat skulle din kod (ganska oskyldigt) välja papper 100 % av tiden, vilket skulle förvirra dig mycket under en kort stund.

Moralen i historien: onödig utvärdering kommer aldrig att hjälpa dig och kan skada dig.

Svar #2

Om du kontrollerar olika villkor för samma variabel (eller något liknande) är else if snabbare. Om det matchar ett villkor, körs det och sedan är du klar med uttalandet. En hel uppsättning av if-satser innebär att koden måste gå igenom varje en av dem oavsett om den hittar den första som sann eller inte. Var dock medveten om att med 'else if' måste du endast leta efter ett av villkoren som matchar. Om du fortfarande vill kontrollera något efter det, måste det vara en annan 'if'-sats.