Javascript and if: Логические операторы

if…else — JavaScript | MDN

Инструкция if выполняет инструкцию, если указанное условие выполняется (истинно). Если условие не выполняется (ложно), то может быть выполнена другая инструкция.

if (условие)
   инструкция1
[else
   инструкция2]

условие

Выражение, которое является либо истинным, либо ложным.

инструкция1

Инструкция, выполняемая в случае, если значение "условиe" истинно (true). Может быть любой инструкцией в том числе и вложенным if. Для группировки нескольких инструкций используется блок ({...}), Когда никакого действия не требуется, может использоваться пустая инструкция.

инструкция2

Инструкция, выполняемая в случае, если значение "условиe" ложно (false). Может быть любой инструкцией, в том числе и вложенным if. Инструкции тоже  можно группировать в блок.

Несколько команд if … else могут быть вложены для создания условия else if. Обратите внимание, что в JavaScript нет ключевого слова elseif (в одно слово).

if (условие1)
   инструкция1
else if (условие2)
   инструкция2
else if (условие3)
   инструкция3
...
else
   инструкция

Чтобы увидеть, как это работает, ниже представлен пример правильного вложения с отступами:

if (условие1)
   инструкция1
else
   if (условие2)
      инструкция2
   else
      if (условие3)
...

Чтобы выполнить несколько инструкций в условии, используйте блочный оператор ({…}) для группирования этих инструкций. В общем, хорошей практикой всегда является использование блочных операторов, особенно в коде, включающем вложенные операторы

if (условие) {
   инструкции1
} else {
   инструкции2
}

Не путайте примитивные логические значения true и false с правдивостью или ложностью булева объекта. Любое значение, которое не undefined, null, 0, NaN или пустая строка («»), и любой объект, включая объект Boolean, значение которого является ложным, считается правдивым при использовании в качестве условия. Например:

var b = new Boolean(false);
if (b) 

Использование 

if (cipher_char === from_char) {
   result = result + to_char;
   x++;
} else {
   result = result + clear_char;
}

Использование 

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

 if (x > 5) {

} else if (x > 50) {

} else {

}

Присваивание в условном выражении

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

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

BCD tables only load in the browser

Принятие решений в вашем коде — условные конструкции — Изучение веб-разработки

Во многих языках программирования код должен иметь возможность принимать решения на основе введённых пользователем данных. Например, в игре, если у пользователя осталось 0 жизней, то игра завершается. В приложении о погоде утром отображается восход солнца, а вечером звезды и луна. В этой статье мы рассмотрим как в  JavaScript работают так называемые «условия».

Люди (и животные) принимают какие-либо решения всю жизнь, от малозначимых («стоит ли мне съесть одну печеньку или две?») до жизнеопределяющих («стоит ли мне остаться дома и работать на ферме отца или переехать в другую страну и изучать астрофизику?»)

Операторы условия в JavaScript позволяют нам указать разного рода действия в зависимости от выбранного пользователем или системой ответа (например одна печенька или две) и связать его с действием (результатом), например, результатом «съесть одну печеньку» будет «все ещё буду чувствовать себя голодным», а результатом «съесть две печеньки» будет «буду чувствовать себя сытым, но мама меня нарушает за то, что я съел все сладости».

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

Базовый if … else синтаксис

Базовый if...else синтаксис выглядит как pseudocode:

if (condition) {
  code to run if condition is true
} else {
  run some other code instead
}

Что мы имеем:

1. Ключевое слово if расположено перед круглыми скобками.
2. Условие для проверки (condition), расположено внутри круглых скобок (например «это значение больше другого значения?», или «это значение существует?»). Это условие использует операторы сравнения (comparison operators), которые мы изучим позже, и возвратит нам true или false.
3. Внутри скобок { } расположен код, который будет выполняться только в том случае, если условие (condition) верно (true).
4. Ключевое слово else (иначе).
5. Ещё скобки { }, код внутри которых выполнится, только если условие не верно (не true).

Этот код довольно читабелен — он говорит «if (если)  condition (условие) возвращает true (истина), запусти код A, else (иначе) запусти B»

Стоит заметить, что  else и второй блок скобок { } не обязателен — следующий код так же будет работать:

if (condition) {
  код, который должен выполнить, если условие истина
}

какой-то другой код

Тем не менее, следует быть осторожным — в случае, если код внутри вторых скобок { } не контролируется условием, то этот код будет выполняться всегда. Это не плохо, просто вы должны помнить об этом, чаще вы хотите запустить один кусок кода или другой, но не оба.

И, наконец, иногда вы можете встретить код 

if (condition) code to run if condition is true
else run some other code instead

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

Реальный пример

Чтобы лучше понять синтаксис, давайте рассмотрим реальный пример. Представьте, что мать или отец попросили помочь с работой по дому своего ребёнка.  Родитель может сказать: «Если ты поможешь мне с покупками, то я дам тебе дополнительные деньги на карманные расходы, которые ты сможешь потратить на игрушку, какую захочешь».  В JavaScript, мы можем представить это так: 

var shoppingDone = false;

if (shoppingDone === true) {
  var childsAllowance = 10;
} else {
  var childsAllowance = 5;
}

В этом коде, как показано, всегда будет shoppingDone

else if

В предыдущем примере предоставлено два выбора, или результата — но что, если мы хотим больше, чем два?

Существует способ привязать дополнительные варианты/результаты к вашему if. ..else — использоватьelse if. Для каждого дополнительного выбора требуется дополнительный блок, который нужно расположить между if() { ... } и else { ... } — проверьте следующий более сложный пример, который может быть частью простого приложения прогноза погоды:

