JavaScript
Warunki

Wprowadzenie

Składnia

• instrukcja if ( warunek );
• if ( warunek ) zestawienie_1 , zestawienie_2 , ... , zestawienie_n ;
• if ( warunek ) {
  komunikat
  }
• if ( warunek ) {
  instrukcja_1 ;
  zestawienie_2 ;
  ...
  instrukcja_n ;
  }
• if ( warunek ) {
  komunikat
  } else {
  komunikat
  }
• jeśli ( warunek ) {
  komunikat
  } else if ( condition ) {
  komunikat
  } else {
  komunikat
  }
• przełącznik ( wyrażenie ) {
  Sprawa wartosc1:
  komunikat
  [przerwa;]
  Sprawa value2:
  komunikat
  [przerwa;]
  wartość sprawyN :
  komunikat
  [przerwa;]
  domyślna:
  komunikat
  [przerwa;]
  }
• stan ? wartość_prawda : wartość_fałsz ;

Uwagi

If / Else If / Else Control

W najprostszej formie można użyć warunku if :

var i = 0;

if (i < 1) {
    console.log("i is smaller than 1");
}

Warunek i < 1 jest oceniany, a jeśli true , następuje następujący blok. Jeśli wartość ma wartość false , blok jest pomijany.

Warunek if można rozszerzyć za pomocą bloku else . Warunek jest sprawdzany jeden raz, jak powyżej, a jeśli ma wartość false zostanie wykonany blok pomocniczy (który zostałby pominięty, gdyby warunek był true ). Przykład:

if (i < 1) {
    console.log("i is smaller than 1");
} else {
    console.log("i was not smaller than 1");
}

Załóżmy, że blok else zawiera tylko inny blok if (z opcjonalnym blokiem else ) w następujący sposób:

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");
    }
}

Istnieje również inny sposób napisania tego, który ogranicza zagnieżdżanie:

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");
}

Kilka ważnych przypisów do powyższych przykładów:

• Jeśli jakikolwiek warunek zostanie oceniony jako true , żaden inny warunek w tym łańcuchu bloków nie zostanie oceniony, a wszystkie odpowiadające mu bloki (w tym blok else ) nie zostaną wykonane.

• Liczba else if elementów jest praktycznie nieograniczona. Ostatni przykład powyżej zawiera tylko jeden, ale możesz mieć tyle, ile chcesz.

• Warunkiem w instrukcji if może być cokolwiek, co można zmusić do wartości boolowskiej, więcej informacji można znaleźć w temacie dotyczącym logiki boolowskiej ;

• Drabina if-else-if wychodzi z pierwszym sukcesem. To znaczy, w powyższym przykładzie, jeśli wartość i wynosi 0,5, wówczas wykonywana jest pierwsza gałąź. Jeśli warunki się pokrywają, wykonywane są pierwsze kryteria występujące w przepływie wykonania. Drugi warunek, który może być również spełniony, jest ignorowany.

• Jeśli masz tylko jedną instrukcję, nawiasy klamrowe wokół tej instrukcji są technicznie opcjonalne, np. Jest w porządku:

  if (i < 1) console.log("i is smaller than 1");
  

  I to również zadziała:

  if (i < 1) 
      console.log("i is smaller than 1");
  

  Jeśli chcesz wykonać wiele instrukcji w bloku if , to nawiasy klamrowe wokół nich są obowiązkowe. Tylko użycie wcięcia nie wystarczy. Na przykład następujący kod:

  if (i < 1) 
      console.log("i is smaller than 1");
      console.log("this will run REGARDLESS of the condition"); // Warning, see text!
  

  jest równa:

  if (i < 1) {
      console.log("i is smaller than 1");
  }
  console.log("this will run REGARDLESS of the condition");
  

Instrukcja zamiany

Instrukcje switch porównują wartość wyrażenia z 1 lub więcej wartościami i wykonują różne sekcje kodu na podstawie tego porównania.

var value = 1;
switch (value) {
  case 1:
    console.log('I will always run');
    break;
  case 2:
    console.log('I will never run');
    break;
}

Instrukcja break „zrywa” z instrukcji switch i zapewnia, że nie zostanie wykonany żaden kod w instrukcji switch. W ten sposób definiuje się sekcje i pozwala użytkownikowi na „wypadnięcie” przypadków.

Ostrzeżenie : brak instrukcji break lub return dla każdego przypadku oznacza, że program będzie kontynuował ocenę następnego przypadku, nawet jeśli kryteria przypadku nie są spełnione!

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

Ostatni przypadek jest przypadkiem default . Ten uruchomi się, jeśli nie zostaną wykonane żadne inne mecze.

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');
}

Należy zauważyć, że wyrażenie case może być dowolnym rodzajem wyrażenia. Oznacza to, że możesz używać porównań, wywołań funkcji itp. Jako wartości wielkości liter.

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

Wiele kryteriów uwzględniających przypadki

