Циклы JavaScript для начинающих: изучите основы

Сегодня мрачный понедельник, и вы на работе. Мы все знаем, насколько депрессивными могут быть понедельники, верно? Ваш начальник подходит к вам и говорит: «Эй, у меня есть 300 неоткрытых писем, которые мы получили за выходные. Я хочу, чтобы вы открыли каждое, записали имя отправителя и удалили письма, как только закончите».

Эта задача выглядит очень утомительной, если попытаться выполнить ее вручную. Следующее, что вам придет на ум, — это, вероятно, зайти в Google и поискать программное обеспечение, которое сможет автоматизировать этот процесс и сделать вашу жизнь проще, не так ли?

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

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

Что такое цикл?

Циклы используются в JavaScript для легкого выполнения повторяющихся действий. Они основаны на условии, которое возвращает true или false.

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

Когда вам нужно использовать цикл?

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

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

Типы петель

Существует две основные категории петель: петли с контролируемым входом и петли с контролируемым выходом.

Циклы, управляемые входом, оценивают условие на «входе цикла» перед выполнением тела цикла. Если условие истинно, тело запускается. В противном случае тело не работает. Циклы for и while являются примерами циклов с управлением входом.

Циклы с управлением выходом фокусируются на теле цикла, а не на тестовом условии, гарантируя, что тело цикла будет выполнено хотя бы один раз перед оценкой тестового условия. Хорошим примером цикла, управляемого выходом, является цикл do-while .

Давайте рассмотрим несколько примеров циклов с контролем входа:

Пока цикл

Цикл while имеет следующий синтаксис.

 while (condition) { // loop's body }

Следующий список объясняет функциональность цикла while:

1. Цикл while принимает тестовое условие внутри круглых скобок.

   
   

2. Программа проверяет условие, чтобы увидеть, проходит оно или нет.

   
   

3. Код внутри тела цикла выполняется до тех пор, пока выполняется условие.

   
   

4. Программа прекращает свою работу, если условие проверки не выполнено.

Ниже давайте рассмотрим практический пример цикла while :

 let arr = []; let i = 1; let number = 5; while (i <= number) { arr.push(i) i++ } console.log(arr)

1. Приведенный выше фрагмент кода инициализирует переменные «arr», «i» и «num».

   
   

2. Переменная « arr» представляет собой массив, содержащий значения, соответствующие проверочному условию.

   
   

3. Переменная «i» отслеживает каждое приращение после каждой итерации.

   
   

4. Переменная «число» сравнивает значение «i» с его значением (5) после каждой итерации.

   
   

5. Код внутри тела цикла помещает каждое значение «i» после каждой итерации в массив, пока «i» меньше или равно «числу».

   
   

6. Как только текущее значение «i» не соответствует условию, в этом случае, когда значение «i» больше, чем «число» , равное 6, цикл прекращает работу.

   
   

Метод push() — это встроенная функция JavaScript, которая добавляет новый элемент в конец массива.

Выход

 [1, 2, 3, 4, 5]

цикл «делай пока»

Цикл do-while очень похож на цикл 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);

Теперь давайте разберем этот фрагмент кода:

1. Мы инициализировали переменные «i» и «num».

   
   

2. Консоль регистрирует значение «i» (1) перед оценкой состояния цикла.

   
   

3. Условие проверяется, и значение «i» увеличивается на +1 после каждой итерации.

   
   

4. Цикл завершает свою работу, как только «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 выше не вернет никаких результатов на консоль; теперь, почему это так?

1. Мы инициализировали переменные «i» и «num» значениями 5 и 4 соответственно.

   
   

2. Условие проверяет, меньше ли значение «i», чем «num».

   
   

3. Если это правда, он регистрирует каждое соответствующее значение.

   
   

4. Поскольку начальное значение «i» превышает значение «num», цикл никогда не запускается.

   
   

Теперь давайте возьмем аналогичный пример с циклом do-while .

 let i = 5; let num = 4; do { console.log(i) } while ( i < num)

Выход

 5

Цикл do-while обеспечивает выполнение блока кода, который возвращает 5 в консоль, хотя изначально «i» имеет более высокое значение, чем «num», он все равно один раз регистрируется в консоли. Это представление показывает разницу в функциональности между циклами do-while и while .

Для цикла

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

 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" ) }

Давайте вместе разберем приведенный выше фрагмент кода.

1. Сначала мы инициализировали переменную счетчика « i» нулевым значением.

   
   

2. Далее мы создали условный оператор, который будет поддерживать работу кода.

   
   

3. Мы сравнили значение «i» со 100; если он проходит этот тест, регистрируется «Hello World».

   
   

4. Этот процесс повторяется, пока счетчик увеличивается на +1 после каждой итерации.

   
   

5. Цикл завершается, когда значение счетчика достигает 100.

   
   

Выход

 Hello World Hello World Hello World ... //repeated 97 more times making it 100 "Hello World" in total ...

для каждого цикла

Цикл for-each — это метод в JavaScript, который проходит через массив и применяет функцию обратного вызова к каждому элементу этого массива; функция обратного вызова — это просто еще одна функция, передаваемая в качестве параметра в функцию. Функция обратного вызова работает последовательно после завершения выполнения основной функции.

Давайте рассмотрим основной синтаксис цикла 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); });

Давайте разберем приведенный выше пример:

1. Мы инициализировали массив с именем переменной «myArray» и сохранили его целыми числами от 1 до 5.

   
   

2. Метод for-each array принимает три параметра и применяет к массиву функцию обратного вызова.

   
   

3. Эта линия; arr[index] = num * 2 умножает значение текущего элемента на 2 и присваивает возвращаемое значение индексу текущего элемента.

   
   

Обратите внимание: метод for-each array не возвращает новый массив; скорее, он изменяет исходный массив и возвращает его.

Выход

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