Instrukcje warunkowe w JavaSkrypt: if, else i else if

Przez: Jamesa Hartmana Jamesa Hartmana
Hours Zaktualizowano

⚡ Inteligentne podsumowanie

Instrukcje warunkowe w JavaSkrypt decyduje, który blok kodu ma zostać uruchomiony, poprzez testowanie warunku, a formularze if, if…els i if…els if…els obejmują niemal każdą decyzję rozgałęzioną, jakiej początkujący skrypt kiedykolwiek będzie potrzebował.

  • 🔘 Składnia: Instrukcja if uruchamia blok tylko wtedy, gdy warunek w nawiasach ma wartość true.
  • ️ Dwie gałęzie: Instrukcja if…else udostępnia blok zapasowy, który jest uruchamiany za każdym razem, gdy warunek jest fałszywy.
  • ✅ Wiele oddziałów: Łańcuch else if testuje kolejno kilka warunków i zatrzymuje się na pierwszym spełnionym warunku.
  • 🧪 Stenografia: Operator trójargumentowy skraca proste instrukcje if…else do jednego wyrażenia zwracającego wartość.
  • 🛠️. Alternatywa: Instrukcja switch porównuje jedną wartość z wieloma stałymi opcjami w sposób bardziej przejrzysty niż długi łańcuch.
  • 📊 Pułapki: Błędne wartości, błędny operator przypisania i brakujące nawiasy klamrowe są przyczyną większości błędów warunkowych.
Czytaj więcej

Instrukcje warunkowe w JavaScenariusz

JavaSkrypt instrukcji warunkowych

Istnieją głównie trzy typy instrukcji warunkowych JAVASCRIPT.

  1. jeśli oświadczenie: Instrukcja „if” wykonuje kod w oparciu o warunek.
  2. jeśli…inne Oświadczenie: Instrukcja if…else składa się z dwóch bloków kodu; gdy warunek jest prawdziwy, wykonuje pierwszy blok kodu, a gdy warunek jest fałszywy, wykonuje drugi blok kodu.
  3. if…else if…else Instrukcja: Gdy trzeba przetestować wiele warunków i wykonać różne bloki kodu w zależności od tego, który warunek jest prawdziwy, używana jest instrukcja if…else if…else.

Poniżej omówimy każdą z trzech form wraz ze składnią i przykładem do uruchomienia. Te same zasady obowiązują niezależnie od tego, czy skrypt jest wewnątrz strony lub w pliku zewnętrznymi czy warunek jest zapisany na najwyższym poziomie czy wewnątrz funkcjonować.

Jak korzystać z instrukcji warunkowych

Instrukcje warunkowe służą do decydowania o przebiegu wykonania na podstawie różnych warunków. Jeśli warunek jest prawdziwy, możesz wykonać jedną akcję, a jeśli warunek jest fałszywy, możesz wykonać inną akcję.

Poniższy diagram ilustruje tę ideę jako rozwidlenie drogi: pojedynczy warunek jest oceniany raz, a sterowanie przechodzi albo prawdziwą, albo fałszywą gałęzią, nigdy obiema.

Schemat blokowy pokazujący JavaWarunek skryptu rozgałęziający się na ścieżkę prawdziwą i ścieżkę fałszywą

Jeśli instrukcja

Składnia:

if(condition)
{
	lines of code to be executed if condition is true
}

Możesz użyć if polecenie, jeśli chcesz sprawdzić tylko konkretny warunek. Gdy wyrażenie w nawiasach zostanie ocenione jako trueblok jest uruchamiany, gdy zostanie oceniony jako false, interpreter pomija go i skrypt kontynuuje wykonywanie następnego polecenia.

Spróbuj tego sam:

<html>
<head>
	<title>IF Statments!!!</title>
	<script type="text/javascript">
		var age = prompt("Please enter your age");
		if(age>=18)
		document.write("You are an adult <br />");
		if(age<18)
		document.write("You are NOT an adult <br />");
	</script>
</head>
<body>
</body>
</html>

W przykładzie użytkownik jest proszony o podanie wieku, a następnie dwukrotnie sprawdza tę wartość: raz dla osób w wieku 18 lat i starszych, raz dla osób poniżej 18 lat. Ponieważ dwa oddzielne if oświadczenia są używane zamiast else, oba warunki są sprawdzane przy każdym ładowaniu strony.

