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

Вступление

«Итак, мы берем этот массив, перебираем его, обрабатываем данные и shazam!»
Когда я только начал учиться программировать, подобные фразы звучали как мистические заклинания. Язык, похожий на английский, но был выше моего понимания. Исходя из не инженерного образования, я всю жизнь не мог понять, где петля вписывается в то, что я пытался сделать. И зачем именно мне это было нужно.

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

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

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

Установка

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

Взгляните на Lola Market, где я работаю, чтобы увидеть, как это будет выглядеть.

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

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

Организация данных

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

Что вообще такое данные?

Когда вы работаете в цифровой сфере, полезно помнить, что все - данные. Все биты хранятся в двоичном формате.

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

Этот сокращенный список является примером продуктов, которые вы можете найти на этом веб-сайте, который мы создаем. Это наши данные: грибы, стейк, рыба, баклажаны и чечевица.

Так откуда берутся эти данные?

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

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

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

Как мы организуем данные?

Итак, мы установили, что этот список продуктов - наши данные. Теперь нам нужно упаковать эти данные в какой-то контейнер. Это позволит нам организовать его, переместить, а затем получить к нему доступ и что-то с ним делать.

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

['mushrooms', 'steak', 'fish', 'aubergines', 'lentils']

Синтаксис выглядит достаточно простым. Вы создаете массив с квадратными скобками []. И разделяйте отдельные элементы запятой ,. Если ваши данные состоят из строк, поместите каждый элемент в кавычки или двойные кавычки ''. Строка в широком смысле означает набор символов, представляющих текст, например слова и предложения.

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

Массив - это один из примеров того, что мы называем структурами данных. Это различные способы, которые мы используем для организации данных. Их много, но два наиболее распространенных в интерфейсе - это массивы и объекты.

Итак, резюмируем. Для нашего интернет-супермаркета у нас есть несколько товаров, и это наши данные. Мы видели, как мы организуем эти данные в структуры данных, такие как массив. Обычно это хранится в базе данных. Затем мы можем запросить эти данные. И как только он «поступает» в наше интерфейсное приложение из базы данных, мы можем начать его обрабатывать и что-то делать с ним.

Теперь мы можем написать логику, которая берет каждый продукт и отображает его название на нашем веб-сайте. Но как нам выбрать каждый элемент из массива и что-то с ним сделать?

Петли

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

Мы используем цикл, когда нам нужно повторить один и тот же код для каждого из элементов наших данных.

Приготовься

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

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

Нам нужно принять во внимание несколько вещей.

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

ОК, все готово. Пойдем.

Для каждого продукта

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

const products = ['mushrooms', 'steak', 'fish', 'aubergines', 'lentils']

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

Итак, мы переходим к основному блюду, позвольте мне познакомить вас с циклом forEach()
. А вот как это выглядит в действии:

products.forEach( product => {
    // do stuff
})

Сейчас мы разберем это по частям. Для начала давайте переведем этот фрагмент кода на простой английский. Это буквально гласит: «Возьмите массив продуктов. Для каждого элемента в этом массиве возьмите этот элемент, назовите его product и сделайте с ним что-нибудь ».

Давайте посмотрим поближе.

⬇ARRAY⬇  ⬇LOOP⬇  ⬇CURRENT⬇ ⬇FUNCTION⬇
products.forEach( product => {
    // do stuff
})
  • products: это наш массив, содержащий данные.
  • .forEach(): это наш метод массива, цикл.
  • product: это текущий элемент. Это элемент из массива, который наш цикл подобрал и передал нам для работы.
  • => { }: это объявление функции, точнее, стрелочной функции. Он примерно говорит: «Выполните следующий код».
  • // do stuff: Вот где собственно код. Сделайте что-нибудь для каждого элемента в массиве.

Здесь важно помнить две вещи о текущем выбранном элементе. Во-первых, это product - имя переменной. Само название остается за нами, мы могли бы назвать его food или x или как-нибудь еще. Однако, если мы имеем дело с массивом products, обычно для отдельного элемента этого массива используется единственное число: product. Если бы это был массив animals, мы бы назвали его animal.

Во-вторых, product меняется с каждым раундом цикла. Каждый раз, когда цикл выбирает элемент, product становится этим новым текущим выбранным элементом.

По сути, цикл начинается с выбора первого элемента в массиве, в данном случае «грибов». product теперь означает «гриб». Затем цикл выполняет функцию и запускает код, который там есть. По завершении он возвращается к массиву и берет следующий элемент. product это уже не «грибы», а «стейк». И снова код выполняется. И это повторяется для каждого одного из элементов массива.

