Как использовать циклы в JavaScript
Цикл позволяет вам перебирать каждый элемент в массиве, чтобы вы могли настраивать и выводить каждый из них по своему усмотрению. Как и в любом языке программирования, циклы также являются важным инструментом для рендеринга массивов в JavaScript.
С помощью некоторых практических примеров давайте глубже погрузимся в различные способы использования циклов в JavaScript.
Инкрементальный и декрементальный цикл в JavaScript
Инкрементный цикл for – это основа итерации в JavaScript.
Он принимает начальное значение, присвоенное переменной, и выполняет простую проверку условной длины. Затем он увеличивает или уменьшает это значение с помощью операторов ++ или – .
Вот как выглядит его общий синтаксис:
for(var i = initial value; i < array.length; i++) {
array[i]}
Теперь давайте переберем массив, используя указанный выше базовый синтаксис:
anArray = [1, 3, 5, 6];
for(let i = 0; i < anArray.length; i++) {
console.log(anArray[i])
}
Output:
1
3
5
6Теперь мы будем работать с каждым элементом в указанном выше массиве, используя цикл for в JavaScript:
anArray = [1, 3, 5, 6];
for(let i = 0; i < anArray.length; i++) {
console.log("5", "x", anArray[i], "=", anArray[i] * 5)
}
Output:
5 x 1 = 5
5 x 3 = 15
5 x 5 = 25
5 x 6 = 30
Цикл последовательно перебирает массив с помощью оператора ++ , создавая упорядоченный вывод.
Но используя отрицательный ( – ) оператор, вы можете перевернуть вывод.
Синтаксис такой же, но логика немного отличается от приведенного выше цикла увеличения.
Вот как работает декрементальный метод:
anArray = [1, 3, 5, 6];
for(let i = anArray.length-1; i > = 0; i--) {
console.log("5", "x", anArray[i], "=", anArray[i]*5)
}
Output:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5Логика приведенного выше кода не надумана. Индексация массива начинается с нуля. Таким образом, вызов anArray [i] обычно выполняет итерацию от нулевого индекса до трех, поскольку указанный выше массив содержит четыре элемента.
Таким образом, удаление единицы из длины массива и установка условия больше или равного нулю, как мы это сделали, очень удобно, особенно при использовании массива в качестве основы для вашей итерации.
Он сохраняет индекс массива на единицу меньше его длины. Условие i> = 0 затем заставляет счет останавливаться на последнем элементе в массиве.
JavaScript для каждого
Хотя вы не можете декрементировать с помощью JavaScript forEach , он часто менее подробен, чем необработанный цикл for . Он работает, выбирая один элемент за другим, не запоминая предыдущий.
Вот общий синтаксис JavaScript forEach :
array.forEach(element => {
action
})Посмотрите, как это работает на практике:
let anArray = [1, 3, 5, 6];
anArray.forEach(x => {
console.log(x)
});
Output:
1
3
5
6
Теперь используйте это, чтобы выполнить простую математическую операцию с каждым элементом, как вы делали в предыдущем разделе:
let anArray = [1, 3, 5, 6];
anArray.forEach(x => {
console.log("5", "x", x, "=", x * 5)
});
Output:
5 x 1 = 5
5 x 3 = 15
5 x 5 = 25
5 x 6 = 30
Как использовать for … в цикле JavaScript
Цикл for … in в JavaScript выполняет итерацию по массиву и возвращает его индекс.
Вам будет легко использовать for … in, если вы знакомы с циклом for Python, поскольку они похожи по простоте и логике.
Взгляните на его общий синтаксис:
for (let element in array){
action
}Таким образом, цикл for … in присваивает каждому элементу массива переменную (элемент), объявленную в круглых скобках.
Таким образом, регистрация элемента непосредственно внутри цикла возвращает индекс массива, а не сами элементы:
let anArray = [1, 3, 5, 6];
for (let i in anArray){
console.log(i)
}
Output:
0
1
2
3
Чтобы вместо этого вывести каждый элемент:
let anArray = [1, 3, 5, 6];
for (let i in anArray){
console.log(anArray[i])
}
Output:
1
3
5
6
Как и при использовании декрементного цикла, также легко изменить вывод, используя for … in :
let anArray = [1, 3, 5, 6];
// Remove one from the length of the array and assign this to a variable:
let v = anArray.length - 1;
// Use the above variable as an index basis while iterating down the array:
for (let i in anArray){
console.log(anArray[v])
v -=1;
}
Output:
6
5
3
1
Приведенный выше код логически аналогичен тому, что вы делали при использовании декрементного цикла. Тем не менее, он более читабелен и подробно изложен.
JavaScript для … из цикла
Цикл for … of аналогичен циклу for … in .
Однако, в отличие от … in , он выполняет итерацию не по индексу массива, а по самим элементам.
Его общий синтаксис выглядит так:
for (let i of array) {
action
}
Давайте воспользуемся этим методом цикла для пошаговой итерации массива, чтобы увидеть, как он работает:
let anArray = [1, 3, 5, 6];
for (let i of anArray) {
console.log(i)
}
Output:
1
3
5
6
Вы также можете использовать этот метод для перебора массива и обратного вывода. Это похоже на то, как вы это делаете, используя for … in :
let anArray = [1, 3, 5, 6];
let v = anArray.length - 1;
for (let x of anArray) {
console.log(anArray[v])
v -=1;
}
Output:
6
5
3
1
Для работы в цикле:
let anArray = [1, 3, 5, 6];
let v = anArray.length - 1;
for (let x of anArray) {
console.log("5", "x", anArray[v], "=", anArray[v] * 5)
v -=1;
}
Output:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5
Цикл "Пока"
В то время как цикл работает непрерывно, пока заданное условие остается истинным. Его часто используют как бесконечный цикл.
Например, поскольку ноль всегда меньше десяти, приведенный ниже код работает непрерывно:
let i = 0;
while (i < 10) {
console.log(4)
}Приведенный выше код записывает "4" бесконечно.
Давайте итерация через массив , используя время цикла:
let i = 0;
while (i < anArray.length) {
console.log(anArray[i])
i +=1
}
Output:
1
3
5
6
JavaScript do … while Loop
Цикл do … while принимает и выполняет набор действий явно внутри синтаксиса do . Затем он утверждает , условие для этого действия внутри цикла.
Вот как это выглядит:
do{
actions
}
while (
consition
)Теперь давайте переберем массив, используя этот метод цикла:
do{
console.log(anArray[i])
i +=1
}
while (
i < anArray.length
)
Output:
1
3
5
6
Ознакомьтесь с циклами JavaScript
Хотя мы выделили здесь различные методы циклов JavaScript, освоение основ итераций в программировании позволяет вам гибко и уверенно использовать их в своих программах. Тем не менее, большинство этих циклов JavaScript работают одинаково, с небольшими отличиями в их общей структуре и синтаксисе.
Однако циклы являются основой большинства рендеринга массивов на стороне клиента. Так что не стесняйтесь настраивать эти методы цикла по своему усмотрению. Например, их использование с более сложными массивами позволяет лучше понять циклы JavaScript.