Сегодня мрачный понедельник, и вы на работе. Мы все знаем, насколько депрессивными могут быть понедельники, верно? Ваш начальник подходит к вам и говорит: «Эй, у меня есть 300 неоткрытых писем, которые мы получили за выходные. Я хочу, чтобы вы открыли каждое, записали имя отправителя и удалили письма, как только закончите». Эта задача выглядит очень утомительной, если попытаться выполнить ее вручную. Следующее, что вам придет на ум, — это, вероятно, зайти в Google и поискать программное обеспечение, которое сможет автоматизировать этот процесс и сделать вашу жизнь проще, не так ли? Ну, у нас есть похожие ситуации в программировании. Бывают случаи, когда вам нужно выполнять повторяющиеся задачи, пока они не будут выполнены. Как вы решаете эту проблему? В JavaScript есть то, что мы называем циклами. Циклы позволяют нам решать повторяющиеся задачи за счет уменьшения количества кода, необходимого для выполнения задачи. В этой статье мы обсудим, что такое цикл, как он работает и различные методы, которые мы можем использовать для его применения в наших программах. Что такое цикл? Циклы используются в JavaScript для легкого выполнения повторяющихся действий. Они основаны на условии, которое возвращает true или false. Условие — это выражение, которое необходимо передать, чтобы цикл продолжал работать. Цикл запускается, когда указанные условия возвращают истинное значение, и останавливается, когда они возвращают ложное значение. Когда вам нужно использовать цикл? Циклы полезны для выполнения повторяющихся задач. Например, использование цикла сокращает код, необходимый для решения проблемы. Это экономит время, оптимизирует использование памяти и повышает гибкость. Истинное значение цикла выходит за рамки сокращения длины кода и ограничения повторения. Они также помогают при работе с данными в массиве, объекте или других структурах. Более того, циклы способствуют модульности кода за счет уменьшения повторяющегося кода и увеличения возможности повторного использования кода, что позволяет создавать коды, которые можно использовать в разных частях вашего проекта. Типы петель Существует две основные категории петель: петли с контролируемым входом и петли с контролируемым выходом. Циклы, оценивают условие на «входе цикла» перед выполнением тела цикла. Если условие истинно, тело запускается. В противном случае тело не работает. Циклы и являются примерами циклов с управлением входом. управляемые входом, for while Циклы фокусируются на теле цикла, а не на тестовом условии, гарантируя, что тело цикла будет выполнено хотя бы один раз перед оценкой тестового условия. Хорошим примером цикла, управляемого выходом, является цикл . с управлением выходом do-while Давайте рассмотрим несколько примеров циклов с контролем входа: Пока цикл Цикл имеет следующий синтаксис. while while (condition) { // loop's body } Следующий список объясняет функциональность цикла while: Цикл принимает тестовое условие внутри круглых скобок. while Программа проверяет условие, чтобы увидеть, проходит оно или нет. Код внутри тела цикла выполняется до тех пор, пока выполняется условие. Программа прекращает свою работу, если условие проверки не выполнено. Ниже давайте рассмотрим практический пример цикла : while let arr = []; let i = 1; let number = 5; while (i <= number) { arr.push(i) i++ } console.log(arr) Приведенный выше фрагмент кода инициализирует переменные «arr», «i» и «num». Переменная « представляет собой массив, содержащий значения, соответствующие проверочному условию. arr» Переменная «i» отслеживает каждое приращение после каждой итерации. Переменная «число» сравнивает значение «i» с его значением (5) после каждой итерации. Код внутри тела цикла помещает каждое значение «i» после каждой итерации в массив, пока «i» меньше или равно «числу». Как только текущее значение «i» не соответствует условию, в этом случае, когда значение больше, чем , равное 6, цикл прекращает работу. «i» «число» Метод — это встроенная функция JavaScript, которая добавляет новый элемент в конец массива. push() Выход [1, 2, 3, 4, 5] цикл «делай пока» Цикл очень похож на цикл while; Основное различие между циклом и циклом заключается в том, что цикл обеспечивает выполнение кода хотя бы один раз перед оценкой условия цикла; Цикл имеет следующий синтаксис ниже. do-while while do-while do-while do-while do { // loop's body } while (//condition) Оператор — отличный пример цикла с контролируемым выходом. Это заключается в том, что циклы, управляемые выходом, отдают телу цикла перед проверочным условием. Теперь давайте углубимся в практический пример кода, использующий цикл . do-while приоритет do-while Пример: let i = 1; let num = 5; do { console.log(i); i++; } while (i <= num); Теперь давайте разберем этот фрагмент кода: Мы инициализировали переменные «i» и «num». Консоль регистрирует значение «i» (1) перед оценкой состояния цикла. Условие проверяется, и значение «i» увеличивается на +1 после каждой итерации. Цикл завершает свою работу, как только «i» становится больше «num». Выход 1 2 3 4 5 Хотя цикл очень похож на цикл , мы должны отметить некоторые тонкие различия; давайте возьмем еще один пример, сравнивающий разницу между циклами и . do-while while while do-while let i = 5; let num = 4 while( i < num) { console.log(i) } Этот цикл выше не вернет никаких результатов на консоль; теперь, почему это так? while Мы инициализировали переменные «i» и «num» значениями 5 и 4 соответственно. Условие проверяет, меньше ли значение «i», чем «num». Если это правда, он регистрирует каждое соответствующее значение. Поскольку начальное значение «i» превышает значение «num», цикл никогда не запускается. Теперь давайте возьмем аналогичный пример с циклом . do-while let i = 5; let num = 4; do { console.log(i) } while ( i < num) Выход 5 Цикл обеспечивает выполнение блока кода, который возвращает 5 в консоль, хотя изначально «i» имеет более высокое значение, чем «num», он все равно один раз регистрируется в консоли. Это представление показывает разницу в функциональности между циклами и . do-while do-while while Для цикла — это уникальный тип цикла и один из наиболее часто используемых программистами циклов. — это цикл, который запускает блок кода определенное количество раз в зависимости от условия. Цикл for имеет следующий синтаксис ниже. for loop for loop for (Expression1...; Expression2....; Expression3...{ //code block } Выражение 1: Эта часть также известна как область ; это начало нашего и область, где определена переменная счетчика. Переменная счетчика используется для отслеживания количества запусков цикла и сохранения этого значения в виде значения. for loop инициализации for loop Выражение 2: Это вторая часть цикла; эта часть определяет оператор, который будет выполнять цикл. условный Выражение 3: Здесь цикл заканчивается; переменная счетчика в этом разделе обновляет свое значение после каждой итерации, увеличивая или уменьшая значение, как указано в условии. Давайте углубимся в пример использования цикла for. for (let i = 0; i < 100; i++) { console.log("Hello World" ) } Давайте вместе разберем приведенный выше фрагмент кода. Сначала мы инициализировали переменную счетчика « нулевым значением. i» Далее мы создали условный оператор, который будет поддерживать работу кода. Мы сравнили значение «i» со 100; если он проходит этот тест, регистрируется «Hello World». Этот процесс повторяется, пока счетчик увеличивается на +1 после каждой итерации. Цикл завершается, когда значение счетчика достигает 100. Выход Hello World Hello World Hello World ... //repeated 97 more times making it 100 "Hello World" in total ... для каждого цикла Цикл — это метод в JavaScript, который проходит через массив и применяет функцию обратного вызова к каждому элементу этого массива; функция обратного вызова — это просто еще одна функция, передаваемая в качестве параметра в функцию. Функция обратного вызова работает последовательно после завершения выполнения основной функции. for-each Давайте рассмотрим основной синтаксис цикла . for-each array.forEach(function(currentValue, index, arr)) Приведенный выше код объясняет работу цикла . for-each Этот цикл принимает три параметра: текущее значение, индекс и массив. Текущее значение представляет собой текущее значение элемента массива. Индекс — это необязательный параметр, который сообщает вам пронумерованную позицию текущего элемента в этом массиве. Arr — еще один необязательный параметр, который сообщает, к какому массиву принадлежит элемент. let myArray = [1, 2, 3, 4, 5]; array.forEach((num, index, arr) => { arr[index] = num * 2; console.log(array); }); Давайте разберем приведенный выше пример: Мы инициализировали массив с именем переменной «myArray» и сохранили его целыми числами от 1 до 5. Метод array принимает три параметра и применяет к массиву функцию обратного вызова. for-each Эта линия; умножает значение текущего элемента на 2 и присваивает возвращаемое значение индексу текущего элемента. arr[index] = num * 2 Обратите внимание: метод array не возвращает новый массив; скорее, он изменяет исходный массив и возвращает его. for-each Выход [2, 4, 6, 8, 10] Что такое For... In и For... циклов в JavaScript? Циклы и очень полезны, когда дело доходит до итерации по итерируемым объектам; итерируемые объекты относятся к любому элементу, который можно перебирать в цикле. Типичными примерами итерируемых объектов являются массивы, строки, наборы и т. д. for... in for... of и похожи в том, как они перебирают/перемещаются по объектам, основное различие между ними проявляется в том, как они возвращают значения. for... in for... of for... в циклах Цикл полезен, когда вам нужно извлечь ключ(и)/свойства из объекта и соответствующие ему свойства из родительского объекта. Цикл иногда может перебирать объект способом, отличным от того, как он был определен в этом конкретном объекте; давайте возьмем пример цикла в действии. for... in for... in for... in let namesArray = []; const studentScores = { John: 60, Dan: 53, Tricia: 73, Jamal: 45, Jane: 52 } for(const name in studentScores){ namesArray.push(name); } console.log(namesArray); В приведенном выше примере мы определили объект с именем , который содержит несколько имен учащихся и соответствующие им баллы. Используя , мы смогли получить только имена студентов, которые представляют объекта и сохранить их в массиве с помощью метода . StudentScores for... in ключи StudentScores, push() Выход ["John", "Dan", "Tricia", "Jamal", "Jane"] для... петель Цикл — это особый тип цикла, который перебирает значения итерируемых объектов, таких как массивы, строки, карты и т. д. Циклы не касаются ключей или свойств объекта. , скорее, они показывают приоритеты только по значениям. for... of for... of Цикл не может перебирать обычные объекты и выдает ошибку, поскольку они не являются итерируемыми. Давайте рассмотрим пример с использованием цикла ... for... of for.. of let numArray = [1,2,3,4,5] for (const value of numArray) { console.log(value) } // Output = 1,2,3,4,5 Подводя итог, можно сказать, что циклы и — отличный способ перебирать итерируемые объекты; Основное отличие заключается в том, что цикл возвращает ключ объекта, а цикл возвращает только значения итерируемых объектов. for... in for... of for... in for... of Что такое бесконечный цикл и как его избежать? Бесконечный цикл — это цикл, который продолжает выполняться бесконечно; это происходит, когда цикл не имеет определенного условия выхода. Бесконечные циклы опасны, поскольку они могут привести к сбою вашего браузера и привести к нежелательным действиям в вашей программе. // infinite loop sample while (true) { console.log("keep on running") } Чтобы предотвратить бесконечные циклы в вашей программе, всегда проверяйте, что внутри вашего цикла определено условие выхода. Заключение Большое спасибо, что дочитали эту статью до конца. Циклы в Javascript — это важная концепция, которую должен освоить каждый разработчик, поскольку она очень важна для создания хорошей и оптимизируемой программы. Я уверен, что с помощью этой статьи вы сможете понять основы и тонкости использования циклов в вашей программе.
