Циклы в JavaScript

Автор: |

Оглавление

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

Цикл for

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

for (инициализация; условие; обновление) {

// тело цикла

}

Элементы цикла for:

Инициализация — выполняется один раз перед началом цикла. Обычно здесь объявляют и инициализируют переменную-счетчик.
Условие — проверяется перед каждой итерацией. Пока оно остается истинным, цикл продолжает выполнение.
Обновление — выполняется после каждой итерации. Обычно здесь обновляют значение переменной-счетчика.
Тело цикла — блок кода, который выполняется на каждой итерации.

Пример использования цикла for:

for (let i = 0; i < 5; i++) {
    console.log(i);
}
Результатом выполнения этого кода будет:
0
1
2
3
4

«I++» операция, аналогичная i+1, т. е. она увеличивает значение переменной на единицу. Сначала возвращается текущее значение переменной, затем значение переменной возрастает. Например, если у вас есть переменная «i» с начальным значением 5, то после выполнения «i++» значение переменной останется 5, но в следующей строке кода значение «i» уже будет 6.

Цикл while

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

while (условие) {

// тело цикла

}

Элементы цикла while:

Условие — проверяется перед каждой итерацией. Пока оно остается истинным, цикл продолжается.
Тело цикла — блок кода, который выполняется на каждой итерации.

Пример использования цикла while:

let count = 0;

while (count < 5) {
    console.log(count);
    count++;
}
Результатом выполнения этого кода будет:
0
1
2	
3
4

Цикл do…while

Цикл do…while похож на цикл while, за исключением того, что тело цикла выполняется хотя бы один раз, прежде чем будет проверено условие. Это полезно, когда нужно гарантировать выполнение кода хотя бы один раз. Синтаксис цикла do…while выглядит следующим образом:

do {

// тело цикла

} while (условие);

Элементы цикла do…while:

Тело цикла — блок кода, который выполняется на каждой итерации.

Условие — проверяется после первой итерации. Пока оно остается истинным, цикл продолжается.

Здесь сначала выполняется блок кода в фигурных скобках, а затем проверяется условие. Если условие истинно, цикл повторяется снова. Таким образом, структура do…while идеально подходит для задач, требующих гарантированного выполнения кода перед проверкой условия.

Цикл do…while в JavaScript является удобным средством для выполнения блока кода, гарантирующим его запуск хотя бы один раз. В отличие от других циклических конструкций, таких как while или for, в которых условие проверяется перед первым проходом, в do…while условие проверяется после выполнения тела цикла. Это означает, что код внутри цикла обязательно выполнится хотя бы единожды, прежде чем начнется проверка условия.

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

Пример использования цикла do…while:

let counter = 0;

do {
    console.log(counter);
    counter++;
} while (counter < 5);
Результатом выполнения этого кода будет:
0
1
2
3
4

Вот дополнительные примеры программ с использованием циклов for, while и do…while, которые выполняют полезные задачи и могут быть запущены в консоли браузера.

Пример использования цикла for

Задача: Найти сумму всех чётных чисел от 1 до 100

let sum = 0;

for (let i = 1; i <= 100; i++) {
    if (i % 2 === 0) {
        sum += i;
    }
}

console.log(`Сумма всех чётных чисел от 1 до 100 равна: ${sum}`);

Пример использования цикла while

Задача: Вывести таблицу умножения на 7

let number = 7;
let multiplier = 1;

while (multiplier <= 10) {
    console.log(`${number} × ${multiplier} = ${number * multiplier}`);
    multiplier++;}

Пример использования цикла do…while

Задача: Генерируем случайное число до тех пор, пока оно не станет меньше 0.5

let randomNumber;

do {
    randomNumber = Math.random(); // Генерация случайного числа от 0 до 1
    console.log(randomNumber);
} while (randomNumber >= 0.5);

console.log(`Случайное число меньше 0.5: ${randomNumber}`);

Эти примеры демонстрируют, как можно использовать циклы для выполнения полезных задач в реальных сценариях.

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

Использование цикла fo`r` для создания списка

Этот пример создает упорядоченный список (ul) с числами от 1 до 10.

Содержимое файла HTML:




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Список чисел</title>
</head>
<body>
    <h1>Простой список чисел:</h1>
    <div id="list-container"></div>

    <script src="script.js"></script>
</body>
</html>

Содержимое файла script.js




const listContainer = document.getElementById('list-container');

const ul = document.createElement('ul');

for (let i = 1; i <= 10; i++) {
    const li = document.createElement('li');
    li.textContent = i;
    ul.appendChild(li);
}

listContainer.appendChild(ul);

В результате на странице вы получите список столбиком 1, 2, 3, 4, 5, 6, 7, 8, 9, 10.

Использование цикла while для анимации текста

Этот пример анимирует текст, добавляя к нему точки каждые полсекунды, пока длина текста не достигнет 10 символов.

Содержимое HTML файла




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Анимация текста</title>
</head>
<body>
    <h1>Загрузка...</h1>
    <div id="loading-text"></div>

    <script src="script.js"></script>
</body>
</html>

Содержимое файла script.js




const loadingText = document.getElementById('loading-text');
let dots = '';

function addDot() {
    dots += '.';
    loadingText.textContent = `Загрузка${dots}`;

    if (dots.length < 10) {
        setTimeout(addDot, 500);
    }
}

addDot();

В результате На странице будет текст «Загрузка…», к которому постепенно добавляются точки, создавая эффект загрузки.

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

Цикл for

Цикл while

Цикл do…while

Пример использования цикла for

Пример использования цикла while

Пример использования цикла do…while

Использование цикла for для создания списка

Использование цикла while для анимации текста

Добавить комментарий Отменить ответ

Использование цикла fo`r` для создания списка