<label for="weather">Выберите тип погоды сегодня: </label>
<select>
  <option value="">--Сделайте выбор--</option>
  <option value="sunny">Солнечно</option>
  <option value="rainy">Дождливо</option>
  <option value="snowing">Снежно</option>
  <option value="overcast">Облачно</option>
</select>

<p></p> 

var select = document.querySelector('select');
var para = document.querySelector('p');

select.addEventListener('change', setWeather);

function setWeather() {
  var choice = select.value;

  if (choice === 'sunny') {
    para.textContent = 'Сегодня хорошо и солнечно.  Носите шорты! Идите на пляж, или в парк, и купите мороженое.';
  } else if (choice === 'rainy') {
    para.textContent = 'Дождь падает за окном; возьмите плащ и зонт, и не находитесь слишком долго на улице.';
  } else if (choice === 'snowing') {
    para.textContent = 'Снег падает - морозно! Лучше всего посидеть с чашкой горячего шоколада или слепить снеговика.';
  } else if (choice === 'overcast') {
    para.textContent = 'Дождя нет, но небо серое и мрачное; он все может измениться в любую минуту, поэтому на всякий случай возьмите дождевик.';
  } else {
    para.textContent = '';
  }
}

 

1. Здесь у нас есть элемент HTML <select> который позволяет нам выбирать разные варианты погоды и простой абзац.
2. В JavaScript мы создаём ссылки на элементы <select> и <p> и добавляем обработчик события элемента <select>, чтобы при его изменении значения запускалась функция setWeather().
3. Когда функция будет запущена, первоначально мы определим значение переменной choice, которая равна выбранному значению в элементе  <select>. Затем мы используем условный оператор для отображения текста внутри абзаца в зависимости от того, какое значение у переменной   choice. Обратите внимание, как все условия проверяются в else if() {...} блоках, за исключением первого, который использует if() {...}блок.
4. Последний выбор, внутри  else {...} блока, в основном является «последним средством» — код внутри него будет запущен, если ни одно из условий не будет true. В этом случае он служит для удаления текста из абзаца, если ничего не выбрано, например, если пользователь решает повторно выбрать опцию «—Сделайте выбор—» которая указана в начале.

Примечание об операторах сравнения

Операторы сравнения используют для проверки условий внутри наших условных операторов. Сначала мы посмотрели на операторы сравнения в  нашей статье Базовая математика в JavaScript — цифры и операторы . Наш выбор это:

• === и !== — проверяет одно значение идентично или не идентично другому.
• < и > — проверяет одно значение меньше или больше, чем другое.
• <= и >= — проверяет одно значение меньше или равно, либо больше или равно другому.

Примечание: Просмотрите материал по предыдущей ссылке, если вы хотите освежить свою память.

Мы хотели бы особо обратить внимание на проверку булевых значений (true/false),  и общий шаблон, который вы будете встречать снова и снова. Любое значение, которое не есть  false, undefined, null, 0, NaN, или пустая строка ('') фактически возвращает true при тестировании как условного оператора. Поэтому вы можете просто использовать имя собственной переменной, чтобы проверить, равна ли она true, или существует (т. е. переменная не равна undefined). Например:

var cheese = 'Cheddar';

if (cheese) {
  console.log('Ура! Есть сыр для приготовления бутерброда.');
} else {
  console.log('Сегодня нет сыра для бутерброда.');
}

И, возвращаясь к нашему предыдущему примеру о ребёнке, выполняющем поручение своего родителя, вы можете это записать так:

var shoppingDone = false;

if (shoppingDone) { 
  var childsAllowance = 10;
} else {
  var childsAllowance = 5;
}

Вложенность if … else

Вполне нормально использовать один условный оператор if...else внутри другого — вложить их. Например, мы могли бы обновить наше приложение прогноза погоды, чтобы показать ещё один набор вариантов в зависимости от температуры:

if (choice === 'sunny') {
  if (temperature < 86) {
    para.textContent = 'Сейчас ' + temperature + ' градусов по фаренгейту — хорошо и солнечно.  Идите на пляж, или в парк, и купите мороженое.';
  } else if (temperature >= 86) {
    para.textContent = 'Сейчас ' + temperature + ' градусов по фаренгейту — Жара! Если вы хотите выйти на улицу, обязательно используйте солнцезащитный крем.';
  }
}

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

Логические операторы: И, ИЛИ и НЕ

Если вы хотите проверить несколько условий без записи вложенных if...else условий, логические операторы помогут вам. При использовании в условиях, первые два оператора делают следующее:

• && — И; позволяет объединить два или более выражения так, что каждое из них отдельно должно иметь значение true , чтобы в итоге общее выражение имело значение true.
• || — ИЛИ; позволяет объединить два или более выражения так, что одно или несколько из них должно иметь значение true , чтобы в итоге общее выражение имело значениеtrue.

Чтобы дать вам пример оператора И, предыдущий фрагмент кода можно переписать так:

if (choice === 'sunny' && temperature < 86) {
  para.textContent = 'Сейчас ' + temperature + ' градусов по фаренгейту — хорошо и солнечно. Идите на пляж, или в парк, и купите мороженое.';
} else if (choice === 'sunny' && temperature >= 86) {
  para.textContent = 'Сейчас ' + temperature + ' градусов по фаренгейту — Жара! Если вы хотите выйти на улицу, обязательно используйте солнцезащитный крем.';
}

Так, для примера, первый блок кода выполнится только в том случае, если  choice === 'sunny' иtemperature < 86 вернут значение true.

Давайте посмотрим на быстрый пример оператора ИЛИ:

if (iceCreamVanOutside || houseStatus === 'в огне') {
  
  console.log('Вы должны быстро покинуть дом.');
} else {
  console.log('Вероятно, можно в нем оставаться.');
}

Последний тип логического оператора НЕ, выраженный ! оператором, можно использовать для отрицания выражения.  Давайте объединим его с ИЛИ в приведённом выше примере:

