Условни изрази в JavaСкрипт: if, else и else if

⚡ Умно обобщение

Условни оператори в JavaСкриптът решава кой блок код да се изпълни, като тества условие, а формулярите if, if…else и if…else if…else покриват почти всяко решение за разклоняване, от което един начинаещ скрипт някога ще се нуждае.

  • 🔘 Синтаксис: Изразът if изпълнява блока си само когато условието в скобите се оцени като true.
  • ☑️ Два клона: Формата if…else предоставя резервен блок, който се изпълнява винаги, когато условието е невярно.
  • Много клонове: Верижното свързване else if тества няколко условия подред и спира при първото съвпадение.
  • 🧪 Съкращение: Троичният оператор кондензира прост if...else в един израз, който връща стойност.
  • 🛠️ Алтернатива: Операторът switch сравнява една стойност с много фиксирани опции по-прецизно, отколкото дълга верига.
  • 📊 Клопки: Фалшиви стойности, разсеян оператор за присвояване и липсващи скоби причиняват повечето условни грешки.

Условни изрази в JavaСценарий

JavaСкриптови условни изрази

Има основно три вида условни изрази в JavaСценарий.

  1. if Изявление: Изявлението 'if' изпълнява код въз основа на условие.
  2. if... else Изявление: Инструкцията if…else се състои от два блока код; когато дадено условие е вярно, той изпълнява първия блок от код и когато условието е невярно, той изпълнява втория блок от код.
  3. if… else if… else Изявление: Когато трябва да се тестват множество условия и трябва да се изпълнят различни блокове код въз основа на това кое условие е вярно, се използва операторът if…else if…else.

Всяка от трите форми е разгледана по-долу със своя синтаксис и пример за изпълнение. Същите правила важат независимо дали скриптът е вътре в страницата или във външен файли дали условието е написано на най-горното ниво или вътре в функция.

Как да използваме условни оператори

Условните изрази се използват за определяне на потока на изпълнение въз основа на различни условия. Ако дадено условие е вярно, можете да извършите едно действие, а ако условието е невярно, можете да извършите друго действие.

Диаграмата по-долу показва тази идея като разклонение: едно условие се оценява веднъж и управлението се предава надолу по истинския или неверния клон, никога и по двата.

Блок-схема, показваща JavaУсловие на скрипта, разклоняващо се в истински път и неверен път

Ако изявление

Синтаксис:

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

Можете да използвате if израз, ако искате да проверите само конкретно условие. Когато изразът в скобите се оцени на true, блокът се изпълнява; когато се оцени до false, интерпретаторът го пропуска директно и скриптът продължава със следващото изявление.

Опитайте това сами:

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

В примера посетителя се пита за възраст, след което се проверява тази стойност два пъти: веднъж за 18 и повече години, веднъж за под 18 години. Тъй като два отделни if използват се твърдения, а не else, и двете условия се оценяват всеки път, когато страницата се зареди.

Съвременен еквивалент: Горният код е запазен точно както е публикуван. В текущия JavaСкрипт, със който обикновено се пише същата логика let or const вместо varс console.log() or textContent вместо document.write(), и без type="text/javascript" атрибут, който HTML5 прави незадължителен.

Ако…Иначе оператор

Синтаксис:

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
}

Можете да използвате if...else оператор, ако трябва да проверите едно условие и да изпълните различен блок код за всеки резултат. Винаги се изпълнява точно един от двата блока, така че не е необходим отделен втори тест.

Опитайте това сами:

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

Тук new Date().getHours() връща текущия час на часовника на браузъра като число от 0 до 23. Всяка стойност под 12 генерира сутрешния поздрав, а всяка друга стойност се предава на else клон.

Ако…Иначе Ако…Иначе оператор

Синтаксис:

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
}

Можете да използвате if...else if...else оператор, ако искате да проверите повече от две условия. Условията се оценяват отгоре надолу, изпълнението спира на първото, което е истина, и последното else действа като универсален инструмент, когато никой от тях не съвпада.

Опитайте това сами:

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

Обърнете внимание на двете извиквания на parseInt()Стойности, върнати от prompt() са низове, така че сравняването им без преобразуване би сравнило текст, а не числа и би отчетоло „9“ като по-голямо от „10“.

Тройна Operator: Съкращение за if…else

