Javascript if and if: JavaScript if else else if

Альтернатива 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

Реклама на Tproger: найдем для вас разработчиков нужного стека и уровня.

Подробнее

Реклама на tproger.ru

Загрузка

JavaScript If else и else if — объяснение

JavaScript

2 года назад

от Shehroz Azam

JavaScript — это текстовый язык сценариев/программирования, используемый во фронтенд- и бэкэнд-разработке. Чаще всего он используется на стороне клиента для добавления интерактивности к статической веб-странице.

Что такое оператор if?

Операторы if являются условными операторами, которые принимают решения на основе определенных критериев. Эти операторы выполняют разные действия в разных условиях; если определенные/указанные критерии соблюдены, блок кода в теле

, если будет выполнен оператор .

Синтаксис оператора if в JavaScript:

if (условие)
{
  Операторы
}

Примечание: Мы будем использовать консоль браузера для демонстрации примеров, выполненных в этом посте. Чтобы открыть консоль браузера:

• Используйте клавишу F12 в Chrome и других браузерах на основе хрома.
• Используйте CTRL + SHIFT + K сочетания клавиш для Mozilla.
• Используйте Option + ⌘ + C сочетания клавиш в Safari (если меню разработчика не появляется, откройте «Настройки», нажав ⌘ +, и на вкладке Advanced установите флажок
  «Показать меню «Разработка» в строке меню» ) .

Пример

номер переменной = 2;

if (число <10)
{
console.log(‘Число меньше десяти.’)
}

В приведенном выше примере мы сначала объявили переменную с именем число , а затем присвоил ему значение 2 . Затем мы использовали условный оператор, чтобы проверить, меньше ли число , чем 10 . Поскольку 2 < 10 , условие оператора if было истинным, и тело было выполнено. Оператор if содержит внутри себя функцию console.log() , используемую для записи сообщения на консоль.

Если мы изменим значение числовой переменной с 2 to 11, , то условие станет ложным, и тело оператора if не будет выполнено.

номер переменной = 11;

if (число <10)
{
console.log(‘Число меньше десяти.’)
}

Как видно на скриншоте ниже, консоль совершенно пуста.

Операторы If-else в JavaScript:

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

var number = 11;

if (число <10)
{
console. log(‘Число меньше десяти.’)
}
else
{
console.log(‘Число больше десяти.’)
}

В приведенном выше примере мы добавили еще один оператор, т. е. иначе . Поскольку 11 больше, чем 10 , исходное условие оператора if было ложным, и было выполнено тело оператора else .

Операторы else-if в JavaScript:

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

номер переменной = 10;

if (число <10)
{
console.log(‘Число меньше десяти. ‘)
}
elseif (число == 10)
{
console.log(‘Число равно десяти. ‘)
}
else
{
console.log(‘Число больше десяти.’)
}

В приведенном выше примере число равно 10 . Итак, исходное условие ложно. Итак, редактор переходит к иначе-если условие. Поскольку число равно 10 , это утверждение истинно, и выполняется тело оператора else-if . Редактор не проверяет оператор else , поскольку одно из условий уже выполняется. Операторы

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

Заключение

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

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

Об авторе

Shehroz Azam

Разработчик Javascript и энтузиаст Linux с 4-летним опытом работы в промышленности и проверенными ноу-хау, позволяющими сочетать творческий подход и точки зрения удобства использования, что приводит к созданию веб-приложений мирового класса. У меня есть опыт работы с Vue, React и Node.js, и в настоящее время я работаю над написанием статей и созданием видео.

Посмотреть все сообщения

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

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

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

if , когда мы хотим выполнять операторы кода только тогда, когда определенное условие истинно .

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

JavaScript

if : синтаксис и использование

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

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

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

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

JavaScript

if Пример

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

Теперь давайте посмотрим, как комбинация блока if. ..else работает в JavaScript.

JavaScript

if...else : Синтаксис и использование

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

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

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

JavaScript

if...else Пример

В этом примере мы будем использовать else блок вместе с оператором и if и блоком.

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

JavaScript

if…else if : Синтаксис и использование

JavaScript 9Оператор 0246 else if

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

Ниже у нас есть основной синтаксис использования else if вместе с if и else .

 если(EXPRESSION1)
{
    // если блок
}
иначе если(EXPRESSION2)
{
    // иначе, если блок
}
иначе если(EXPRESSION3)
{
    // еще один блок if
}
еще
{
    // еще блок
} 

У нас может быть столько блоков else if , сколько мы хотим после оператора if . Кроме того, наличие блока else в конце не является обязательным.

JavaScript

if...else if Пример

В этом примере мы будем использовать оператор if и else if для проверки нескольких условий.

На этом мы завершили изучение основ управления потоком данных в JavaScript и теперь знаем, как реализовать выполнение кода на основе условий в нашем коде JavaScript. Например, если вы хотите написать простой сценарий, в котором у вас есть HTML-форма, и вы просите пользователя указать свои данные, такие как имя и пол. Затем, в зависимости от того, что они вводят, вы можете показать собственное сообщение для другого пола или аналогичным образом на основе любого другого набора условий, которые вы можете выполнять в своем пользовательском интерфейсе с помощью JavaScript.