Ponieważ przypadki „przechodzą” bez instrukcji break lub return , możesz użyć tego do utworzenia wielu kryteriów włączenia:

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
}

Operatorzy trójskładnikowi

Może być użyty do skrócenia operacji if / else. Jest to przydatne do szybkiego zwracania wartości (tj. W celu przypisania jej do innej zmiennej).

Na przykład:

var animal = 'kitty';
var result = (animal === 'kitty') ? 'cute' : 'still nice';

W tym przypadku result otrzymuje wartość „uroczą”, ponieważ wartość zwierzęcia to „kotek”. Gdyby zwierzę miało inną wartość, wynik uzyskałby wartość „wciąż ładną”.

Porównaj to z tym, czego chciałby kod z warunkami if/else .

var animal = 'kitty';
var result = '';
if (animal === 'kitty') {
    result = 'cute';
} else {
    result = 'still nice';
}

Warunki if lub else mogą mieć kilka operacji. W takim przypadku operator zwraca wynik ostatniego wyrażenia.

var a = 0;
var str = 'not a';
var b = '';
b = a === 0 ? (a = 1, str += ' test') : (a = 2);

Ponieważ a było równe 0, staje się 1 , a str staje się „nie testem”. Operacja z udziałem str była ostatnią, więc b otrzymuje wynik operacji, czyli wartość zawartą w str , tj. „Nie test”.

Operatorzy trójskładnikowi zawsze oczekują innych warunków, w przeciwnym razie wystąpi błąd składniowy. Aby obejść ten problem, możesz zwrócić zero coś podobnego w gałęzi else - nie ma to znaczenia, jeśli nie używasz wartości zwracanej, a jedynie skracasz (lub próbujesz skrócić) operację.

var a = 1;
a === 1 ? alert('Hey, it is 1!') : 0;

Jak widać, if (a === 1) alert('Hey, it is 1!'); zrobiłby to samo. Byłoby to tylko trochę dłużej, ponieważ nie wymaga obowiązkowego warunku else . Gdyby wystąpił else warunek, metoda trójskładnikowa byłaby znacznie czystsza.

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?');

Trójskładniki można zagnieżdżać w celu kapsułkowania dodatkowej logiki. Na przykład

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

Jest to to samo, co poniżej, if/else

if (foo) {
  if (bar) {
    1
  } else {
    2
  }
} else {
  3
}

Stylistycznie należy tego używać tylko z krótkimi nazwami zmiennych, ponieważ trójliniowe trójskładniki mogą drastycznie zmniejszyć czytelność.

Jedynymi instrukcjami, które nie mogą być używane w trójkach, są instrukcje sterujące. Na przykład nie można używać return ani break z trójkami. Poniższe wyrażenie będzie nieprawidłowe.

var animal = 'kitty';
for (var i = 0; i < 5; ++i) {
    (animal === 'kitty') ? break:console.log(i);
}

W przypadku instrukcji return następujące informacje byłyby również nieprawidłowe:

var animal = 'kitty';
(animal === 'kitty') ? return 'meow' : return 'woof';

Aby poprawnie wykonać powyższe czynności, należy zwrócić trójskładnik w następujący sposób:

var animal = 'kitty';
return (animal === 'kitty') ? 'meow' : 'woof';

Strategia

Wzorzec strategii może być używany w JavaScript w wielu przypadkach w celu zastąpienia instrukcji switch. Jest to szczególnie pomocne, gdy liczba warunków jest dynamiczna lub bardzo duża. Umożliwia to, aby kod dla każdego warunku był niezależny i osobno testowany.

Obiekt strategii jest prostym obiektem z wieloma funkcjami, reprezentującymi każdy odrębny warunek. Przykład:

const AnimalSays = {
    dog () {
        return 'woof';
    },

    cat () {
        return 'meow';
    },

    lion () {
        return 'roar';
    },

    // ... other animals

    default () {
        return 'moo';
    }
};

Powyższego obiektu można użyć w następujący sposób:

function makeAnimalSpeak (animal) {
    // Match the animal by type
    const speak = AnimalSays[animal] || AnimalSays.default;
    console.log(animal + ' says ' + speak());
}

Wyniki:

makeAnimalSpeak('dog') // => 'dog says woof'
makeAnimalSpeak('cat') // => 'cat says meow'
makeAnimalSpeak('lion') // => 'lion says roar'
makeAnimalSpeak('snake') // => 'snake says moo'

W ostatnim przypadku nasza domyślna funkcja obsługuje wszystkie brakujące zwierzęta.

Korzystanie || i zwarcia

Operatory logiczne || i && „zwarcie” i nie oceni drugiego parametru, jeśli pierwszy jest odpowiednio prawdą lub fałszem. Można to wykorzystać do napisania krótkich warunków, takich jak:

var x = 10

x == 10 && alert("x is 10")
x == 10 || alert("x is not 10")