Что в мире является условным JavaScript?

Автор оригинала: FreeCodeCamp Community Member.

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

Вступление

Я пришел в развитие с нетрадиционного пути. Одна вещь всегда была особенно тяжелой – уметь выходить за рамки синтаксиса новой концепции и поместить его в контекст, который имел смысл.

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

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

Единственная предпосылка – это основное понимание массивов и петель. Я покрыл те, кто в двух предыдущих статьях:

Массивы : https://www.freecodeCamp.org/news/what-in-the-world-is-a-javascript-array/

Петли : https://www.freecodeCamp.org/news/what-in-the-world-is-a-javascript-loop-for/

Настройка

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

Посмотрите на Лола Рынок Что касается того, где я работаю, на примере того, как это будет выглядеть.

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

Предполагаем, что этот список продуктов теперь отображается на нашем сайте. Наша задача – добавить «(V)» рядом с вегетарианскими элементами в этом списке. Это просто та вещь, которую мы регулярно делаем на переднем конце.

Условные условные

Условные условия являются существенными строительными блоками программирования. Они способ сделать что-то только Если Некоторые Условия которые встретились. Самый простой и наиболее распространенный условный в JavaScript – Если утверждение. Посмотрите на пример:

if (product === 'steak') {
    // do stuff
}

Давайте начнем с перевода этого на английский: «Если переменная называется Продукт – это именно строка стейки символов», затем выполнить код внутри.

Вот ближе

• Если : Это условное.
• (продукт) : Это наше состояние. Есть много способов построить условия. Нам не нужно беспокоиться об этом. На данный момент, имейте в виду, что все, что мы здесь здесь, всегда будут оцениваться на правда или ложь Отказ
• //делают вещи : Заявление. Это где код, который мы хотим запустить. Это будет выполнено Только Если результат оценки состояния составляет правда Отказ В противном случае он будет игнорироваться.

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

Вегетарианский дружелюбный

Давайте сосредоточимся на нашей оригинальной цели, которая заключается в журнал «(V)» рядом с именем вегетарианских предметов. Это главный пример, когда нам нужно использовать условный. Мы хотим код, который, Если Продукт В массиве это Вегетарианец, чтобы напечатать его имя и добавить к нему «(V)». И если это не вегетарианский, только распечатать название Продукт Отказ

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

Уведомление, состояние, которое я проверяю, это если продукт не вегетарианский. Это только потому, что в этом списке есть более вегетарианская продукция, и я хочу, чтобы условие было простым, а условное, чтобы сделать наименьшее количество работы. Я мог бы просто протестировать на вегетарианские предметы вместо этого.

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

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

if (product === 'steak' || product === 'fish') {
    console.log(product)
} else {
    console.log(product + '(v)')
}

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

Обновите браузер, чтобы начать со свежими консолью, затем введите следующее:

• Переменная Продукт Хранение нашего массива продуктов.
• foreach петля итерация по массиву.
• И наш условный блок внутри.

Исполнение

Если мы прочитаем условный код в Простые английский Он говорит: « Если в настоящее время выбранный Продукт это ровно« стейк » или « рыба », а затем журнал продукция на консоль. В противном случае во всех других К услугам гостей журнал Продукт к консоли, но и добавьте строку «(v)» до конца этого. “

Быстрое примечание, === Оператор проверяет, что левые и правильные выражения являются точно тоже самое. и Оператор означает или же. У нас есть два условия, чтобы проверить здесь (стейк или рыбу) Отказ Если либо

Нажмите Enter, чтобы запустить код и увидеть результаты.

И там это. Каждый раз, когда Loop работает, он проверяет выбранный в данный момент элемент Продукт и проходит через условные.

• Это Продукт точно строка «стейк»?
• Нет. Проверьте следующее условие.
• Это Продукт Именно строка «рыба»?
• Нет. Это условие не выполнено, код внутри не будет выполнен. Перейти к коду по умолчанию, указанному в еще блокировать.
• Печать Продукт и добавить (v) к этому.
• Эта итерация закончена. Начните следующую итерацию.

Если он находит «стейк» или «рыба», он будет выполнять код в этом состоянии, введя на хранение Продукт Имя без “(v)”. Затем цикл заканчивает эту итерацию и начинает следующую, и так далее. Этот процесс повторяется для каждого элемента в массиве до тех пор, пока не все завершено, и цикл зарегистрирован правильное сообщение для каждого.

Заключение

Рекомендовать, а Условное заявление Устанавливает определенные условия. При выполнении (что означает, что когда условие оценивается к True ) Код, указанный внутри условного блока Выполняет Отказ В противном случае он игнорируется и не выполнен.

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

Вот несколько вещей, которые вам нужно будет дальше расширять свои знания и понимать эти концепции более подробно:

• Условия: Если Заявление является одним из наиболее часто используемых условных условий. Но вам нужно будет узнать о других, как в то время как Заявление, Переключатель утверждение или очень полезное Тернарный оператор Отказ
• Условия: Понять, как создавать условия и как они оцениваются. Для этого вам нужно ознакомиться с концепциями « правда » и « Falsy ». Это когда значения, которые не ясно правда или ложь оцениваются как таковые. Например, строка, как «Грибы» считается истинным, тогда как пустая строка '' всегда считается ложным.
• Логические операторы и операторы сравнения: Мы видели тех, кто в наших условиях. Логические операторы, такие как « и» и ” или” , написано && и Отказ Операторы сравнения, такие как «Равен» и «Больше, чем» , написано === и >

Закрытие

Спасибо за прочтение. Я надеюсь, что вы нашли это полезно. И если вам понравилось, поделиться этим вокруг, было бы очень оценено. Если у вас есть какие-либо вопросы или комментарии, которые я нахожусь на Twitter @Syknapse И я хотел бы услышать от вас.

Меня зовут Syk, и я вторженный разработчик Лола Рынок в Мадриде. Я изменилась в карьере в веб-разработку из неразрешенного поля, поэтому я пытаюсь создать контент для тех, кто в аналогичном путешествии. Мои DMS всегда открыты для начинающих веб-разработчиков, нуждающихся в некоторой поддержке. Вы также можете прочитать о моем преобразовании в Эта статья Отказ