Когато if...else блокът избира само между две стойности, условният (тернарен) оператор изразява същото решение като единичен израз. Той е единственият JavaСкриптов оператор, който приема три операнда: условие, въпросителен знак, стойността, използвана, когато условието е истинно, двоеточие и стойността, използвана, когато условието е невярно.

// 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";

Използвайте тернарния оператор, когато това подобрява четимостта, а не само за да спестите редове:

  • Добро прилягане: избиране на една от две стойности за присвояване, връщане или пускане в шаблонен низ.
  • Лошо прилягане: клонове, които изпълняват няколко оператора, извикват функции за страничните им ефекти или се нуждаят от собствени локални променливи.
  • Избягвайте гнездене: троичен елемент вътре в троичен елемент е много по-труден за четене от else if верига.

switch оператор срещу if…else if…else

Дълго else if верига, която непрекъснато сравнява една и съща променлива с различни фиксирани стойности, обикновено е по-ясна като switch оператор. Функцията switch оценява израза си веднъж, след което преминава към съответстващия case; break спира изпълнението да се прехвърли в следващия случай и default играе ролята на финала else.

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

Двете структури не са взаимозаменяеми във всяка ситуация:

Точка на сравнение ако…иначе ако…иначе превключите
Вид тест Всеки булев израз, включително диапазони като hours<12 Равенство само срещу фиксирани ценности
Използвано сравнение Какъвто и оператор да напишете Строго сравнение, така че "5" не съвпада 5
Четливост Най-подходящ за няколко несвързани състояния Най-добро за много стойности на една променлива
Често срещан бъг Забравяйки за последното else Забравяне break, което позволява изпълнението да се провали

Истински и фалшиви ценности в JavaУсловия на скрипта

Условието не е задължително да бъде сравнение. JavaСкриптът първо преобразува всичко, което намери в скобите, в булево число, поради което if (name) е валиден код. Само шест стойности се конвертират в невярно: false, 0, празният низ, null, undefined, и NaNВсичко останало е истина, включително низът "0", празен масив и празен обект.

Повечето условни грешки в скриптовете за начинаещи произлизат от кратък списък с грешки:

  • Присвояване вместо сравнение: if (x = 5) приписва и винаги е истинен; if (x === 5) сравнява.
  • Изненади, свързани с неравнопоставеността: == преобразува типовете преди сравняване, така че "" == 0 е вярно. Предпочитам ===.
  • Липсващи брекети: без {} само следващото единствено изречение принадлежи на клона, точно както в горните примери.
  • Неконвертиран вход: стойности от prompt() и полетата на формуляра са низове, докато parseInt() or Number() ги преобразява.
  • Недостъпни клонове: в else if верига, поставете най-тясното условие първо, или по-широк по-ранен тест винаги ще спечели.

Въпроси и Отговори

Сингъл = присвоява стойност и прави условието истинно по случайност. == сравнява след преобразуване на типовете, така че "" == 0 истина е. === сравнява стойност и тип заедно и е по-безопасната настройка по подразбиране.

Асистентите с изкуствен интелект могат да преформулират непознато else if верига на разбираем език, предложете входните стойности, които достигат до всеки клон, и маркирайте условие, което никога не може да бъде истина. Винаги изпълнявайте кода сами, защото обяснението е по-скоро предложение, отколкото доказателство.

Често да. Копилот на GitHub завършва разклоняващ се код от коментар или частично условие. Проверете граничните стойности, които избира, тъй като генериран > където ти е било необходимо >= е лесно да се пропусне.

Няма ограничение за език. В клон може да се появи всяко твърдение, включително и допълнително. ifСлед две нива логиката става трудна за следване, затова комбинирайте тестовете с... && или се върнете по-рано вместо това.

Не. Без скоби клонът притежава само следващото единствено изречение, поради което примерите по-горе работят. Добавянето на скоби все още се препоръчва, защото втори ред, добавен по-късно, безшумно попада извън клона.

&& е вярно само когато и двете страни са истински, и || е вярно, когато някоя от страните е вярна. И двете са късо съединение: дясната страна никога не се оценява, след като резултатът вече е определен.

getHours() връща текущия час на собствения часовник на посетителя като число от 0 до 23, така че сравнението с 12 разделя деня на сутрин и следобед без допълнителен парсинг.

Не. JavaСкриптът използва две отделни ключови думи, else if, с интервал между тях. Единствената дума elseif принадлежи на PHP и някои езици за шаблони и генерира синтактична грешка в браузъра.

Обобщете тази публикация с: