В этом чтении мы обсудим на очень высоком уровне причины использования циклов в 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, потому что оно автоматически обновляется, когда я изменяю длину строки кубов. нить кубиков.
Мы можем использовать тот же подход с этими другими типами данных для достижения результатов, которые по существу работают по тому же принципу, что и только что описанный.
Использование циклов — это суть подхода, применяемого сегодня при разработке множества различных функциональных частей программного обеспечения.
Некоторые дополнительные примеры
- Если я пишу код для почтового клиента, я получу некоторые структурированные данные об электронных письмах, которые будут отображаться в папке «Входящие», а затем я буду использовать цикл, чтобы фактически отобразить их в красиво отформатированном виде.
- Если я кодирую сайт электронной коммерции, продающий автомобили, я получаю источник хорошо структурированных данных о каждом из автомобилей, а затем перебираю эти данные, чтобы отобразить их на экране.
- Если я пишу календарь онлайн, я перебираю данные, содержащиеся в каждом из дней, чтобы отобразить хорошо отформатированный календарь.
Есть много других примеров использования циклов в коде.
Использование циклов с данными, правильно отформатированными для данной задачи, является важным компонентом создания программного обеспечения.