Построение бесконечно повторяющегося массива

Предисловие

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

Определение (от MDN)

Генераторы - это функции, из которых можно выйти, а затем повторно войти. Их контекст (привязки переменных) будут сохраняться при повторных входах.

Вы можете подумать: «Хорошо, но зачем мне это делать?». Оказывается, существует целый ряд вариантов использования, от простых до сложных, многие из которых включают обещания и делать асинхронные запросы (async / await построен поверх генераторов). Моя цель - дать вам первый маленький шаг в понимании того, как они работают, на простом примере из реальной жизни, чтобы вы начали замечать, когда генератор является наиболее подходящим решением проблем в вашем собственном коде. Вот так.

Сценарий использования

Я создаю приложение, в котором мои пользователи могут рассчитать трехнедельный цикл тренировок с настройкой для тренировок от 3 до 7 дней в неделю в течение цикла. Каждая отдельная тренировка основана на одном из следующих 4-х упражнений: присед, жим лежа, становая тяга и жим над головой , и каждая последующая тренировка должна основываться на следующем упражнении в таком порядке:

  • Приседания
  • Скамья
  • Тяга
  • Жим над головой
  • Приседания
  • Скамья
  • Тяга
  • Жим над головой
  • …

Вы, наверное, видите, к чему все идет.

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

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

Здесь код более декларативный и читаемый. Мы абстрагировали логику отслеживания индекса в служебную функцию общего назначения под названием RepeatedArray. Синтаксис function * сообщает JavaScript, что это функция генератора. Все, что нам нужно сделать, это запросить следующий элемент в «повторяющемся массиве», и наш генератор передает его нам. Самое приятное, что нам не нужно беспокоиться о том, как это происходит вне нашей функции генератора.

Вот что происходит:

RepeatedArray возвращает объект итератора для самой функции RepeatedArray (прочтите это дважды), когда мы вызываем его в строке 9. Итератор сохраняется в переменная с именем nextLiftGenerator. Важно понимать, что код функции еще не был выполнен. Функция выполняется только тогда, когда мы вызываем функцию next () в итераторе nextLiftGenerator, и она выполняется только до тех пор, пока не достигнет yield. Наш генератор выдает нам значение, затем ожидает следующего вызова, чтобы продолжить выполнение, пока он не достигнет другого yield, а затем возвращает это значение. Есть смысл? Вот и все!

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

Если вам понравилась эта статья, подпишитесь на меня в Твиттере и Инстаграм, чтобы увидеть больше интересного контента!

Удачного кодирования!