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 het else 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 van i 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 of return 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")


Modified text is an extract of the original Stack Overflow Documentation
Licentie onder CC BY-SA 3.0
Niet aangesloten bij Stack Overflow