Каждый из этих обходов цикла называется итерацией.

Попробуй сам

Итак, давайте попробуем это и посмотрим, как это работает. Идите вперед и откройте консоль в инструментах разработчика вашего браузера. Например, в Chrome это Command + Option + J (Mac) или Control + Shift + J (Windows).

  • Напечатайте наш массив, сохраненный в переменной const products = ['mushrooms', 'steak', 'fish', 'aubergines', 'lentils'].
  • Нажмите Enter. Вы получите undefined. Это нормально.
  • Затем введите наш цикл, и на этот раз мы добавим console.log() в качестве кода для выполнения:
products.forEach( product => {
    console.log(product)
})

Вот как бы это выглядело:

Здесь мы хотим выводить на консоль значение product на каждой итерации. Попробуйте сами. Нажмите Enter.

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

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

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

Что, если бы мы хотели обрабатывать некоторые из этих данных по-разному и не выполнять один и тот же код для всех продуктов? Скажем, например, мы хотим отображать «(v)» только рядом с вегетарианскими блюдами.

Условные

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

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

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

Вот поближе

  • if: Это условно.
  • (product === ‘steak’): Это наше состояние. Есть много способов построить условия. Нам пока не о чем беспокоиться. На данный момент имейте в виду, что все, что мы здесь помещаем, всегда будет оцениваться как true или false.
  • // do stuff: Заявление. Вот где идет код, который мы хотим запустить. Он будет выполнен только, если результат оценки условия true. В противном случае он будет проигнорирован.

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

Подходит для вегетарианцев

Давайте снова сосредоточимся на нашей первоначальной цели, которая заключалась в том, чтобы записать «(v)» рядом с названием вегетарианских блюд. Это яркий пример того, когда нам нужно использовать условное выражение. Нам нужен код, который, если product в массиве является вегетарианским, печатал его имя и добавлял к нему «(v)». А если он не вегетарианский, напечатайте только название product.

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

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

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

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

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

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

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

  • Переменная product, в которой хранится наш массив продуктов.
  • Цикл forEach, повторяющий массив.
  • И наш условный блок внутри.

Исполнение

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

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

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

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

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

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

Напомним, условный оператор устанавливает определенные условия. При выполнении (что означает, что условие оценивается как true) код, указанный внутри условного блока, выполняется. В противном случае он игнорируется и не выполняется.

Заключение

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

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

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

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

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

Закрытие

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

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



Как я сменил карьеру и получил работу разработчика за 10 месяцев: правдивая история
Так я сменил карьеру на фронтенд-разработку в 40 лет, начав без соответствующего опыта опыт или степень… medium.com



Расширять

Дополнительные концепции для расширения вашего понимания.

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

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

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

Мне нравится сначала взглянуть на определение и примеры MDN. Если я считаю это слишком сложным, я проверяю другие источники, чтобы улучшить свое понимание.

  • Структуры данных. Помимо массивов, вам нужно быстро познакомиться с объектами. Это еще более распространенная структура данных. Фактически, понимание объектов необходимо для понимания JavaScript в целом.
  • Типы данных. Мы работали с данными, состоящими из strings. Но есть еще несколько типов данных, таких как numbers и booleans (истина или ложь), которые вам необходимо понять.
  • Запросы. Мы кратко упомянули, как обычно мы делаем запрос к нашей базе данных, чтобы получить данные, которые нам нужны. Работа с API, fetch(), отправка запросов и обработка ответов - это сложная тема, которую вы можете оставить на потом. Но это будет необходимо к тому моменту, когда вы начнете собеседование на вакансию разработчика.
  • Циклы и методы массивов. Помимо нашего друга, forEach(), есть еще много чего, чему нужно научиться. От самого простого for цикла до продвинутых методов, таких как map() и filter(), которые являются чрезвычайно мощными инструментами, с которыми нужно разобраться.
  • Условные выражения. Оператор if - одно из наиболее часто используемых условных операторов. Но вам нужно будет узнать о других, таких как оператор while, switch или очень полезный тернарный оператор.
  • Условия. Узнайте, как создавать условия и как они оцениваются. Для этого вам необходимо ознакомиться с понятиями «правдивость» и «ложь». Это когда значения, которые явно не true или false, оцениваются как таковые. Например, такая строка, как 'mushrooms', считается истинной, тогда как пустая строка '' всегда считается ложной.
  • Логические операторы и операторы сравнения: мы видели их в наших условиях. Логические операторы, такие как «и» и «или», записываются && и ||. Операторы сравнения, такие как «равно» и «больше чем», написанные === и >. Это простые концепции, составляющие основу написания кода.