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

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

Рассмотрим следующий пример: вы работаете разработчиком в интернет-магазине.

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

Карточки организованы в ряды, так что каждый ряд содержит три карточки — три разные буквы.

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

А теперь небольшой вопрос: как петли впишутся в эту сетку карточек, демонстрирующих кубики с буквами, выставленными на продажу?

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

var cubes = 'ABCDEFG';
//styling console output using CSS with a %c format specifier
for (var i = 0; i < cubes.length; i++) {
    var styles = "font-size: 40px; border-radius: 10px; border: 1px solid blue; background: pink; color: purple";
    console.log("%c" + cubes[i], styles)
}

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

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

Сам код должен быть в основном простым, за исключением кубов.length и синтаксиса cubes[i].

Не вдаваясь в подробности, вот оба фрагмента кода, объясненные настолько просто, насколько это возможно.

cubes.length возвращает число. Поскольку cubes — это строка символов, cubes.length дает мне длину строки, сохраненной в переменной.

Итак, это дает мне число 7, благодаря чему мой цикл for выглядит следующим образом:

var cubes = 'ABCDEFG';
//styling console output using CSS with a %c format specifier
for (var i = 0; i < 7; i++) {
    var styles = "font-size: 40px; border-radius: 10px; border: 1px solid blue; background: pink; color: purple";
    console.log("%c" + cubes[i], styles)
}

Второй новый фрагмент кода — фрагмент cubes[i].

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

Другими словами, cubes[i], когда i равно 0, это: A.

Тогда cubes[i], когда i равно 1, равно: B.

Это продолжается столько циклов, сколько выполняется мой цикл for, и это определяется значением cubes.length.

Это также очень универсально, так как, если бы я, например, решил изменить длину строки кубов, мне не пришлось бы обновлять условие i ‹ cubes.length, потому что оно автоматически обновляется, когда я изменяю длину строки кубов. нить кубиков.

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

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

Некоторые дополнительные примеры

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

Есть много других примеров использования циклов в коде.

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