Warunkowe rozgałęzienia w JavaScript

Ten artykuł wyjaśnia warunkowe rozgałęzienia w JavaScript.

YouTube Video

Instrukcja if w JavaScript

Podstawowa składnia

1if (condition) {
2    // Code that executes if the condition is true
3}

Instrukcja if w JavaScript to podstawowa struktura sterująca używana do kontrolowania wykonywania kodu w zależności od tego, czy określony warunek jest prawdziwy, czy fałszywy. Jeśli warunek jest prawdziwy, blok kodu jest wykonywany, a jeśli jest fałszywy, jest pomijany.

Przykład

1let x = 10;
2
3if (x > 5) {
4    console.log("x is greater than 5");
5}

W tym przykładzie, ponieważ wartość x jest większa niż 5, w konsoli wyświetlany jest komunikat x jest większe niż 5.

Instrukcja else

Podstawowa składnia

1if (condition) {
2    // Code that executes if the condition is true
3} else {
4    // Code that executes if the condition is false
5}

Używając instrukcji else po instrukcji if, można określić kod, który zostanie wykonany, gdy warunek jest fałszywy.

Przykład

1let x = 3;
2
3if (x > 5) {
4    console.log("x is greater than 5");
5} else {
6    console.log("x is 5 or less");
7}

W tym przypadku, ponieważ x jest mniejsze niż 5, wyświetlany jest komunikat "x jest 5 lub mniej".

Instrukcja else if

Podstawowa składnia

1if (condition1) {
2    // Code that executes if condition1 is true
3} else if (condition2) {
4    // Code that executes if condition1 is false and condition2 is true
5} else {
6    // Code that executes if both condition1 and condition2 are false
7}

Jeśli chcesz sprawdzić wiele warunków, użyj instrukcji else if. Następny warunek jest sprawdzany, jeśli początkowy if jest fałszywy.

Przykład

1let x = 5;
2
3if (x > 10) {
4    console.log("x is greater than 10");
5} else if (x === 5) {
6    console.log("x is 5");
7} else {
8    console.log("x is 5 or less");
9}

W tym przypadku, ponieważ x wynosi 5, wyświetlone zostanie "x to 5".

Operator trójargumentowy (operator warunkowy)

Składnia

1condition ? valueIfTrue : valueIfFalse

Jeśli chcesz skrócić zapis instrukcji if, możesz użyć operatora trójargumentowego.

Przykład

1const number = 7;
2const result = number % 2 === 0 ? "Even" : "Odd";
3console.log(result); // "Odd"

W tym przypadku, ponieważ number wynosi 7, wyświetlany jest komunikat Nieparzysta.

Podsumowanie

• Instrukcje if kontrolują, który kod zostanie wykonany w zależności od tego, czy warunek jest prawdziwy, czy fałszywy.
• Możesz określić zachowanie w przypadku, gdy warunek jest fałszywy, używając instrukcji else.
• Możesz sprawdzić wiele warunków, używając instrukcji else if.
• Możesz również użyć operatora trójargumentowego, aby zwięźle zapisać warunkowe rozgałęzienia.

Instrukcja switch w JavaScript

Podstawowa składnia

 1switch (expression) {
 2    case value1:
 3        // Code that executes if the expression matches value1
 4        break;
 5    case value2:
 6        // Code that executes if the expression matches value2
 7        break;
 8    default:
 9        // Code that executes if no cases match
10}

Instrukcja switch w JavaScript jest używana do porównania jednego wyrażenia (zazwyczaj zmiennej) z wieloma wartościami (przypadkami) i wykonania odpowiedniego kodu. Podobnie jak instrukcja if, wykonuje warunkowe rozgałęzienia, ale często jest bardziej czytelna, gdy istnieje wiele warunków.

Przykład

 1let fruit = "apple";
 2
 3switch (fruit) {
 4    case "apple":
 5        console.log("This is an apple");
 6        break;
 7    case "banana":
 8        console.log("This is a banana");
 9        break;
10    default:
11        console.log("Unknown fruit");
12}

W tym przykładzie, ponieważ fruit jest "apple", "This is an apple" zostanie wyświetlone w konsoli.

break の役割

Wstawiając break na końcu każdego przypadku, wychodzisz z instrukcji switch po zakończeniu tego przypadku. Jeśli nie zapiszesz break, zostanie również wykonany następny przypadek (nazywa się to fall-through).

Przykład Fall-Through

 1let color = "red";
 2
 3switch (color) {
 4    case "red":
 5        console.log("This is red");
 6    case "blue":
 7        console.log("This is blue");
 8    default:
 9        console.log("Unknown color");
10}

W tym przypadku, ponieważ color to "red", a po "This is red" nie ma break, zostaną wyświetlone zarówno "This is blue", jak i "Unknown color".

Używanie default

default to część, która jest wykonana, gdy nie ma dopasowania do żadnego case. To odpowiada else w instrukcji if.

 1let animal = "dog";
 2
 3switch (animal) {
 4    case "cat":
 5        console.log("This is a cat");
 6        break;
 7    case "bird":
 8        console.log("This is a bird");
 9        break;
10    default:
11        console.log("Unknown animal");
12}

W tym przypadku, ponieważ animal to "dog", wchodzi w default, a wyświetlone jest "Unknown animal".

Obsługa wielu wartości za pomocą tego samego przypadku

Jeśli chcesz wykonać tę samą operację dla wielu przypadków, możesz je zapisać kolejno.

Przykład

 1let day = 1;
 2switch (day) {
 3    case 1:
 4    case 2:
 5    case 3:
 6    case 4:
 7    case 5:
 8        console.log("Weekday");
 9        break;
10    case 6:
11    case 7:
12        console.log("Weekend");
13        break;
14    default:
15        console.log("Unknown day");
16}

W tym przykładzie, jeśli day to 1, wyświetlana jest "Weekday".

switch vs. if

• Instrukcja if nadaje się do sprawdzania złożonych warunków lub zakresów. Na przykład, złożonych warunków, takich jak zmienna x większa lub równa 10 oraz mniejsza lub równa 20, nie można zapisać w switch.
• Instrukcja switch czasami może sprawić, że kod stanie się bardziej czytelny, gdy sprawdzasz, czy wartość odpowiada określonej.

Podsumowanie

• Instrukcja switch jest używana do zwięzłego zapisywania warunkowych rozgałęzień dla wielu wartości.
• Jeśli nie użyjesz break na końcu każdego case, może zostać wykonany również następny case (przejście dalej).
• default jest wykonany, gdy żaden z przypadków nie pasuje.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video