if (!(iceCreamVanOutside || houseStatus === 'on fire')) {
  console.log('Вероятно, можно в нем оставаться.');
} else {
  console.log('Вы должны быстро покинуть дом.');
}

В этом фрагменте, если условие ИЛИ возвращает true, оператор НЕ будет отрицать это и выражение вернёт false.

Можно сочетать любое количество логических операторов, в любой последовательности и в любой комбинации. В следующем примере код в блоке будет выполняться только в том случае, если оба условия с ИЛИ возвращают true, а следовательно, и оператор И возвращает true:

if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === 'Steve')) {
  
}

Распространённой ошибкой при использовании логического оператора ИЛИ в условном выражении является указание переменной, значение которой нужно проверить со списком возможных значений этой переменной, разделённых операторами || (ИЛИ). Например.

if (x === 5 || 7 || 10 || 20) {
  
}

В данном примере условие в if(...)  всегда будет оцениваться как true, поскольку 7 (или любое другое ненулевое значение) всегда будет оцениваться как true. Фактически, это условие гласит «если х равен 5, или 7 является true». Но нам требуется совсем не это. Чтобы достичь нужной цели, придётся выполнять полноценную проверку после каждого оператора ИЛИ:

if (x === 5 || x === 7 || x === 10 ||x === 20) {
  
}

Выражения if...else отлично справляются с добавлением условного кода, однако они не лишены недостатков. Они хорошо подходят для ситуации, когда имеется всего пара вариантов развития событий, каждый из которых имеет блок с приемлемым количеством кода, а также в случаях, когда условие является довольно сложным и включает несколько логических операторов. Если же нам требуется всего лишь задать переменную для определённого выбранного значения или напечатать конкретную фразу при определённом условии, изученный нами синтаксис может оказаться довольно громоздким, особенно если имеется большое количество вариантов выбора.

В этом случае нам поможет оператор switch – он принимает одно единственное выражение или значение, а затем просматривает ряд вариантов, пока не найдут вариант, соответствующий этому значению, после чего выполняет код, назначенный этому варианту. Вот пример использования этого оператора:

switch (выражение) {
  case choice1:
    выполнить этот код
    break;

  case choice2:
    выполнить этот код, а не предыдущий
    break;

  // вариантов может быть любое количество

  default:
    а вообще-то, выполнить только этот код
}

Что мы имеем:

1. Ключевое слово switch, за которым следует пара круглых скобок.
2. В скобках приводится выражение или значение.
3. Ключевое слово case, за которым следует вариант выбора (именно он проверяется на соответствие выражению или значению) и двоеточие.
4. Код, который будет выполняться, если вариант совпадает с выражением.
5. Оператор break, за которым следует точка с запятой. Если вариант совпал с выражением или значением, браузер закончит выполнять блок кода, дойдя до оператора break, и перейдёт к выполнению кода, расположенного после оператора switch.
6. Вариантов выбора (пункты 3–5) может быть сколь угодно много.
7. Ключевое слово default используется точно также, как любой другой вариант выбора (пункты 3–5) за тем исключением, что после default нет других вариантов выбора, поэтому инструкция break не требуется, никакого кода дальше нет. Это вариант выбора по умолчанию, выбираемый, если ни один из других вариантов не совпал с выражением.

Примечание. Вариант выбора default может быть пропущен, если выражение гарантированно совпадёт с одним из вариантов выбора. В противном случае вариант default необходим.

Пример оператора switch

Давайте рассмотрим реальный пример — перепишем наше приложение прогноза погоды с использованием оператора switch:

<label for="weather">Выберите тип погоды сегодня: </label>
<select>
  <option value="">--Сделайте выбор--</option>
  <option value="sunny">Солнечно</option>
  <option value="rainy">Дождливо</option>
  <option value="snowing">Снежно</option>
  <option value="overcast">Облачно</option>
</select>

<p></p>

var select = document. querySelector('select');
var para = document.querySelector('p');

select.addEventListener('change', setWeather);


function setWeather() {
  var choice = select.value;

  switch (choice) {
    case 'sunny':
      para.textContent = 'Сегодня хорошо и солнечно. Наденьте шорты! Идите на пляж или в парк, и купите мороженое.';
      break;
    case 'rainy':
      para.textContent = 'На улице дождь. Возьмите плащ и зонт, и не гуляйте слишком долго';
      break;
    case 'snowing':
      para.textContent = 'Идёт снег - морозно! Лучше всего посидеть с чашкой горячего шоколада или слепить снеговика.';
      break;
    case 'overcast':
      para.textContent = 'Дождя нет, но небо серое и мрачное; он все может измениться в любую минуту, поэтому на всякий случай возьмите дождевик.';
      break;
    default:
      para.textContent = '';
  }
}

Это последний теоретический раздел данной статьи и мы перейдём к практическим упражнениям. Тернарный или условный оператор имеет простой синтаксис: он проверяет условие и возвращает одно значение или выражение, если условие является true, и другое значение/выражение, если условие является false. Часто это очень удобная альтернатива блоку if...else, позволяющая затрачивать меньшие усилия на написание кода, когда имеется всего лишь два варианта, выбираемых на основе условия true/false. Общая схема оператора:

( условие) ? выполнить этот код : выполнить этот код вместо первого

Приведём простой пример:

var greeting = ( isBirthday ) ? 'С днём рождения, г-н Кузнецов! Хорошо вам повеселиться!' : 'Доброе утро, г-н Кузнецов.';

У нас есть переменная isBirthday , если она true, мы отправляем посетителю поздравление с днём рождения; если нет – выдаём стандартное приветствие.

Пример тернарного оператора