Współczesny odpowiednik: Powyższy kod jest zachowany dokładnie w takiej formie, w jakiej został opublikowany. W obecnej wersji JavaSkrypt, w którym zwykle pisze się tę samą logikę let or const zamiast varZ console.log() or textContent zamiast document.write()i bez type="text/javascript" atrybut, który w HTML5 jest opcjonalny.

Instrukcja if…else

Składnia:

if(condition)
{
	lines of code to be executed if the condition is true
}
else
{
	lines of code to be executed if the condition is false
}

Możesz użyć if...else Instrukcja ta pozwala sprawdzić jeden warunek i wykonać inny blok kodu dla każdego wyniku. Dokładnie jeden z dwóch bloków zawsze jest uruchamiany, więc nie jest wymagany oddzielny drugi test.

Spróbuj tego sam:

<html>
<head>
	<title>If...Else Statments!!!</title>
	<script type="text/javascript">
		// Get the current hours
		var hours = new Date().getHours();
		if(hours<12)
		document.write("Good Morning!!!<br />");
		else
		document.write("Good Afternoon!!!<br />");
	</script>
</head>
<body>
</body>
</html>

Tutaj new Date().getHours() zwraca aktualną godzinę zegara przeglądarki jako liczbę od 0 do 23. Każda wartość poniżej 12 powoduje powitanie poranne, a każda inna wartość przechodzi do else gałąź.

Instrukcja If…Else If…Else

Składnia:

if(condition1)
{
	lines of code to be executed if condition1 is true
}
else if(condition2)
{
	lines of code to be executed if condition2 is true
}
else
{
	lines of code to be executed if condition1 is false and condition2 is false
}

Możesz użyć if...else if...else polecenie, jeśli chcesz sprawdzić więcej niż dwa warunki. Warunki są oceniane od góry do dołu, wykonanie kończy się na pierwszym, który jest prawdziwy, a na ostatnim else działa jako uniwersalne rozwiązanie, gdy żadne z nich nie pasuje.

Spróbuj tego sam:

<html>
<head>
	<script type="text/javascript">
		var one = prompt("Enter the first number");
		var two = prompt("Enter the second number");
		one = parseInt(one);
		two = parseInt(two);
		if (one == two)
			document.write(one + " is equal to " + two + ".");
		else if (one<two)
			document.write(one + " is less than " + two + ".");
		else
			document.write(one + " is greater than " + two + ".");
	</script>
</head>
<body>
</body>
</html>

Zwróć uwagę na dwa wezwania parseInt(). Wartości zwrócone przez prompt() są ciągami znaków, więc porównanie ich bez konwersji porównywałoby tekst, a nie liczby i spowodowałoby zgłoszenie „9” jako większego od „10”.

POWIĄZANE ARTYKUŁY

Potrójny Operator: Skrót dla if…else

Kiedy if...else Blok wybiera tylko między dwiema wartościami, operator warunkowy (trójargumentowy) wyraża tę samą decyzję jako pojedyncze wyrażenie. To jest to JavaOperator skryptu przyjmujący trzy operandy: warunek, znak zapytania, wartość używaną, gdy warunek jest prawdziwy, dwukropek i wartość używaną, gdy jest fałszywy.

// if...else form
let message;
if (age >= 18) {
  message = "adult";
} else {
  message = "minor";
}

// same decision as a ternary expression
let label = age >= 18 ? "adult" : "minor";

Operatora trójargumentowego należy używać, gdy poprawia on czytelność, a nie tylko w celu zaoszczędzenia wierszy:

  • Dobre dopasowanie: wybieranie jednej z dwóch wartości do przypisania, zwrócenia lub umieszczenia w ciągu szablonowym.
  • Słabe dopasowanie: gałęzie wykonujące kilka poleceń, wywołujące funkcje dla ich efektów ubocznych lub potrzebujące własnych zmiennych lokalnych.
  • Unikaj zagnieżdżania: trójka wewnątrz trójki jest o wiele trudniejsza do odczytania niż else if łańcuch.

Instrukcja switch w porównaniu z if…else if…else

Długo else if łańcuch, który stale porównuje tę samą zmienną z różnymi stałymi wartościami, jest zwykle bardziej przejrzysty, switch Instrukcja. Przełącznik ocenia swoje wyrażenie raz, a następnie przechodzi do pasującego case; break zatrzymuje wykonanie przechodząc do następnego przypadku i default pełni rolę finałową else.

