На страницах нашего онлайн портала alivahotel.ru мы расскажем много самого интересного и познавательного, полезного и увлекательного для наших постоянных читателей.
В этой статье рассмотрим условные и логические операторы языка JavaScript.
Условные операторы JavaScript
Формы условных операторов в JavaScript:
Условный оператор if
Синтаксис оператора if:
Условный оператор if состоит из:
Если необходимо выполнить несколько инструкций, то их необходимо поместить в фигурные скобки :
Рекомендуется, использовать фигурные скобки даже когда используется одна инструкция:
Оператор if. else
Правило приведения условия к true или false
Смысл данного правила: любое выражение является true, кроме следующих значений :
Оператор else if. (несколько условий)
Условный (тернарный) оператор (?:)
Тернарный оператор – оператор JavaScript, который можно использовать, когда необходимо в зависимости от условия выполнить одно из двух заданных выражений.
Вышеприведённый пример, но с использованием множественной записи оператора if. else :
Оператор switch
Оператор switch предназначен для выполнения одного варианта инструкций из нескольких в зависимости от значения выражения. Выбор того или иного варианта определяется посредством строгого равенства результата выражения значению случая ( case ).
Синтаксис оператора switch :
Ключевое слово default является необязательным. Оно используется, когда необходимо задать инструкции, которые нужно выполнить, если результат выражения будет не равен ни одному значению варианта ( case ).
Инструкция break является необязательной. Она предназначена для прерывания выполнения оператора switch и передачи управлению инструкции, идущей после него.
Пример, в котором не используется инструкция break :
В некоторых случаях может требоваться именно такое поведение, но не в этом. Здесь просто допущена ошибка.
Исправленный вариант примера:
Логические операторы
В JavaScript различают следующие логические операторы:
На этом занятии поговорим об условных операторах. Что это такое? Представьте, что вам нужно вычислить модуль числа, хранящегося в переменной x. Как это сделать? Очевидно, нужно реализовать такой алгоритм.
И в этом алгоритме есть вот такое ветвление программы: при x ) оператор;
Если выражение в круглых скобках истинно, то выполняется оператор, записанный в if. Иначе этот оператор не выполняется. Используя этот оператор, запишем программу для вычисления модуля числа:
Здесь операция изменения знака переменной x будет выполняться только для отрицательных величин, а положительные просто выводиться в консоль, минуя эту операцию.
Какие операторы сравнения существуют в JavaScript и как они работают? Многие из них нам известны из школьного курса математики, это:
Истинно, если a больше b
Истинно, если a больше или равно b
Сравнение разных типов данных
При сравнении значений разных типов JavaScript приводит каждое из них к числу. Например:
При сравнении булевых значений:
Внимание! Странное сравнение null с нулем:
Это просто нужно иметь в виду при программировании логики скриптов.
Строгое сравнение
В JavaScript можно выполнять сравнение двух значений с учетом их типа данных. Для этого используется оператор === (три равно). Применяя его к предыдущему примеру, получим:
Оба результата дадут ложь – false, так как значения, имеющие разные типы считаются не равными друг другу. Та же ситуация будет и при таком строгом сравнении:
Здесь также имеем разные типы данных, поэтому результат – false. А вот если взять строгое неравенство, то получим истину во всех случаях:
Вот так можно сравнивать между собой значения с учетом их типов.
Теперь, когда мы знаем как сравниваются между собой величины, вернемся к нашему условному оператору if. И предположим, что хотим определить знак числа в переменной x. Конечно, проверку можно записать вот так:
Но можно сделать лучше. Смотрите, мы здесь имеем дело со взаимоисключающими условиями, то есть, они не могут произойти одновременно: либо первое, либо второе. Для таких ситуаций можно использовать ключевое слово else – иначе, чтобы ускорить процесс проверки:
Теперь, у нас здесь всего одно условие. Если оно истинно, то выполнится первый console.log, а иначе – второй console.log. Такая программа будет работать быстрее.
В общем случае, синтаксис оператора if else следующий:
if( ) оператор 1; else оператор 2;
И так как после else можно ставить любой оператор, то предыдущую программу можно записать и так:
И вообще таких конструкций if else может быть много. Далее, обратим внимание на такой факт: во всех наших примерах по условию шел один оператор – console.log. Но что если нужно выполнить несколько операторов по некоторому условию? Для этого их нужно заключать в фигурные скобки. Например:
Здесь по первым двум условиям выполняется два оператора: присвоение значения переменной sgn и вывод результата в консоль. В последнем else записан только один оператор – вывод в консоль, поэтому здесь фигурные скобки ставить не обязательно.
В ряде случаев конструкцию if else удобнее записывать через тернарный условный оператор, который имеет такой синтаксис:
Сначала вычисляется условие: если оно истинно, то возвращается значение1, в противном случае – значение2. Например:
Получим true, если возраст (age) больше 18, иначе – false. Кстати, проверку из данного примера можно сделать короче, просто прописав
здесь оператор > вернет true при возрасте больше 18 и false – в противном случае.
Теперь, когда мы разобрались с базовыми моментами проверки условий, сделаем следующий шаг и попробуем реализовать проверку попадания переменной x в диапазон [2; 7], то есть, условие должно быть истинным, когда x принимает значения в этом диапазоне чисел. Очевидно, что здесь должно быть две проверки: первая – мы проверяем, что x >= 2 и вторая – проверяем, что x 7, то делается вывод о невхождении переменной x в указанный диапазон.
Вот так можно записывать более сложные условия в условном операторе if. Причем они могут комбинироваться в любом сочетании, например:
Здесь реализована проверка, что x должно принадлежать [2; 7], а y не принадлежать [0; 5]. И обратите внимание вот на эти круглые скобки. Дело в том, что приоритет у операции && больше, чем у ||, поэтому без скобок у нас бы получилась вот такая проверка:
то есть, мы проверяли бы, что x принадлежит [2; 7] и y меньше нуля ИЛИ y больше 5. Как вы понимаете – это уже совсем другая проверка. Поэтому учитывайте приоритет этих операций при формировании составного условия. Если нужно изменить приоритет – используйте круглые скобки.
Одиночные проверки
Внутри условия можно прописывать и такие одиночные выражения:
Вот этот восклицательный знак – это отрицание – НЕ, то есть, чтобы проверить, что 0 – это false мы преобразовываем его в противоположное состояние с помощью оператора отрицания НЕ в true и условие срабатывает. Аналогично и с переменной z, которая равна false.
Вот так работает оператор if в JavaScript.
Оператор switch
Второй условный оператор switch используется, когда из множества возможных вариантов нужно выбрать какой-то один. Например, мы хотим проверить: принимает ли некая переменная одно из значений 1, 2, 3 или 4. Это будет выглядеть так:
И в консоле увидим, что item=3, 4 и другое значение. Почему так и как это все работает? В круглых скобках оператора switch записывается переменная, которая сравнивается со значениями (константами), указанными в case. Далее, через двоеточие пишутся операторы, которые выполняются при совпадении значения переменной с константой. В нашем случае item=3, срабатывает case 3 и выполняется console.log(«item = 3»). Но, оператор switch в JavaScript реализован так, что все последующие операторы тоже будут выполняться. В ряде случаев это бывает полезно и нужно. Если же мы хотим прервать выполнение оператора switch после успешной проверки, нужно записать оператор break вот так:
Теперь в консоле мы видим только строчку item=3. Операторы, стоящие после default выполняются, если не сработала ни одна из проверок. Это необязательное ключевое слово: switch может быть записан и без него, но тогда мы не увидим «item другое значение», если переменная не будет равна 1, 2, 3 или 4.
Так когда же использовать условный оператор if, а когда switch? Правило простое: если нужно проверить переменную на равенство множеству значений, то лучше использовать switch – он сработает быстрее, чем if. Во всех других случаях применяется оператор if.
В практике программирования в 99% случаев используется if и лишь для некоторых частных проверок – оператор switch.
Видео по теме
JavaScipt #1: что это такое, с чего начать, как внедрять и запускать
JavaScipt #2: способы объявления переменных и констант в стандарте ES6+
Иногда нам нужно выполнить различные действия в зависимости от условий.
Инструкция «if»
В примере выше, условие – это простая проверка на равенство ( year == 2015 ), но оно может быть и гораздо более сложным.
Если мы хотим выполнить более одной инструкции, то нужно заключить блок кода в фигурные скобки:
Преобразование к логическому типу
Инструкция if (…) вычисляет выражение в скобках и преобразует результат к логическому типу.
Давайте вспомним правила преобразования типов из главы Преобразование типов:
Таким образом, код при таком условии никогда не выполнится:
…а при таком – выполнится всегда:
Блок «else»
Инструкция if может содержать необязательный блок «else» («иначе»). Он выполняется, когда условие ложно.
Несколько условий: «else if»
Блоков else if может быть и больше. Присутствие блока else не является обязательным.
Условный оператор „?“
Иногда нам нужно определить переменную в зависимости от условия.
Так называемый «условный» оператор «вопросительный знак» позволяет нам сделать это более коротким и простым способом.
Этот пример будет делать то же самое, что и предыдущий:
Но скобки делают код более читабельным, поэтому мы рекомендуем их использовать.
Несколько операторов „?“
Поначалу может быть сложно понять, что происходит. Но при ближайшем рассмотрении мы видим, что это обычная последовательная проверка:
Вот как это выглядит при использовании if..else :
Нетрадиционное использование „?“
Здесь мы не присваиваем результат переменной. Вместо этого мы выполняем различный код в зависимости от условия.
Не рекомендуется использовать оператор вопросительного знака таким образом.
Вот, для сравнения, тот же код, использующий if :
При чтении глаза сканируют код по вертикали. Блоки кода, занимающие несколько строк, воспринимаются гораздо легче, чем длинный горизонтальный набор инструкций.
Осваиваем условные выражения для написания более чистого кода
Dec 21, 2018 · 9 min read
Например, предположим, что есть сундук с сокровищами, спроектированный таким образом, что только Glad ( автор статьи) может его открыть. С точки зрения программы (на языке Python) эта логика может быть представлена в следующем виде:
Несмотря на то, что предыду щ ий фрагмент кода был написан на Python, речь в данной статье будет идти исключительно о языке JavaScript. Тем не менее, большинство показанных здесь техник могут быть применены и к некоторым другим языкам программирования.
Обещаю, что с этого момента вы не найдете в статье ни единой строки кода, написанной на другом языке, помимо JavaScript.
В данной статье основной акцент будет поставлен скорее на условные выражения (с использованием логических операторов) в JavaScript и на то, как можно их применять, чем на условные инструкции.
Выражения против инструкций
Прежде чем продолжить, необходимо провести различие между выражениями и инструкциями в JavaScript. Вот очень простая аналогия:
Выражения в JavaScript — это как фразы в грамматике, в то время как инструкции в JavaScript подобны предложениям в грамматике.
Выражение — это любая фраза языка JavaScript, которая может быть вычислена интерпретатором для получения значения.
Например: литералы, присваивания, функциональные выражения, логические, побитовые или арифметические операции, доступ к свойствам объекта, вызов функций, запуск кода из строки методом eval и так далее.
В следующем фрагменте кода представлены некоторые JavaScript выражения:
Инструкция — это любое предложение на языке JavaScript или команда, которая может быть выполнена интерпретатором для совершения какого-либо действия или вызова побочного эффекта.
Например: условные выражения, объявление переменных или функций, циклы, throw, return, try/catch/finally и так далее.
Некоторые JavaScript выражения, такие как присваивание или вызов функции могут иметь побочные эффекты и в результате обычно используются в качестве инструкций ( инструкции-выражения).
Условия и логические значения
Важнейшим требованием любой условной конструкции является наличие самого условия. Условие — это то, что определяет решение, которое будет принято в программе.
Правильное понимание того, как интерпретатор JavaScript преобразует эти условные выражения в логические (boolean), необходимо для написания корректной логики для условия.
Ниже приведены две основополагающие концепции, которые помогут нам понять эти преобразования:
Истинное против ложного
Каждое значение в JavaScript можно классифицировать как истинное или ложное. Ложные значения в JavaScript следующие:
Однако, если вы предпочитаете намеренное или явное приведение типа, то вы можете воспользоваться встроенной функцией Boolean для преобразования любого значения в соответствующее логическое значение.
Короткая схема вычислений
Для логических операторов И ( && ) и ИЛИ ( || ) необходимо наличие двух операндов. Данные операторы используются для выполнения логических операций над операндами.
Учитывая то, что два операнда являются логическими ( true или false ),
При использовании этих операторов, первый операнд вычисляется всегда. Однако второй операнд может остаться невычисленным, что зависит от результата вычисления первого операнда. Такое поведение называется короткой схемой вычисления.
Операции && и || не всегда возвращают логическое значение. В принципе, они могут произвести любое значение. Вот более краткое описание их поведения на основе короткой схемы вычислений:
Замена инструкций выражениями
Теперь у вас есть четкое представление о концепции короткой схемы вычислений и о том, каким образом условные выражения преобразуются в логические значения.
Далее вы увидите, как некоторые условные инструкции могут быть преобразованы в простые выражения. Вы также поймете, как такие преобразования помогут сделать ваш код более чистым и компактным.
1. Простая инструкция if
Очень простые инструкции if можно легко заменить условными выражениями, опираясь на концепцию короткой схемы вычислений. Рассмотрим следующий фрагмент кода:
Простую инструкцию if можно заменить очень простым условным выражением, как показано в следующем фрагменте кода:
Условное выражение возвращает значение, а значит его можно присвоить переменной или использовать в любом другом месте, где оно потребуется.
Имейте в виду, что использовать подобные условные выражения нужно осторожно, не забывая о подводных камнях короткой схемы вычислений. Весьма вероятно, что операнд может остаться невычисленным, как мы это видели в предыдущем разделе о короткой схеме вычислений.
2. Инструкции If…Else
Посмотрим на следующий код, определяющий надежность пароля:
Предыдущий код можно сократить до следующего:
Этот фрагмент кода делает то же самое, что и предыдущий, но в одной строке. Такой код уже выглядит довольно хорошо. Следующий фрагмент проверяет вычисление условного выражения.
Для написания условных выражений if. else такого рода существует способ получше — использование условного оператора, также называемого тернарным оператором. Его синтаксис выглядит следующим образом:
Исходя из этого, предыдущий пример кода может быть переписан с использованием тернарного оператора как указано ниже:
Хотя фрагмент кода, использующий логические операторы, работает аналогично фрагменту кода с применением тернарного оператора (для данного примера), важно знать, что они не являются взаимозаменяемыми.
Гораздо безопаснее использовать тернарный оператор для таких случаев, за исключением того, когда вы действительно знаете, что делаете.
Рассмотрим следующий код, чтобы понять опасность применения логических операторов в подобных случаях:
Вот еще одна хорошо известная условная инструкция, которая обычно встречается в кроссбраузерных AJAX-библиотеках.
При помощи логических операторов предыдущий фрагмент кода можно переписать следующим образом ( отступы для читабельности):
Используя тернарный оператор:
Заметьте, что в этом примере кода тернарный оператор является вложенным, что может быть полезно для работы с более сложными if. else условиями.
Советы и альтернативные приёмы
В этом разделе вы увидите некоторые полезные советы и альтернативные приёмы, которые могут пригодиться при работе с условиями и логическими операторами.
Приведение к логическому значению
Допустим, вы хотите нормализовать значение таким образом, чтобы всегда получать логическое значение:
Приведенный ниже код показывает, как можно этого добиться ( здесь используются функции):
Законы де Моргана
Если вы знакомы с булевой алгеброй, вы должно быть знаете о законах де Моргана. Эти законы также применяются к логическим операторам JavaScript.
Следующий фрагмент кода демонстрирует данные законы:
Логические тождества
Множественные тернарные операторы
Во фрагментах кода выше вы видели, что тернарные операторы могут быть вложенными в случае обработки более сложной условной if. else логики.
Тем не менее, вы должны знать некоторые нюансы, касаемо приоритета и ассоциативности тернарного оператора, для того, чтобы эффективно его применять в комплексных выражениях.
При наличии нескольких тернарных операторов в выражении могут понадобиться скобки ( () ) для изменения порядка вычисления. Вот пример:
Заключение
Я уверен, что теперь, дочитав эту статью до конца, вы сможете найти в своем коде области, где сможете применить данные советы и приёмы и тем самым улучшить код.
Получайте удовольствие от написания кода …
Хорошо знаете JavaScript? Пройдите наш небольшой тест и проверьте свои знания!
Осваивайте профессию, начните зарабатывать, а платите через год!
Курсы Python Акция! Бесплатно!
Станьте хакером на Python за 3 дня
Веб-вёрстка. CSS, HTML и JavaScript
Станьте веб-разработчиком с нуля
Инструкция if
Выполняемая инструкций может быть представлена одной строкой или блоком кода (группой строк в фигурных скобках), например:
Примечание: Рекомендуется всегда использовать фигурные скобки, даже если нужно выполнить всего одну строку кода. Это ясно показывает, что должно быть выполнено в каждом случае и улучшает читаемость кода.
Конструкция if. else
Следующий пример выведет соответствующее окно приветствия в зависимости от текущего времени в вашем браузере:
Инструкция else if
Инструкция else if используется в случае, если требуется выполнить один из многих фрагментов кода. Формально это не JavaScript-инструкция, а лишь распространенный стиль программирования, который заключается в применении повторяющихся инструкций if/else :
Тернарный оператор (?:)
Условный оператор (?:) – это единственный тернарный (от лат. ternarius — «тройной») оператор с тремя операндами в JavaScript. Тернарный оператор возвращает свой второй или третий операнд в зависимости от значения логического выражения, заданного первым операндом.
Читается этот код так: если а больше b, то c = a, иначе c = b.
Можно записать тоже самое через if/else:
Вложенные инструкции if/else, так же можно заменить последовательностью из тернарных операторов:
В предыдущем примере оператор && сначала проверяет выполняется ли временное условие (чему равна переменная time). Если условие выполняется, то в переменную message будет записана соответствующая строка приветствия. В противном случае, в силу побочного эффекта, связанного с неполным вычислением, оператор && выведет false и т.д. Этот метод используется не очень часто, но если вам встретится нечто подобное, то вы теперь знаете, как работают подобные инструкции.
Вам даны две переменные x и y, менять их не нужно. При помощи тернарного оператора сравните их и если x больше, чем y, то выведите фразу: «x больше, чем y», иначе выведите фразу: «x не больше, чем y».
Ответ: «x больше, чем y».
Четное или нечетное число
Пользователь вводит какое-то число (num). Используя конструкцию if..else, напишите код, который делает запрос: «Введите число». Если посетитель вводит четное число, то выводить «»Число » + num + » четное»», если нечетное: «Число » + num + » нечетное».
Суть решения заключается в том, что проверяется остаток от деления числа на 2. Если остаток равен 0, значит число чётное, иначе – нечётное. Получить остаток от деления в можно с помощью оператора %.
Сколько цифр в числе и его знак
Напишите код, который предлагает пользователю ввести целое число. Нужно вывести на экран сколько в этом числе цифр, а также положительное оно или отрицательное. Например, «Число » + num + » однозначное положительное». Достаточно будет определить, является ли число однозначным, двухзначным или трехзначным и более.
Принадлежность точки окружности
Следует рассмотреть прямоугольный треугольник, один катет которого лежит на любой оси, а другой является перпендикуляром к этой оси из заданной точки A. В этом случае длины катетов треугольника равны значениям x и y, а гипотенуза L является отрезком, соединяющим начало координат O с точкой A. Если этот отрезок L больше радиуса круга R, то значит точка лежит вне окружности.
Длина гипотенузы находится по теореме Пифагора: L = Math.sqrt(x*x + y*y).
Определить существование треугольника по трем сторонам
У треугольника сумма любых двух сторон должна быть больше третьей. Иначе две стороны просто на третью и треугольника не получится. Пользователь вводит поочерёдно через prompt длины трех сторон. Используя конструкцию if..else, напишите код, который должен определять, может ли существовать треугольник при таких длинах. Т. е. нужно сравнить суммы двух любых строн с оставшейся третьей стороной. Чтобы треугольник существовал, сумма всегда должна быть больше отдельной стороны.
Найти максимальное число из трех
Определить какое из трех, введенных пользователем, чисел максимальное и вывести его на экран. Пользователь вводит поочерёдно через prompt числа. Используя конструкцию if..else, напишите код, который должен определять, какое из введенных чисел является наибольшим.
Найти сумму или произведение цифр трехзначного числа
Пользователь вводит через prompt трёхзначное число. Проверить трехзначное число на четность и найти сумму его цифр, если число четное, или произведение его цифр, если число нечетное.
Чтобы извлечь первую цифру трехзначного числа, надо его разделить на 100 и округлить воспользовавшись побитовыми операторами. Чтобы извлечь вторую цифру трехзначного числа, можно пойти разными способами. Например, найти остаток от деления на 100, потом разделить на 10 и снова округлить. Последняя цифра любого числа, обозначающая единицы, извлекается путем нахождения остатка от деления на 10: n % 10.
Проверить число на четность. Найти остаток от деления числа на 2. Для этого использовать оператор %. Если результат равен нулю, значит число четное. Иначе – нечетное.
