Главная страница>Учебник по веб-дизайну>Учебник по Javascript

Условное ветвление: if, '?'

Автор：Eve Cole Время обновления：2025-01-09 15:52:22

Иногда нам нужно выполнять разные действия в зависимости от разных условий.

Для этого мы можем использовать оператор if и условный оператор ? , который также называется оператором «вопросительного знака».

Высказывание «если»

Оператор if(...) оценивает условие в круглых скобках и, если результат равен true , выполняет блок кода.

Например:

 let год = приглашение('В каком году была опубликована спецификация ECMAScript-2015?', '');

if (year == 2015) alert( 'Вы правы!');

В приведенном выше примере условие представляет собой простую проверку равенства ( year == 2015 ), но оно может быть гораздо более сложным.

Если мы хотим выполнить более одного оператора, нам нужно заключить наш блок кода в фигурные скобки:

 если (год == 2015) {
  alert("Правильно!");
  alert("Ты такой умный!");
}

Мы рекомендуем заключать блок кода в фигурные скобки {} каждый раз, когда вы используете оператор if , даже если нужно выполнить только один оператор. Это улучшит читаемость.

Логическое преобразование

Оператор if (…) оценивает выражение в скобках и преобразует результат в логическое значение.

Вспомним правила преобразования из главы «Преобразования типов»:

  • Число 0 , пустая строка "" , null , undefined и NaN становятся false . По этой причине их называют «ложными» ценностями.

  • Другие значения становятся true , поэтому их называют «истинными».

Итак, код в этом условии никогда не будет выполнен:

 if (0) { // 0 ложно
  ...
}

…и внутри этого состояния всегда будет:

 if (1) { // 1 истинно
  ...
}

Мы также можем передать в if предварительно вычисленное логическое значение, например:

 пусть cond = (год == 2015); // равенство оценивается как true или false

если (условие) {
  ...
}

Предложение «иначе»

Оператор if может содержать необязательный блок else . Он выполняется, когда условие ложно.

Например:

 let год = приглашение('В каком году была опубликована спецификация ECMAScript-2015?', '');

если (год == 2015) {
  alert('Вы правильно догадались!');
} еще {
  alert('Как можно так ошибаться?'); // любое значение, кроме 2015
}

Несколько условий: «иначе если»

Иногда нам хочется протестировать несколько вариантов условия. Предложение else if позволяет нам это сделать.

Например:

 letyear = Prompt('В каком году была опубликована спецификация ECMAScript-2015?', '');

если (год <2015) {
  alert('Слишком рано...');
} еще если (год > 2015) {
  alert('Слишком поздно');
} еще {
  alert('Именно!');
}

В приведенном выше коде JavaScript сначала проверяет year < 2015 . Если это неверно, он переходит к следующему условию: year > 2015 . Если это тоже ложь, отображается последнее alert .

Может быть еще else if блокирует. Последнее else не является обязательным.

Условный оператор '?'

Иногда нам нужно назначить переменную в зависимости от условия.

Например:

 пусть accessAllowed;
let age = Prompt('Сколько вам лет?', '');

если (возраст > 18) {
  accessAllowed = правда;
} еще {
  доступAllowed = ложь;
}

оповещение (доступ разрешен);

Так называемый оператор «условный» или «вопросительный знак» позволяет нам сделать это более коротким и простым способом.

Оператор представлен знаком вопроса ? . Иногда его называют «троичным», поскольку у оператора три операнда. На самом деле это единственный оператор в JavaScript, у которого их так много.

Синтаксис:

 пусть результат = условие? значение1: значение2;

condition оценивается: если оно истинно, то возвращается value1 , в противном случае — value2 .

Например:

 let accessAllowed = (возраст> 18)? правда: ложь;

Технически мы можем опустить круглые скобки в отношении age > 18 . Оператор вопросительного знака имеет низкий приоритет, поэтому он выполняется после сравнения > .

Этот пример будет делать то же самое, что и предыдущий:

 // оператор сравнения «возраст > 18» в любом случае выполняется первым
// (не нужно заключать в круглые скобки)
пусть accessAllowed = возраст > 18? правда: ложь;

Но круглые скобки делают код более читабельным, поэтому мы рекомендуем их использовать.

Пожалуйста, обрати внимание:

В приведенном выше примере вы можете избежать использования оператора вопросительного знака, поскольку само сравнение возвращает true/false :

 // одинаковый
пусть accessAllowed = возраст > 18;

Несколько '?'

Последовательность операторов вопросительного знака ? может возвращать значение, которое зависит от более чем одного условия.

Например:

 пусть возраст = подсказка ('возраст?', 18);

пусть сообщение = (возраст <3)? «Привет, детка!» :
  (возраст <18) ? 'Привет!' :
  (возраст <100) ? 'Привет!' :
  «Какой необычный возраст!»;

