Добро пожаловать в удивительный мир петель. В языке JS существует множество различных типов циклов, однако мы рассмотрим, пожалуй, мой любимый цикл «For». Одним из многих преимуществ добавления циклов в ваш код является то, что он обеспечивает быстрый и простой способ повторять что-либо. Будь то итерация по свойствам или значениям объекта, или даже если вам нужно перебрать функцию x количество раз, цикл For здесь, чтобы помочь.

Цикл For:

Общий оператор цикла «For» состоит из синтаксиса:

for (initialStatement; conditionalStatement; incrementingStatement){
     //code to be executed  }

Как видите, оператор for состоит из трех частей: начального, условного и инкрементного. Эти 3 компонента необходимы для циклического прохождения вашего кода. Начальный оператор инициализирует переменную-счетчик, обычно установленную на 0, которая хорошо содержит значение, которое нужно увеличить. Условный оператор проверяет, нужно ли еще выполнять блок кода. Если значение оценивается как true, блок будет выполнен, если false, цикл for полностью остановится и не запустится. Если этот оператор вообще не включен, предполагается, что оператор оценивается как истина и будет продолжать работать. Если условный оператор истинен и блок кода выполняется, оператор увеличения будет выполнен и обновит переменную, которая была инициализирована на шаге 1. Например:

for(let i=0; i<10; i++) {
    console.log(`We are on number ${i}`)
}

Если вы скопируете и вставите этот код в консольный терминал, вы увидите, что текст «We are number __» повторяется 10 раз, начиная с номера 0, потому что это то, с чего мы инициализировали переменную для начала. Также вы заметите, что число 10 не пробежало. Это потому, что мы установили условный оператор так, чтобы он был меньше 10 и НЕ включал его. Если бы мы хотели включить 10 в наш список, нам нужно было бы включить знак ‹=, указывающий, что мы хотим, чтобы все числа были меньше И равны 10.

Цикл For In:

Далее у нас есть цикл «For In». Этот конкретный оператор перебирает свойства внутри объекта и выполняет любой блок кода, присоединенный к циклу.

Синтаксис следующий:

for (key in object) {
     //Code to be executed
}

Объект в JS состоит из пары ключ-значение. Например, в объекте Names пара ключ-значение будет выглядеть как «firstName: John». Ключ будет firstName, а значение — John, причем каждая пара будет разделена запятой. Например, если бы у нас был объект, заполненный информацией о человеке, мы могли бы вывести эту информацию для отображения с помощью цикла For In.

const information = {fName: 'John', lName: 'Doe', bday:'10/26/1990'}
for (let x in information){
     console.log(information[x])
}

Если бы мы запустили этот код, он, безусловно, перебрал бы каждый ключ, давая нам значение, однако это дало бы нам странный результат. Попробуйте и подумайте, что произойдет, прежде чем читать дальше.

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

John
Doe
10/26/1990

Если бы мы хотели, чтобы все это было в одной строке, нам нужно было бы добавить это к переменной с прикрепленной строкой.

const information = {fName: 'John', lName: 'Doe', bday:'10/26/1990'}
let txt = ''
for (let x in information){
     txt += information[x] + " "
}

И выведет:

"John Doe 10/26/1990 "

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

Цикл For Of

Оператор For Of очень похож на оператор for in, ключевое различие между ними заключается в том, что в то время как for in выполняет итерацию по всем перечислимым свойствам объекта, for of на самом деле интересует только значения итерируемого объекта. Вот пример, демонстрирующий разницу между ними:

let numbers = [8, 9, 10]
for (let i in numbers){
   console.log(i) //"0", "1", "2"
}
for (let i of numbers) {
   console.log(i) //"8", "9", "10"
}

Как видите, если бы мы хотели пройтись по массиву и получить значения внутри массива, мы определенно хотели бы использовать for of. В то время как for in вернет индексы массива.

Еще одно интересное применение цикла for of — внутри строки. Допустим, по какой-то причине мы хотели вывести по одной букве в каждую строку нашего HTML-документа или для другой функции в нашем коде. Мы можем использовать цикл for of для перебора строки и выделения каждой буквы в нашей строке на новой строке. Например:

let name = 'John'
for (let x of name){
    console.log(x)
}

Это выведет:

J
o
h
n

Довольно круто!

Бесконечные циклы

Теперь мы хотели бы быть немного осторожными с тем, как мы настраиваем оператор цикла for. Вы можете нанести серьезный ущерб, например, сбой компьютера или зависание браузера, если вы случайно оставите один из них в своем коде, и вам определенно рекомендуется дважды проверить, чтобы убедиться, что он где-то не плавает. Например, если вы случайно заставите свой условный оператор всегда читать «true», блок кода будет выполняться бесконечное количество раз. Например:

for(let i = 1; i>0; i++) {
    //Code to be executed
}

Это будет выполняться бесконечное количество раз, потому что, несмотря ни на что, переменная счетчика «i» всегда будет больше 0 и всегда будет оцениваться как истина, в результате чего блок кода будет выполняться бесконечно.