При использовании тернарного оператора не обязательно ограничиваться лишь значениями переменной, можно выполнять функции или строки кода; все, что угодно. В следующем примере показано простое средство выбора темы, задающее внешний вид веб-сайта с помощью тернарного оператора.

<label for="theme">Выберите тему: </label>
<select>
  <option value="white">Белая</option>
  <option value="black">Чёрная</option>
</select>

<h2>Это мой веб-сайт</h2>

var select = document.querySelector('select');
var html = document.querySelector('html');
document.body.style.padding = '10px';

function update(bgColor, textColor) {
  html.style.backgroundColor = bgColor;
  html.style.color = textColor;
}

select.onchange = function() {
  ( select.value === 'black' ) ? update('black','white') : update('white','black');
}

Мы используем элемент <select> для выбора темы (чёрная или белая), а также простой <h2> (en-US) для отображения заголовка веб-сайта. Кроме того, у нас есть функция update(), принимающая в качестве параметров (входных данных) два цвета. В качестве фона используется первый переданный цвет, а в качестве цвета текста – второй переданный цвет.

Наконец, у нас есть обработчик событий onchange , использующийся для запуска функции, содержащей тернарный оператор. Сначала она проверяет условие — select.value === 'black'. Если возвращается true, мы запускаем функцию update() с параметрами чёрного и белого, в результате чего получаем чёрный цвет фона и белый цвет текста. Если возвращается false, мы запускаем функцию update() с параметрами белого и чёрного, в результате чего цвета веб-сайта меняются на противоположные.

В данном примере вы поможете нам закончить простое приложение календаря. Код включает:

• Элемент <select>, позволяющий пользователю выбирать разные месяцы.
• Обработчик событий onchange для обнаружения изменения значения, выбранного в меню <select>.
• Функция createCalendar() , рисующая календарь и отображающая правильный месяц в элементе <h2> (en-US).

Вы должны написать условную конструкцию в функции обработчика onchange , сразу после комментария // ДОБАВЬТЕ СЮДА УСЛОВНОЕ ВЫРАЖЕНИЕ. Конструкция должна:

1. Проверить выбранный месяц (хранящийся в переменной choice. Это будет значение элемента <select> после изменения значения, например, «Январь».)
2. Задать переменную, скажем, days, равную количеству дней в выбранном месяце. Для этого нужно будет проверить количество дней в каждом месяце. Високосный год можно не учитывать.

Советы:

• Советуем использовать логический оператор OR для группировки нескольких месяцев в рамках одного условия; многие месяцы имеют одинаковое количество дней.
• Подумайте, какое количество дней в месяце встречается чаще всего и используйте его в качестве варианта по умолчанию.

Если допустили ошибку, используйте кнопку «Сброс», чтобы вернуться к исходному виду примера. Если у вас совсем ничего не получается, нажмите «Показать решение».

В HTML коде внутри <select> названия месяцев value="" введены на русском языке. Соответственно ссылки на них из вашего скрипта так же на русском. Не забываем про синтаксис. (прим. — ConstantineZz)

В данном примере вы будете использовать пример тернарного оператора, который мы рассматривали ранее, и превратите тернарный оператор в инструкцию switch, что позволит увеличить количество вариантов выбора для простого веб-сайта. Посмотрите на <select> — на этот раз он включает не два, а целых пять вариантов тем. Нужно добавить инструкцию switch сразу под комментарием // ДОБАВЬТЕ ИНСТРУКЦИЮ SWITCH:

• Она должна принимать переменную choice в качестве входного выражения.
• Каждый элемент case должен содержать вариант выбора, соответствующий одному из доступных для выбора значений: белая, чёрная, лиловая, жёлтая или психоделическая тема.
• В блоке каждого элемента case необходимо вызывать функцию update(), которой передаётся два цвета: первый – это цвет фона, а второй – цвет текста. Помните, что значения цветов – это строковые значения, поэтому их нужно заключать в кавычки.

Если допустили ошибку, используйте кнопку «Сброс», чтобы вернуться к исходному виду примера. Если у вас совсем ничего не получается, нажмите «Показать решение».

Это все, что вам нужно знать на данный момент об условных логических структурах! Уверены, вы хорошо разобрались в теоретическом материале и с лёгкостью справились с предложенными упражнениями. Если же что-то осталось для вас непонятным, перечитайте статью ещё раз или свяжитесь с нами.

Прекратите ставить так много операторов If в вашем JavaScript — Разработка на vc.ru

1010 просмотров

«Для человека с молотком, все выглядит как гвоздь» — Авраам Маслоу.

Мне нравится думать об условной логике как о хлебе и масле программного обеспечения. Это дает разработчикам возможность создавать интересные, полезные и забавные вещи.

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

Однако существуют и другие способы работы с условной логикой, которые часто упускаются разработчиками из виду. Легко дотянуться до верного оператора if для каждого задания, но изучение других техник сделает вас более умелым и эффективным программистом.

Мастер-плотник не будет использовать один и тот же инструмент для каждой работы, и мастер-разработчик тоже не должен.

В этой статье рассматриваются четыре альтернативы классическому утверждению » if “.

• Тернарные операторы
• Switch
• Логические операторы (&& и ||).
• Lookup maps

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

Тернарные операторы — это отличный способ справиться с основными условиями if-else. В примере ниже значение, присваиваемое сообщению, меняется в зависимости от того, является ли hasError правдивым или фальшивым.

С классическим утверждением If:

let message = «Thanks for contacting us! We’ll be in touch shortly!»

message = «Oops, that’s an error. Please try again later!»

Это решение сначала устанавливает message как безошибочную версию, а затем, при необходимости, перезаписывает ее.

Теперь с помощью тернарного оператора:

? «Oops, that’s an error. Please try again later!»

: «Thanks for contacting us! We’ll be in touch!”;

Тернарный вариант имеет здесь некоторые заметные преимущества:

• Она более компактна, потому что сообщение должно быть назначено только один раз.

• Так как сообщение больше не нужно перезаписывать при наличии ошибки, мы можем использовать const вместо let.

Тернарный оператор — явный победитель в этой ситуации, но не увлекайтесь им. Применяйте его только в случаях, требующих относительно простой логики и не объединяющих несколько тернарных операторов в одну строку. Ваши коллеги вас отблагодарят!

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

Это делает операторы-переключатели немного менее гибкими, чем if, но при этом делает их немного лаконичнее. Рассмотрим пример:

Во-первых, с оператором if:

} else if (status === 401) {

} else if (status === 404) {

Далее с использованием switch:

Switch использует больше строк кода, но избегает повторения проверки равенства снова и снова, и имеет более обтекаемый внешний вид в целом.

Одна из важных деталей, которую следует учитывать при написании высказываний switch, — это использование пауз. В отличие от цепочки if-else, операторы switch могут «провалиться» в следующий случай. Это может сбить с толку, поэтому обычно рекомендуется добавлять перерыв в конце каждого случая.

Логические операторы (&& и ||)

Операторы && и || («and» и «or») ведут себя в JavaScript по-разному, чем в других языках программирования. Такое особое поведение дает этим операторам уникальную возможность работать с условной логикой.

Вот как работает оператор && на JavaScript:

• Сначала он смотрит на левую сторону оператора. Если его значение false, то он возвращает это значение, даже не глядя на правую сторону оператора.

• Если значение с левой стороны оказывается true, то возвращается значение с правой стороны оператора.

Ключевым моментом является то, что операторы && и || не обязательно должны возвращать булевые значения (true или false). Это может сбить с толку, но может быть и полезно.

Использование оператора && в действии

Часто вы хотите получить доступ к свойству внутри объекта, но не можете быть уверены, существует ли этот объект заранее.

Например, может быть, вы хотите использовать свойство name пользователя для построения приветственного сообщения:

const message = `Welcome, ${user.name}!`;

Но что если user имеет значения null, false, undefined?

const message = `Welcome, ${user.name}!`

// TypeError: Cannot read property ‘name’ of null;

Если user не является объектом, и мы пытаемся получить доступ к свойству name на нем, JavaScript выдаст ошибку.

Этого можно избежать, добавив в свой код оператор if:

message = `Welcome, ${user.name}!`

Это является уловкой, но & & операторы могут сделать это немного лаконичнее:

const message = user && user. name && `Welcome, ${user.name}!`;

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

Использование оператора ||:

Оператор || отлично подходит для назначения отложенных значений.

В качестве примера скажем, что вы хотите создать переменную handle для текущего пользователя. Если у этого пользователя есть действительное имя пользователя, то его следует использовать, но если имя пользователя установлено в null, то вместо него следует использовать fallback-значение “Guest».

Сначала, с простым оператором if:

Теперь с использованием оператора ||:

const handle = username || ‘Guest’;

Опять же — намного чище и только одна строчка кода. Отличное улучшение!

Lookup maps идеально подходят для получения одного значения, которое ассоциируется с другим.

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

Успех — зеленый

Предупреждение — желтого цвета

Информация — синего цвета

Ошибка — красного цвета

Давайте напишем функцию, которая делает это. Сначала, с утверждением » if”:

function getStatusColor (status) {

if (status === ‘success’) {

if (status === ‘warning’) {

if (status === ‘error’) {

Это нормально, но lookup map может быть более подходящей. Буквальные обозначения объектов — один из способов реализации lookup map в JavaScript:

function getStatusColor (status) {

Это выглядит стройнее и менее повторяющеяся В качестве дополнительного преимущества, lookup maps не обязательно должны быть жестко закодированы — соотношение между статусом и цветами может быть динамическим, и этот шаблон все равно будет работать.

Краткое изложение:

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

Тернарные операторы идеально подходят для работы с логикой if-else в одной строке кода, но их следует использовать только для достаточно простых случаев использования.

Операторы-переключатели идеально подходят, когда вас интересует конкретная переменная, которая может принимать несколько различных значений. Они менее мощны, чем операторы if, но на них часто приятнее смотреть.

В отличие от других языков программирования, операторы && и || не всегда возвращают булевое значение в JavaScript, и такое поведение может быть весьма полезным. Оператор && часто используется, чтобы избежать ошибок при попытке доступа к свойствам объекта, а оператор || часто используется для присвоения переменной резервного значения, когда первый вариант недоступен.

Lookup maps- отличный способ получить одно значение, связанное с другим, например, получить цвет, связанный со статусом сообщения (статус успеха может отображаться зеленым цветом).

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

Автор:Крис Гилхоэд

Перевод:Даниил Лебедев

Еще больше полезной информации вы можете найти в нашем Телеграм канале по ссылке: https://t.me/metsolution

Альтернатива if/else и switch: литералы объектов в JavaScript

Сложные условия в JS всегда были источником лишнего кода. Однако использование литералов объектов в JavaScript может избавить вас от этой проблемы. Давайте разберёмся, как это работает.

Литерал объекта в JavaScript — это список пар ключ-значение, перечисленных через запятую и обёрнутый фигурными скобками.

Допустим у нас есть функция, которая принимает на вход рифмованную фразу на английском сленге кокни и возвращает её значение. Если использовать конструкцию if/else, то код будет выглядеть следующим образом:

function getTranslation(rhyme) {
  if (rhyme.toLowerCase() === "apples and pears") {
    return "Stairs";
  } else if (rhyme.toLowerCase() === "hampstead heath") {
    return "Teeth";
  } else if (rhyme.toLowerCase() === "loaf of bread") {
    return "Head";
  } else if (rhyme.toLowerCase() === "pork pies") {
    return "Lies";
  } else if (rhyme.toLowerCase() === "whistle and flute") {
    return "Suit";
  }

  return "Rhyme not found";
}

Выглядит так себе. Этот код не только плохо читается, но и использует повторяющийся вызов функции toLowerCase().

Чтобы уменьшить количество кода, мы можем использовать дополнительную переменную или конструкцию switch.

function getTranslation(rhyme) {
  switch (rhyme.toLowerCase()) {
    case "apples and pears":
      return "Stairs";
    case "hampstead heath":
      return "Teeth";
    case "loaf of bread":
      return "Head";
    case "pork pies":
      return "Lies";
    case "whistle and flute":
      return "Suit";
    default:
      return "Rhyme not found";
  }
}

Такой код выглядит чище, но это не предел. К тому же, в случае использования более сложных условий, можно случайно пропустить break и спровоцировать баги.

Альтернатива

Мы можем достичь той же функциональности используя объект. Вот пример, который выглядит гораздо аккуратнее:

function getTranslationMap(rhyme) {
  const rhymes = {
    "apples and pears": "Stairs",
    "hampstead heath": "Teeth",
    "loaf of bread": "Head",
    "pork pies": "Lies",
    "whistle and flute": "Suit",
  };
  
  return rhymes[rhyme.toLowerCase()] ?? "Rhyme not found";
}

Мы используем объект, ключи которого выполняют роль условий, а значения — результатов. Затем, с помощью квадратных скобок, мы проверяем наличие нужной строки. Так как полученная строка может быть null или undefined, то мы используем оператор Nullish coalescing (??). Таким образом мы избавляемся от null-значения, но не исключаем случай, что результат может быть равен нулю или false.

function stringToBool(str) {
  const boolStrings = {
    "true": true,
    "false": false,
  };

  return boolStrings[str] ?? "String is not a boolean value";
}

Это немного надуманный пример, но он иллюстрирует то, как использование ?? помогает избежать багов.

Подробнее о способах обработки undefined в JavaScript.

Сложная логика

Для организации более сложных условий вы можете использовать в качестве значений свойств функции.

function calculate(num1, num2, action) {
  const actions = {
    add: (a, b) => a + b,
    subtract: (a, b) => a - b,
    multiply: (a, b) => a * b,
    divide: (a, b) => a / b,
  };

  return actions[action]?.(num1, num2) ?? "Calculation is not recognised";
}

В этом коде мы выбираем необходимую функцию по ключу, а затем вызываем её с двумя аргументами. Так как мы используем опциональную цепочку, то функция вызовется только, если она существует. В противном случае вернётся дефолтное значение.

Вывод

Каждая условная конструкция имеет свою область применения. Для литералов объектов в JavaScript это длинные списки условий и сложные условия, которые можно реализовать с помощью функций.

Источник Don’t Use If-Else and Switch in JavaScript, Use Object Literals

JavaScript, если иначе, если

Условные операторы используются для выполнения различных действий в зависимости от различных условий.

Условные отчеты

Очень часто, когда вы пишете код, вы хотите выполнять разные действия для разных решений.

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

В JavaScript у нас есть следующие условные операторы:

• Используйте , если , чтобы указать блок кода, который должен быть выполнен, если указанное условие истинно
• Используйте else , чтобы указать блок кода, который должен быть выполнен, если такое же условие ложный
• Используйте else, если , чтобы указать новое условие для проверки, если первое условие ложно
• Используйте переключатель , чтобы указать множество альтернативных блоков кода, которые должны быть выполнены

Оператор switch описывается в следующей главе.

Заявление if

Используйте оператор if , чтобы указать блок кода JavaScript для выполняться, если условие истинно.

Синтаксис

если ( условие ) {
// блок кода, который будет выполнен, если условие истинно
}

Обратите внимание, что , если написано строчными буквами. Прописные буквы (If или IF) вызовут ошибку JavaScript.

Пример

Сделайте приветствие «Добрый день», если час меньше 18:00:

если (час <18) {
приветствие = «Добрый день»;
}

Результат приветствия будет:

Заявление else

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

если ( условие ) {
// блок кода, который будет выполнен, если условие истинно
} еще {
// блок кода, который будет выполнен, если условие ложно
}

Пример

Если час меньше 18, создать «Добрый день» приветствие, иначе «Добрый вечер»:

если (час <18) {
приветствие = «Добрый день»;
} еще {
приветствие = «Добрый вечер»;
}

Результат приветствия будет:

Заявление else if

Используйте оператор else if , чтобы указать новое условие, если первое условие ложно.

Синтаксис

если ( условие1 ) {
// блок кода, который будет выполнен, если условие1 истинно
} иначе, если ( условие2 ) {
// блок кода, который будет выполнен, если условие1 ложно, а условие2 истинно
} else {
// блок кода, который должен быть выполнен, если условие1 ложно, а условие2 ложно
}

Пример

Если время меньше 10:00, создать «Хорошее утро» приветствие, если нет, но время меньше 20:00, создайте приветствие «Добрый день», в противном случае «Добрый вечер»:

если (время <10) {
приветствие = «Доброе утро»;
} иначе, если (время <20) {
приветствие = «Добрый день»;
} еще {
приветствие = «Добрый вечер»;
}

Результат приветствия будет:

Другие примеры

Случайная ссылка
Этот пример напишет ссылку либо на W3Schools, либо на World Wildlife. Фонд (WWF).Используя случайное число, существует 50% шанс для каждого из ссылки.

Условный (тернарный) оператор — JavaScript

Условный (тернарный) оператор — это только оператор JavaScript, который принимает три операнда: условие, за которым следует вопросительный знак (? ), затем выражение, которое нужно выполнить, если условие truthy, за которым следует двоеточие (: ), и, наконец, выражение для выполнения, если условие ложное.Этот оператор часто используется как ярлык для , если утверждение.

  состояние? exprIfTrue: exprIfFalse  

Параметры

условие

Выражение, значение которого используется как условие.

exprIfTrue

Выражение, которое вычисляется, если условие оценивается как истинное значение (которое равно или может быть преобразовано до правда ).

exprIfFalse

Выражение, которое выполняется, если условие ложный (то есть имеет значение, которое может быть преобразовано в ложь ).

Помимо false , возможные ложные выражения: null , NaN , 0 , пустая строка ( "" ) и не определено . Если условие является любым из них, Результат условного выражения будет результатом выполнения выражения exprIfFalse .

Простой пример

  var age = 26;
var drink = (возраст> = 21)? «Пиво»: «Сок»;
console.log (напиток);
  

Обработка нулевых значений

Одним из распространенных способов использования является обработка значения, которое может быть null :

  let welcome = person => {
    пусть имя = человек? person.name: `незнакомец`
    return `Привет, $ {name}`
}

console.log (приветствие ({имя: `Алиса`}));
console.log (приветствие (ноль));
  

Условные цепочки

Тернарный оператор является правоассоциативным, что означает, что он может быть «сцеплен» в следующим образом, аналогично if… else if… else if… else цепочка:

  пример функции (…) {
    условие возврата1? значение1
         : condition2? значение2
         : condition3? значение3
         : значение4;
}



function example (…) {
    если (условие1) {возвращаемое значение1; }
    иначе, если (условие2) {возвращаемое значение2; }
    иначе, если (условие3) {возвращаемое значение3; }
    else {возвращаемое значение4; }
}
  

Таблицы BCD загружаются в браузер только

, если…else — JavaScript | MDN

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

  if (condition) {
   заявление1
} еще {
   заявление2
}
  

состояние

Выражение это считается либо правдой, либо ложью.

выписка1

Заявление, которое выполняется, если условие истинно.Может быть любой оператор, включая дополнительные вложенные операторы if . Выполнить несколько операторов, используйте оператор блока ( {...} ), чтобы сгруппировать эти операторы. Чтобы не выполнять никаких операторов, используйте пустой оператор.

ведомость2

Заявление, которое выполняется, если условие ложь, и существует пункт else . Может быть любое заявление, включая операторы блока и дополнительные вложенные операторы if .

Несколько операторов if ... else могут быть вложены для создания иначе, если пункт . Обратите внимание, что нет elseif (одним словом) ключевое слово в JavaScript.

  если (условие1)
  заявление1
иначе, если (условие2)
  заявление2
иначе, если (условие3)
  заявление3
...
еще
  заявлениеN
  

Чтобы увидеть, как это работает, вот как это выглядело бы при правильном отступе во вложении:

  если (условие1)
  заявление1
еще
  если (условие2)
    заявление2
  еще
    если (условие3)
...
  

Чтобы выполнить несколько операторов в рамках предложения, используйте оператор блока. ( {...} ), чтобы сгруппировать эти операторы. В целом рекомендуется всегда используйте блочные операторы, особенно в коде, включающем вложенный , если выписки:

  if (condition) {
  заявления1
} еще {
  заявления2
}
  

Не путайте примитивные логические значения true и false с правдой или ложностью Boolean объект.Любое значение, отличное от false , undefined , null , 0 , -0 , NaN или пустой строка ( "" ) и любой объект, включая логический объект, значение которого false считается истинным при использовании в качестве условия. Для пример:

  var b = новое логическое значение (ложь);
если (б)
  

Использование if … else

  if (cipher_char === from_char) {
  результат = результат + to_char;
  x ++;
} еще {
  результат = результат + clear_char;
}
  

Использование else if

Обратите внимание, что в JavaScript нет синтаксиса elseif .Однако вы можете написать это с пробелом между , иначе и , если :

  if (x> 50) {
  
} else if (x> 5) {
  
} еще {
  
}  

Присвоение условного выражение

Не рекомендуется использовать простые присваивания в условном выражении, поскольку присваивание можно спутать с равенством при просмотре кода. Например, сделайте не используйте следующий код:

Если вам нужно использовать присваивание в условном выражении, обычной практикой является заключите задание в дополнительные скобки.Например:

таблиц BCD загружаются только в браузере

условных операторов JavaScript: основы с примерами

Условные операторы управляют поведением в JavaScript и определяют, могут ли части кода выполняться.

В JavaScript есть несколько различных типов условных операторов, в том числе:

• Операторы «Если»: если условие истинно, оно используется для указания выполнения блока кода.
• Операторы «Else»: если то же условие ложно, оно указывает выполнение блока кода.
  
• Операторы «Else if»: задают новый тест, если первое условие ложно.

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

Как наиболее распространенный тип условных выражений, оператор if выполняется только в том случае, если условие, заключенное в круглые скобки (), является истинным.

Вот что происходит в приведенном выше примере:

• Ключевое слово if указывает JavaScript начать условный оператор.
• (10> 5) — это условие для проверки, которое в данном случае истинно — 10 больше 5.
• Часть, заключенная в фигурные скобки {}, является блоком кода для выполнения.
• Поскольку условие выполняется, переменному результату присваивается значение «if block».

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

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

Пример оператора Else If

Вы также можете расширить оператор if с помощью оператора else if, который добавляет еще одно условие с собственным блоком.

Вы можете использовать несколько условных выражений if else, но обратите внимание, что выполняется только первый блок else if.JavaScript пропускает все оставшиеся условные выражения после выполнения первого из них.

Для работы инструкции else if не требуется следующий оператор else.Если ни одно из условий if или else if не выполняется, то JavaScript движется вперед и не запускает ни один из условных блоков кода.

С планом Pluralsight вы можете:

С помощью 14-дневного пилотного проекта вы можете:

• Доступ к тысячам видеороликов для развития критических навыков
• Предоставить до 10 пользователей доступ к тысячам видеокурсов
• Практикуйте и применяйте навыки с помощью интерактивных курсов и проектов
• Просматривайте данные о навыках, использовании и тенденциях для ваших команд
• Подготовьтесь к сертификации с помощью ведущих в отрасли практических экзаменов
• Измерение уровня владения навыками и ролями
• Согласуйте обучение с вашими целями с помощью путей и каналов

С планом Pluralsight вы можете:

С помощью 14-дневного пилотного проекта вы можете:

• Доступ к тысячам видеороликов для развития критических навыков
• Предоставьте до 10 пользователей доступ к тысячам видеокурсов
• Практикуйте и применяйте навыки с помощью интерактивных курсов и проектов
• Просматривайте данные о навыках, использовании и тенденциях для ваших команд
• Подготовьтесь к сертификации с помощью ведущих в отрасли практических экзаменов
• Измерение уровня владения навыками и ролями
• Согласуйте обучение с вашими целями с помощью путей и каналов

Мы используем файлы cookie, чтобы сделать взаимодействие с нашими веб-сайтами и услугами простым и значимым.Чтобы получить дополнительную информацию о файлах cookie, которые мы используем, или узнать, как отключить файлы cookie, щелкните здесь.

Операторы if, else и else if в JavaScript

В JavaScript, чтобы управлять потоком вашей программы или сценария на основе условий, мы можем использовать условные операторы if ... else . Условные операторы if и else работают так же, как они используются в реальном мире при общении. Например, см. Следующее утверждение: , если вы набрали более 40% оценок, вы сдадите экзамен, иначе вы не сдадите экзамен , здесь условие — оценка более 40% , если это правда, то вы сдаете, если это ложь, то вы потерпите неудачу.

В JavaScript , если — это условный оператор, который используется для управления потоком программы так же, как в языках программирования C, C ++ и т. Д. Это один из самых простых и простых способов управления ходом выполнения программы в зависимости от условий. Вы можете использовать оператор if , если мы хотим выполнять операторы кода, только когда определенное условие истинно .

Условие для оператора if заключено в круглые скобки сразу после ключевого слова if .

JavaScript

Ниже приведен базовый синтаксис для использования оператора if в коде JavaScript.

  если (<ВЫРАЖЕНИЕ>)
{
    // блок операторов
}  

Условие, переданное с оператором if , в основном является выражением, которое может иметь сравнение двух значений, любое выражение, возвращающее логический вывод истина / ложь , или любое другое выражение. Кроме того, выполняется условие , когда выражение возвращает истину или любое положительное числовое значение , и в этом случае блок операторов кода, заключенный в фигурные скобки, под if, оператор будет выполнен .

JavaScript

  если (<ВЫРАЖЕНИЕ>)
{
    // если блок
}
еще
{
    // блок else
}  

  если (ВЫРАЖЕНИЕ1)
{
    // если блок
}
иначе, если (ВЫРАЖЕНИЕ2)
{
    // иначе, если блок
}
иначе, если (ВЫРАЖЕНИЕ3)
{
    // еще один блок else if
}
еще
{
    // блок else
}  

  если  (yourcondition ==  true ) {
  // То, что вы вводите между фигурными скобками (это упомянутый выше блок кода), будет выполнено, если 'yourcondition' истинно.}
 

 var mynumber = 20;
 , если  (mynumber ==  20 ) {
  document.write («Переменная mynumber равна 20.»);
}  else  {
  document.write («Переменная mynumber не равна 20.»);
}
 

  var  mynumber = 20; 
если  (mynumber < 500 ) {
  документ.write («Число меньше 500.»);
}  else if ( mynumber> =  500)  {
  document.write («Число больше 500.»);
}  else  {
  / * Этот блок кода не будет выполнен, так как все числа либо больше, равны, либо меньше 500. * /
  document.write («Пожалуйста, введите число.»);
} 

  var  theskyisblue =  true ;
  if  (the skyisblue) {
  // Это означает, что небо голубое, поэтому код в этом блоке будет выполнен.
  document.write («Да небо голубое!»);
}
 

  var  theskyisblue =  true ;
 , если  (theskyisblue ==  true ) {
  // Это означает, что небо голубое, поэтому код в этом блоке будет выполнен.document.write («Да небо голубое!»);
}
 

  var  theskyisorange =  false ;
  if  (! Theskyisorange) {
  //! theskyisorange означает: если небо не оранжевое, выполните следующий код.document.write («Нет, небо не оранжевое!»);
}
 

  var  myvariable = 2;
 , если  (myvariable == 1 || myvariable == 2 || myvariable == 3) {
  // Этот блок кода будет выполнен, если  выполнено одно или несколько  условий выше.
  document.write ("Число меньше 3.");
} 

если условие {
 выполнить этот код 
}
 

if ('Stephen' === name) {
 message = "С возвращением, Стивен"; 
} else {
 message = "Добро пожаловать" + имя; 
}
 

переменная = (условие)? истинное значение: ложное значение;
 

message = ('Стивен' === имя)? «С возвращением, Стивен»: «Добро пожаловать» + имя;
 

var answer; 
 if (a == b) {
 if (a == c) {
 answer = "все равны"; 
} else {
 answer = "a и b равны"; 
} 
} else {
 if (a == c) {
 answer = "a и c равны"; 
} else {
 if (b == c) {
 answer = "b и c равны"; 
} else {
 answer = "все разные"; 
} 
} 
}
 

var answer = (a == b)? ((a == c)? «все равны»: 
 «a и b равны»): (a == c)? "a и c равны": (b == c)? 
 «b и c равны»: «все разные»;