предупреждение(сообщение);

Поначалу может быть трудно понять, что происходит. Но присмотревшись, мы видим, что это обычная последовательность тестов:

  1. Первый знак вопроса проверяет, age < 3 .

  2. Если это правда – возвращается 'Hi, baby!' . В противном случае он продолжает выражение после двоеточия «:», проверяя age < 18 .

  3. Если это правда – он возвращает 'Hello!' . В противном случае он продолжает выражение после следующего двоеточия «:», проверяя age < 100 .

  4. Если это правда – он возвращает 'Greetings!' . В противном случае он продолжает выражение после последнего двоеточия «:», возвращая 'What an unusual age!' .

Вот как это выглядит с использованием if..else :

 если (возраст <3) {
  message = 'Привет, детка!';
} else if (возраст <18) {
  сообщение = 'Привет!';
} иначе если (возраст < 100) {
  message = 'Привет!';
} еще {
  message = 'Какой необычный возраст!';
}

Нетрадиционное использование '?'

Иногда знак вопроса ? используется в качестве замены if :

 let Company = Prompt('Какая компания создала JavaScript?', '');

(компания == 'Netscape') ?
   alert('Верно!') : alert('Неверно.');

В зависимости от условия company == 'Netscape' либо первое, либо второе выражение после ? выполняется и показывает предупреждение.

Здесь мы не присваиваем результат переменной. Вместо этого мы выполняем другой код в зависимости от условия.

Не рекомендуется использовать оператор вопросительного знака таким образом.

Это обозначение короче эквивалентного оператора if , что нравится некоторым программистам. Но это менее читабельно.

Вот тот же код, использующий if для сравнения:

 let Company = Prompt('Какая компания создала JavaScript?', '');

если (компания == 'Netscape') {
  alert('Верно!');
} еще {
  Предупреждение('Неверно.');
}

Наши глаза сканируют код вертикально. Блоки кода, занимающие несколько строк, легче понять, чем длинный горизонтальный набор команд.

Назначение оператора вопросительного знака ? заключается в возврате того или иного значения в зависимости от его состояния. Пожалуйста, используйте его именно для этого. Используйте if вам нужно выполнить разные ветки кода.

Задачи

if (строка с нулем)

важность: 5

Будет ли отображаться alert ?

 если («0») {
  Предупреждение('Привет');
}

Да, так и будет.

Любая строка, кроме пустой (и "0" не пуста), становится true в логическом контексте.

Мы можем запустить и проверить:

 если («0») {
  Предупреждение('Привет');
}

Имя JavaScript

важность: 2

Используя конструкцию if..else , напишите код, который спрашивает: «Каково «официальное» название JavaScript?»

Если посетитель вводит «ECMAScript», то выведите «Верно!», иначе — выведите: «Вы не знаете? ECMAScript!»

Демо в новом окне

 <!DOCTYPE html>
<html>

<тело>
  <скрипт>
    'используйте строгий';

    let value = Prompt('Каково «официальное» название JavaScript?', '');

    если (значение == 'ECMAScript') {
      alert('Верно!');
    } еще {
      alert("Вы не знаете? ECMAScript!");
    }
  </скрипт>


</тело>

</html>

Покажи знак

важность: 2

Используя if..else , напишите код, который получает номер через prompt и затем отображает его в alert :

  • 1 , если значение больше нуля,

  • -1 , если меньше нуля,

  • 0 , если равно нулю.

В этой задаче мы предполагаем, что входные данные всегда являются числом.

Демо в новом окне

 let value = Prompt('Введите число', 0);

если (значение > 0) {
  предупреждение(1);
} иначе если (значение < 0) {
  предупреждение(-1);
} еще {
  оповещение(0);
}

Перепишите «если» на «?»

важность: 5

Перепишите это, if используете условный оператор '?' :

 дайте результат;

если (а + b < 4) {
  результат = 'Ниже';
} еще {
  результат = 'Более';
}

 пусть результат = (a + b <4)? «Ниже»: «Сверху»;

Перепишите «if..else» на «?»

важность: 5

Перепишите if..else , используя несколько тернарных операторов '?' .

Для удобства чтения рекомендуется разбить код на несколько строк.

 пусть сообщение;

if (логин == 'Сотрудник') {
  сообщение = 'Привет';
} else if (логин == 'Директор') {
  сообщение = 'Привет';
} else if (логин == '') {
  сообщение = 'Нет входа';
} еще {
  сообщение = '';
}

 let message = (логин == 'Сотрудник') ? 'Привет' :
  (логин == 'Директор') ? 'Привет' :
  (логин == '') ? «Нет входа»:
  '';
Связанные статьи