Как использовать циклы в JavaScript

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

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

Инкрементальный и декрементальный цикл в JavaScript

Дополнительные для цикл - это основа итерации в JavaScript.

Он принимает начальное значение, присвоенное переменной, и выполняет простую проверку условной длины. Затем он увеличивает или уменьшает это значение, используя ++ или -- операторы.

Вот как выглядит его общий синтаксис:

for (var i = начальное значение; я array [i]}

Теперь давайте переберем массив, используя указанный выше базовый синтаксис:

anArray = [1, 3, 5, 6];
для (пусть i = 0; я console.log (anArray [i])
}
Выход:
1
3
5
6 

Теперь мы будем работать с каждым элементом в указанном выше массиве, используя JavaScript для петля:

anArray = [1, 3, 5, 6];
для (пусть i = 0; я console.log («5», «x», anArray [i], «=», anArray [i] * 5)
}
Выход:
5 х 1 = 5
5 х 3 = 15
5 х 5 = 25
5 х 6 = 30 

Цикл последовательно перебирает массив с ++ оператор, производящий упорядоченный вывод.

Но используя отрицательный (--), вы можете перевернуть вывод.

Синтаксис такой же, но логика немного отличается от приведенного выше цикла увеличения.

Вот как работает декрементальный метод:

anArray = [1, 3, 5, 6];
для (пусть я = anArray.length-1; я> = 0; i--) {
console.log («5», «x», anArray [i], «=», anArray [i] * 5)
}
Выход:
5 х 6 = 30
5 х 5 = 25
5 х 3 = 15
5 х 1 = 5

Логика приведенного выше кода не надумана. Индексация массива начинается с нуля. Так зову anArray [i] обычно выполняется итерация от нулевого индекса до трех, поскольку указанный выше массив содержит четыре элемента.

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

Он сохраняет индекс массива на единицу меньше его длины. Состояние я> = 0 затем принудительно останавливает счет на последнем элементе массива.

Связанный: Методы массивов JavaScript, которые вы должны освоить сегодня

JavaScript для каждого

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

Вот общий синтаксис JavaScript для каждого:

array.forEach (element => {
действие
})

Посмотрите, как это работает на практике:

пусть anArray = [1, 3, 5, 6];
anArray.forEach (x => {
console.log (x)
});
Выход:
1
3
5
6 

Теперь используйте это, чтобы выполнить простую математическую операцию с каждым элементом, как вы делали в предыдущем разделе:

пусть anArray = [1, 3, 5, 6];
anArray.forEach (x => {
console.log ("5", "x", x, "=", x * 5)
});
Выход:
5 х 1 = 5
5 х 3 = 15
5 х 5 = 25
5 х 6 = 30 

Как использовать for... в цикле JavaScript

В для... в цикл в JavaScript выполняет итерацию по массиву и возвращает его индекс.

Вам будет легко использовать для... в если вы знакомы с Цикл for Python поскольку они похожи по простоте и логике.

Взгляните на его общий синтаксис:

for (пусть элемент в массиве) {
действие 
}

Так что для... в цикл присваивает каждому элементу массива переменную (элемент), объявленную в круглых скобках.

Таким образом, регистрация элемента непосредственно внутри цикла возвращает индекс массива, а не сами элементы:

пусть anArray = [1, 3, 5, 6];
for (пусть я в массиве) {
console.log (я)
}
Выход:
0
1
2
3 

Чтобы вместо этого вывести каждый элемент:

пусть anArray = [1, 3, 5, 6];
for (пусть я в массиве) {
console.log (anArray [i])
}
Выход:
1
3
5
6 

Как и при использовании декрементного цикла, также легко изменить вывод, используя для... в:

пусть anArray = [1, 3, 5, 6];
// Удаляем единицу из длины массива и присваиваем ее переменной:
пусть v = anArray.length - 1; 
// Используйте указанную выше переменную в качестве основы индекса при итерации по массиву:
for (пусть я в массиве) {
console.log (anArray [v])
v - = 1;
}
Выход:
6
5
3
1 

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

JavaScript для... из цикла

В для... из цикл похож на для... в петля.

Однако в отличие от для... в, он выполняет итерацию не по индексу массива, а по самим элементам.

Его общий синтаксис выглядит так:

for (пусть я массива) {
действие 
}

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

пусть anArray = [1, 3, 5, 6];
for (let i of anArray) {
console.log (я)
}
Выход:
1
3
5
6 

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

пусть anArray = [1, 3, 5, 6];
пусть v = anArray.length - 1;
for (пусть x массива anArray) {
console.log (anArray [v])
v - = 1;
}
Выход:
6
5
3
1

Для работы в цикле:

пусть anArray = [1, 3, 5, 6];
пусть v = anArray.length - 1;
for (пусть x массива anArray) {
console.log ("5", "x", anArray [v], "=", anArray [v] * 5)
v - = 1;
}
Выход:
5 х 6 = 30
5 х 5 = 25
5 х 3 = 15
5 х 1 = 5 

Цикл "Пока"

В в то время как цикл выполняется непрерывно, пока выполняется указанное условие. Его часто используют как бесконечный цикл.

Например, поскольку ноль всегда меньше десяти, приведенный ниже код работает непрерывно:

пусть i = 0;
while (i <10) {
console.log (4)
}

Приведенный выше код записывает "4" бесконечно.

Давайте переберем массив, используя в то время как петля:

пусть i = 0;
while (i console.log (anArray [i])
я + = 1
}
Выход:
1
3
5
6 

JavaScript do... while Loop

В делать пока цикл принимает и выполняет набор действий явно внутри делать синтаксис. Затем он устанавливает условие для этого действия внутри в то время как петля.

Вот как это выглядит:

делать{
действия
}
в то время как (
созидание
)

Теперь давайте переберем массив, используя этот метод цикла:

делать{
console.log (anArray [i])
я + = 1
}
в то время как (
я )
Выход:
1
3
5
6 

Ознакомьтесь с циклами JavaScript

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

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

Как использовать оператор if-else в JavaScript

Оператор if-else - ваш первый шаг к программированию логики в ваших приложениях.

Читать далее

Об авторе