switch (day) {
  case "Sat":
  case "Sun":
    document.write("Weekend");
    break;
  default:
    document.write("Weekday");
}

Te dwie struktury nie są zamienne w każdej sytuacji:

Punkt porównania jeśli…jeżeli…jeszcze wyłącznik
Rodzaj testu Dowolne wyrażenie boolowskie, w tym zakresy takie jak hours<12 Równość tylko w stosunku do wartości stałych
Porównanie użyte Niezależnie od tego, jakiego operatora napiszesz Ścisłe porównanie, więc "5" nie pasuje 5
czytelność Najlepiej sprawdza się w przypadku kilku niezwiązanych ze sobą schorzeń Najlepiej dla wielu wartości jednej zmiennej
Częsty błąd Zapominając o końcu else Zapominając break, co powoduje, że egzekucja nie dochodzi do skutku

Prawda i fałsz w wartościach JavaWarunki skryptu

Stan nie musi być porównaniem. JavaSkrypt najpierw konwertuje wszystko, co znajdzie w nawiasach, na wartość logiczną, dlatego if (name) to prawidłowy kod. Tylko sześć wartości konwertuje się na fałsz: false, 0, pusty ciąg, null, undefined, NaNWszystko inne jest prawdą, łącznie z napisem "0", pustą tablicę i pusty obiekt.

Większość błędów warunkowych w skryptach dla początkujących wynika z krótkiej listy błędów:

  • Przypisanie zamiast porównania: if (x = 5) przypisuje i jest zawsze prawdomówny; if (x === 5) porównywać.
  • Luźne niespodzianki równości: == konwertuje typy przed porównaniem, więc "" == 0 to prawda. Wolę ===.
  • Brak nawiasów klamrowych: bez {} tylko kolejne pojedyncze polecenie należy do gałęzi, dokładnie tak jak w powyższych przykładach.
  • Dane wejściowe nieprzetworzone: wartości od prompt() a pola formularza są ciągami znaków, dopóki parseInt() or Number() konwertuje je.
  • Niedostępne gałęzie: w sposób else if łańcuch, umieść najwęższy warunek na początku, lub szerszy wcześniejszy test zawsze wygra.

FAQ

Pojedynczy = przypisuje wartość i sprawia, że ​​warunek staje się prawdziwszy przez przypadek. == porównuje po konwersji typów, więc "" == 0 jest prawdziwy. === porównuje wartość i typ razem i jest bezpieczniejszą opcją domyślną.

Asystenci AI mogą powtórzyć coś nieznanego else if Łańcuch w prostym języku, zasugeruj wartości wejściowe docierające do każdej gałęzi i oznacz warunek, który nigdy nie może być prawdziwy. Zawsze uruchamiaj kod samodzielnie, ponieważ wyjaśnienie jest sugestią, a nie dowodem.

Często tak. Drugi pilot GitHub Uzupełnia kod rozgałęzienia z komentarza lub warunku częściowego. Sprawdź wybrane wartości graniczne, ponieważ wygenerowany > tam, gdzie potrzebowałeś >= łatwo przeoczyć.

Nie ma ograniczeń językowych. W obrębie gałęzi może pojawić się dowolne oświadczenie, w tym dalsze if. Powyżej dwóch poziomów logika staje się trudna do zrozumienia, dlatego połącz testy z && lub wróć wcześniej.

Nie. Bez nawiasów klamrowych gałąź posiada tylko kolejną, pojedynczą instrukcję, dlatego powyższe przykłady działają. Dodanie nawiasów klamrowych jest nadal zalecane, ponieważ drugi wiersz dodany później automatycznie wypada poza gałąź.

&& jest prawdą tylko wtedy, gdy obie strony mówią prawdę i || jest prawdziwe, gdy obie strony są prawdziwe. Obie strony powodują zwarcie: prawa strona nigdy nie jest oceniana, gdy wynik jest już ustalony.

getHours() zwraca aktualną godzinę na zegarze odwiedzającego jako liczbę od 0 do 23, więc porównanie z 12 dzieli dzień na poranek i popołudnie bez dodatkowego przetwarzania.

Nie. JavaSkrypt używa dwóch oddzielnych słów kluczowych, else if, z odstępem między nimi. Pojedyncze słowo elseif należy do PHP i niektórych języków szablonów i powoduje błąd składni w przeglądarce.

Podsumuj ten post następująco: