Вы здесь: Главная » JavaScript » Тернарный и другие операторы в JavaScript

Тернарный и другие операторы в JavaScript

Конструкция if...else в JavaScript решает массу различных задач, связанных с изменением хода алгоритма в зависимости от некоего условия. Однако за года существования JS в нем появилось много операторов и подходов к решения ряда задач с условиями. В этой статье мы рассмотрим такие интересные операторы и возможности языка JavaScript, как

  1. Тернарный оператор
  2. Присваивание значения по умолчанию при сравнении нескольких значений или переменных
  3. Оператор нулевого слияния
  4. Проверка объекта и свойства на существование
  5. Оператор опциональной последовательности

Тернарный оператор

Фактически тернарный оператор заменяет собой однострочную конструкцию if...else, когда и в ситуации, когда условие возвращает true, и в ситуации, когда условие возвращает false, нужно выполнить одно действие.

Записывается он следующим образом:

Например, нам нужно выяснить, есть ли пользователю 18 лет. Используем для этого диалоговое окно confirm(), которое после нажатия на кнопку "Ок" возвращает true, а при нажатии на кнопку "Отмена" - false.  То есть такое диалоговое окно уже само по себе можно использовать в качестве условия, т.к. результатом проверки условия всегда является или true, или false.

Такая запись очень наглядная и сразу даёт представление о том, что будет сделано в зависимости от выбора пользователя.

Протестируйте работу тернарного оператора, нажав на кнопку ниже.

Ещё один вариант использования тернарного оператора - это вывод каких-либо стилей в зависимости от действий пользователя. Например, от того, какое число ведёт пользователь, будет зависеть цвет абзаца или любого другого блока. Попробуйте сами.

Тестовы параграф. Если вы введете число меньше 50, он останется черным, если 50 и больше, станет красным. Жмите на кнопку быстрее и вводите число.


Код примера:

Здесь parTest - это id нужного нам абзаца. Почему мы можем так к нему обратиться, описано в статье "Выбор элементов html-страницы с помощью JavaScript".

Присваивание значения по умолчанию при сравнении нескольких значений или переменных

В том случае, когда нам необходимо сравнить 2-3 переменных или 2-3 значения, одно из которых будет соответствовать false, мы будем использовать логический оператор ИЛИ ||. Результатом такого сравнения всегда будет первое значение, которое отлично от false:

Используя логическое ИЛИ ||, или другими словами оценку короткого замыкания OR(||), можно задать переменной значение по умолчанию в случае, когда переменная может иметь значение   false.

На этом принципе основан один из вариантов назначения параметров функции по умолчанию.

Оператор нулевого слияния

Оператор нулевого слияния записывается, как ?? , является нововведением в ES2020,  и заменяет собой в какой-то степени логическое ИЛИ ||, если первое значение не определено.

Оператор нулевого слияния  возвращает правую сторону, если левая сторона не определена (undefined) или имеет значение null. В противном случае он возвращает левую:

То есть оператор нулевого слияния не оценивает значения 0, false или пустую строку '', как достаточные для некоего значения по умолчанию.  Вместо этого он использует только значения null или undefined - и все. В коде представлены несколько вариантов вывода различных значений при использовании этого оператора.

Это удобно в том случае, если ваши объекты должны содержать ряд значений вида 0 или false, например, но при этом вы их должны учитывать в коде именно в таком виде.

Проверка объекта и свойства на существование

Любой объект в JavaScript может существовать или отсутствовать на странице. Поскольку js-код часто пишется в одном файле для всего сайта, а не для отдельной странице, некоторые отсутствующие на данной странице элементы или другие объекты могут привести к ошибке в коде. Поэтому необходимо проверять сами объекты и их свойства на соответствие значениям null (объект отсутствует) и undefined (свойство не определено). Для этой цели можно использовать оценку короткого замыкания AND(оператор &&).

В примере ниже у нас явно задано, что объект pen имеет значение null. И если нам нужно проверить, есть ли в этом объекте свойство color, необходимо использовать проверку с помощью оператора &&:

В том случае, если объект у нас определен, но нужное свойство отсутствует, проверка вернет undefined:

Еще один тест предназначен для работы с html-объектами на странице. Например, нам необходимо обратиться к элементу-изображению с id="myImage". Если оно есть на странице, то текст абзаца за ним с id="myText" мы сделаем жирным, если нет - оставим без изменений.

Код примера с разметкой и скриптом:

Сам пример для теста:

Test Image

Абзац для теста наличия изображения.

До удаления изображения вы увидите в консоли ссылку на него, после удаления null. Поскольку null относится к одному из значений, соответствующему логическому false, то использование тернарного оператора в строке 10 приведет к тому, что после удаления изображения условие вернет false и жирное начертание для абзаца будет выключено.

Краткая запись вызова функции с использованием &&

Еще один пример связан с использованием функций. В том случае, когда вызов функции происходит в зависимости от переменной со значением true, то можно применить оператор && как альтернативный вариант и более короткий вариант.

В примере ниже мы проверяем, доступно ли некое обновление вопросом к пользователю с помощью диалогового окна confirm() и вызываем функцию setUpdate() только в случае нажатия на кнопку ""Ок". Сравните вариант записи с if и с оператором &&.

Давайте протестируем код:

Оператор опциональной последовательности

В JavaScript достаточно часто приходится работать с объектами, особенно, если вы загружаете какую-либо информацию с сервера в формате JSON, например.  Далеко не всегда у вас будет полная информация со всем набором свойств для каждого из объектов.  В том случае, если вам надо получить доступ к свойству объекта с помощью оператора точки  . , а это свойство не определено (то есть отсутствует в списке свойств), то браузер выдаст ошибку, и дальнейший код работать не будет. Можно воспользоваться предыдущим подходом для определения наличия объекта или свойства, но еще интересней для этой цели использовать  оператор опциональной последовательности.

Оператор опциональной последовательности записывается, как  ?., то есть указываете знак ? перед точкой доступа к любому свойству. Если такое свойство не определено, то вместо ошибки возвращается undefined.

В примере ниже для первого объекта указаны все свойства, для второго отсутствует свойство person2.address.app. Выполняем проверку 2-мя способами:

Почитать статью на английском с примерами.

Автор: Админ

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *