Zoeken…
Invoering
Voorwaardelijke uitdrukkingen, met trefwoorden zoals if en anders, bieden JavaScript-programma's de mogelijkheid om verschillende acties uit te voeren, afhankelijk van een Booleaanse voorwaarde: waar of onwaar. In deze sectie wordt het gebruik van JavaScript-conditionals, Booleaanse logica en ternaire verklaringen behandeld.
Syntaxis
- als ( voorwaarde ) verklaring ;
- if ( voorwaarde ) statement_1 , statement_2 , ... , statement_n ;
- if ( voorwaarde ) {
uitspraak
} - if ( voorwaarde ) {
statement_1 ;
statement_2 ;
...
statement_n ;
} - if ( voorwaarde ) {
uitspraak
} anders {
uitspraak
} - if ( voorwaarde ) {
uitspraak
} anders if ( voorwaarde ) {
uitspraak
} anders {
uitspraak
} - switch ( expressie ) {
case waarde1 :
uitspraak
[breken;]
case waarde2 :
uitspraak
[breken;]
zaak waardeN :
uitspraak
[breken;]
standaard:
uitspraak
[breken;]
} - staat ? value_for_true : value_for_false ;
Opmerkingen
Voorwaarden kunnen de normale programmastroom onderbreken door code uit te voeren op basis van de waarde van een expressie. In JavaScript betekent dit het gebruik van if
, else if
en else
statements en ternaire operatoren.
If / Else If / Else Control
In de meest eenvoudige vorm kan een if
voorwaarde als volgt worden gebruikt:
var i = 0;
if (i < 1) {
console.log("i is smaller than 1");
}
De voorwaarde i < 1
wordt geëvalueerd en als het true
wordt geëvalueerd, wordt het volgende blok uitgevoerd. Als het false
, wordt het blok overgeslagen.
Een if
voorwaarde kan worden uitgebreid met een else
blok. De voorwaarde wordt eenmaal gecontroleerd zoals hierboven, en als deze als false
wordt geëvalueerd, wordt een secundair blok uitgevoerd (dat zou worden overgeslagen als de voorwaarde true
). Een voorbeeld:
if (i < 1) {
console.log("i is smaller than 1");
} else {
console.log("i was not smaller than 1");
}
Stel dat het else
blok niets anders dan een ander if
blok bevat (met optioneel een else
blok) zoals dit:
if (i < 1) {
console.log("i is smaller than 1");
} else {
if (i < 2) {
console.log("i is smaller than 2");
} else {
console.log("none of the previous conditions was true");
}
}
Dan is er ook een andere manier om dit te schrijven die het nesten vermindert:
if (i < 1) {
console.log("i is smaller than 1");
} else if (i < 2) {
console.log("i is smaller than 2");
} else {
console.log("none of the previous conditions was true");
}
Enkele belangrijke voetnoten over de bovenstaande voorbeelden:
Als een voorwaarde als
true
wordt geëvalueerd, wordt geen andere voorwaarde in die keten van blokken geëvalueerd en worden alle bijbehorende blokken (inclusief hetelse
blok) niet uitgevoerd.Het aantal
else if
onderdelen vrijwel onbeperkt zijn. Het laatste voorbeeld hierboven bevat er slechts één, maar u kunt er zoveel hebben als u wilt.De voorwaarde in een
if
instructie kan alles zijn dat kan worden gedwongen tot een booleaanse waarde, zie het onderwerp over booleaanse logica voor meer informatie;De
if-else-if
ladder verlaat het eerste succes. Dat wil zeggen, in het bovenstaande voorbeeld, als de waarde vani
0,5 is, wordt de eerste vertakking uitgevoerd. Als de voorwaarden elkaar overlappen, worden de eerste criteria in de uitvoeringsstroom uitgevoerd. De andere voorwaarde, die ook waar zou kunnen zijn, wordt genegeerd.Als u slechts één bewering hebt, zijn de accolades rond die bewering technisch optioneel, dit is bijvoorbeeld prima:
if (i < 1) console.log("i is smaller than 1");
En dit zal ook werken:
if (i < 1) console.log("i is smaller than 1");
Als u meerdere instructies binnen een
if
blok wilt uitvoeren, zijn de accolades eromheen verplicht. Alleen inspringen is niet voldoende. Bijvoorbeeld de volgende code:if (i < 1) console.log("i is smaller than 1"); console.log("this will run REGARDLESS of the condition"); // Warning, see text!
is gelijk aan:
if (i < 1) { console.log("i is smaller than 1"); } console.log("this will run REGARDLESS of the condition");
Schakel statement
Switch-instructies vergelijken de waarde van een uitdrukking met 1 of meer waarden en voert verschillende secties code uit op basis van die vergelijking.
var value = 1;
switch (value) {
case 1:
console.log('I will always run');
break;
case 2:
console.log('I will never run');
break;
}
De break
"breekt" uit de switch-instructie en zorgt ervoor dat er geen code meer binnen de switch-instructie wordt uitgevoerd. Dit is hoe secties worden gedefinieerd en waarmee de gebruiker "doorval" -gevallen kan maken.
Waarschuwing : het ontbreken van een
break
ofreturn
verklaring voor elke case betekent dat het programma de volgende case blijft evalueren, zelfs als niet aan de case-criteria wordt voldaan!
switch (value) {
case 1:
console.log('I will only run if value === 1');
// Here, the code "falls through" and will run the code under case 2
case 2:
console.log('I will run if value === 1 or value === 2');
break;
case 3:
console.log('I will only run if value === 3');
break;
}
Het laatste geval is het default
. Deze wordt uitgevoerd als er geen andere wedstrijden zijn gemaakt.
var animal = 'Lion';
switch (animal) {
case 'Dog':
console.log('I will not run since animal !== "Dog"');
break;
case 'Cat':
console.log('I will not run since animal !== "Cat"');
break;
default:
console.log('I will run since animal does not match any other case');
}
Opgemerkt moet worden dat een hoofdletterexpressie elke uitdrukking kan zijn. Dit betekent dat u vergelijkingen, functieaanroepen, etc. kunt gebruiken als case-waarden.
function john() {
return 'John';
}
function jacob() {
return 'Jacob';
}
switch (name) {
case john(): // Compare name with the return value of john() (name == "John")
console.log('I will run if name === "John"');
break;
case 'Ja' + 'ne': // Concatenate the strings together then compare (name == "Jane")
console.log('I will run if name === "Jane"');
break;
case john() + ' ' + jacob() + ' Jingleheimer Schmidt':
console.log('His name is equal to name too!');
break;
}
Meerdere inclusieve criteria voor zaken
Omdat gevallen "doorbreken" zonder een break
of return
instructie, kunt u dit gebruiken om meerdere inclusieve criteria te maken:
var x = "c"
switch (x) {
case "a":
case "b":
case "c":
console.log("Either a, b, or c was selected.");
break;
case "d":
console.log("Only d was selected.");
break;
default:
console.log("No case was matched.");
break; // precautionary break if case order changes
}
Ternary operators
Kan worden gebruikt om if / else-bewerkingen in te korten. Dit is handig als u snel een waarde wilt retourneren (bijvoorbeeld om deze aan een andere variabele toe te wijzen).
Bijvoorbeeld:
var animal = 'kitty';
var result = (animal === 'kitty') ? 'cute' : 'still nice';
In dit geval krijgt het result
de 'schattige' waarde, omdat de waarde van dier 'poes' is. Als het dier een andere waarde had, zou het resultaat de 'nog steeds mooie' waarde krijgen.
Vergelijk dit met wat de code zou willen met if/else
voorwaarden.
var animal = 'kitty';
var result = '';
if (animal === 'kitty') {
result = 'cute';
} else {
result = 'still nice';
}
De if
of else
voorwaarden kunnen verschillende bewerkingen hebben. In dit geval retourneert de operator het resultaat van de laatste uitdrukking.
var a = 0;
var str = 'not a';
var b = '';
b = a === 0 ? (a = 1, str += ' test') : (a = 2);
Omdat a
gelijk was aan 0, wordt het 1
en wordt str
'geen test'. De bewerking waarbij str
betrokken was, was de laatste, dus ontvangt b
het resultaat van de bewerking, dat is de waarde in str
, dat wil zeggen 'geen test'.
Ternary-operators verwachten altijd andere omstandigheden, anders krijg je een syntaxisfout. Als oplossing kunt u een nul retourneren, iets soortgelijks in de branch branch - dit maakt niet uit als u de retourwaarde niet gebruikt, maar alleen de bewerking verkort (of probeert in te korten).
var a = 1;
a === 1 ? alert('Hey, it is 1!') : 0;
Zoals u ziet, if (a === 1) alert('Hey, it is 1!');
zou hetzelfde doen. Het zou gewoon een char langer zijn, omdat het geen verplichte else
voorwaarde nodig heeft. Als er iets else
aan de hand was, zou de ternaire methode veel schoner zijn.
a === 1 ? alert('Hey, it is 1!') : alert('Weird, what could it be?');
if (a === 1) alert('Hey, it is 1!') else alert('Weird, what could it be?');
Ternaries kunnen worden genest om extra logica in te kapselen. Bijvoorbeeld
foo ? bar ? 1 : 2 : 3
// To be clear, this is evaluated left to right
// and can be more explicitly expressed as:
foo ? (bar ? 1 : 2) : 3
Dit is hetzelfde als het volgende if/else
if (foo) {
if (bar) {
1
} else {
2
}
} else {
3
}
Stilistisch mag dit alleen worden gebruikt met korte variabelenamen, omdat ternaire met meerdere regels de leesbaarheid drastisch kan verminderen.
De enige verklaringen die niet in ternaire kunnen worden gebruikt, zijn controleverklaringen. U kunt bijvoorbeeld geen retouren gebruiken of breken met ternaire. De volgende uitdrukking is ongeldig.
var animal = 'kitty';
for (var i = 0; i < 5; ++i) {
(animal === 'kitty') ? break:console.log(i);
}
Voor retourafschriften zou ook het volgende ongeldig zijn:
var animal = 'kitty';
(animal === 'kitty') ? return 'meow' : return 'woof';
Om het bovenstaande goed te doen, zou je de ternaire als volgt retourneren:
var animal = 'kitty';
return (animal === 'kitty') ? 'meow' : 'woof';
Strategie
Een strategiepatroon kan in veel gevallen in Javascript worden gebruikt om een schakeloptie te vervangen. Dit is vooral handig als het aantal voorwaarden dynamisch of zeer groot is. Hiermee kan de code voor elke voorwaarde onafhankelijk en afzonderlijk testbaar zijn.
Strategieobject is een eenvoudig object met meerdere functies die elke afzonderlijke voorwaarde vertegenwoordigen. Voorbeeld:
const AnimalSays = {
dog () {
return 'woof';
},
cat () {
return 'meow';
},
lion () {
return 'roar';
},
// ... other animals
default () {
return 'moo';
}
};
Het bovenstaande object kan als volgt worden gebruikt:
function makeAnimalSpeak (animal) {
// Match the animal by type
const speak = AnimalSays[animal] || AnimalSays.default;
console.log(animal + ' says ' + speak());
}
resultaten:
makeAnimalSpeak('dog') // => 'dog says woof'
makeAnimalSpeak('cat') // => 'cat says meow'
makeAnimalSpeak('lion') // => 'lion says roar'
makeAnimalSpeak('snake') // => 'snake says moo'
In het laatste geval behandelt onze standaardfunctie ontbrekende dieren.
|| gebruiken en && kortsluiting
De Booleaanse operatoren ||
en &&
zullen "kortsluiten" en de tweede parameter niet evalueren als de eerste respectievelijk waar of onwaar is. Dit kan worden gebruikt om korte conditionals te schrijven, zoals:
var x = 10
x == 10 && alert("x is 10")
x == 10 || alert("x is not 10")