Все виды циклов в JavaScript

Цикл for;
Цикл while;
Цикл do…while;
Цикл for…in;
Цикл for…of;
Заключение;

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

1. Цикл for

Цикл for — это классическим инструментом для повторения определённого блока кода фиксированное количество раз. Он особенно полезен, когда ты работаешь с массивами или любыми структурами данных, где нужно обратиться к каждому элементу по индексу.

for (let i = 0; i < 5; i++) {
    console.log("Индекс: " + i);
}

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

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

for (let i = 0; i < 10; i++) {
    if (i === 5) {
        break; // Прекращаем выполнение цикла, как только i достигнет 5
    }
    console.log(i); // Этот код будет выполнен только для i от 0 до 4
}

В этом примере цикл прекращается при i = 5, и дальнейшие числа (от 5 до 9) не выводятся.

Пропуск итераций с помощью continue

Оператор continue используется для пропуска текущей итерации цикла. Этот оператор позволяет игнорировать часть кода в теле цикла для конкретной итерации, после чего цикл продолжается со следующей итерации.

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

for (let i = 0; i < 10; i++) {
    if (i % 2 === 0) {
        continue; // Пропускаем остальной код в теле цикла для чётных i
    }
    console.log(i); // Этот код будет выполнен только для нечётных i
}

В данном примере выводятся только нечётные числа (1, 3, 5, 7, 9), потому что при чётных значениях i выполнение итерации прерывается оператором continue, и остальной код в теле цикла не выполняется.

Когда использовать break и continue

Использование break: когда нужно полностью прервать выполнение цикла после наступления определённого условия. Например, при поиске первого элемента, удовлетворяющего условию, или при обнаружении ошибки.
Использование continue: когда некоторые данные в итерации не нужно обрабатывать, но выполнение цикла в целом должно продолжаться. Например, при фильтрации данных или пропуске некорректных значений.

2. Цикл while

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

let number = 0;
while (number < 3) {
    console.log("Число: " + number);
    number++;
}

Цикл будет выполняться, пока переменная number меньше 3, выводя на экран числа 0, 1 и 2.

Подобно циклу for, в while можно использовать операторы break и continue для контроля над выполнением цикла.

Остановка выполнения цикла с помощью break

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

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

let count = 1;
while (count <= 10) {
    console.log(count);
    if (count === 5) {
        break; // Останавливаем цикл, когда count достигает 5
    }
    count++;
}

В этом примере, несмотря на то что условие цикла предусматривает его выполнение до 10, использование break прерывает цикл при достижении count значения 5.

Пропуск итераций с помощью continue

Оператор continue в цикле while используется для пропуска оставшейся части кода в текущей итерации. Это позволяет перейти непосредственно к следующей проверке условия цикла, пропустив код, который не должен выполняться для определённых условий.

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

let number = 0;
while (number < 10) {
    number++;
    if (number % 2 === 0) {
        continue; // Пропускаем вывод чётных чисел
    }
    console.log(number); // Выводятся только нечётные числа
}

В этом примере continue используется для пропуска вывода чётных чисел. Цикл продолжает инкрементировать number и выводить только нечётные числа.

Когда использовать break и continue в цикле while

Использование break:
- Прерывание цикла при выполнении определённого условия.
- Выход из цикла в случае ошибки или при достижении желаемого результата, который не требует дальнейшего выполнения цикла.
Использование continue:
- Пропуск специфических условий в рамках цикла, когда выполнение всего блока кода в итерации нежелательно или ненужно.
- Продолжение работы цикла после пропуска некоторых его частей, особенно при обработке исключений или специфических кейсов в данных.

3. Цикл do…while

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

let result;
do {
    result = Math.random();
    console.log(result);
} while (result > 0.1);

Этот код будет генерировать случайные числа и выводить их, пока не сгенерируется число, меньшее или равное 0.1.

Как и в других типах циклов, do...while позволяет использовать операторы break и continue для контроля над итерациями.

Остановка выполнения цикла с помощью break

Оператор break применяется в do...while для немедленной остановки всего цикла. Это полезно, когда в процессе выполнения обнаруживается ситуация, которая требует прекращения всех последующих итераций.

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

let i = 1;
do {
    console.log(i);
    if (i === 5) {
        break; // Прекращаем выполнение цикла, как только i достигает 5
    }
    i++;
} while (i <= 10);

В этом примере, цикл завершится, когда переменная i достигнет 5, несмотря на то, что первоначальное условие предусматривает его выполнение до 10.

Пропуск итераций с помощью continue

Оператор continue используется для пропуска оставшейся части кода в текущей итерации цикла do...while. После continue выполнение переходит непосредственно к проверке условия цикла.

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

let i = 0;
do {
    i++;
    if (i % 2 === 0) {
        continue; // Пропускаем вывод чётных чисел
    }
    console.log(i); // Выводятся только нечётные числа
} while (i < 10);

В этом примере цикл продолжает инкрементировать переменную i, но выводит только нечётные числа, так как чётные пропускаются с помощью continue.

Когда использовать break и continue в цикле do...while

Использование break:
- Когда нужно прервать выполнение цикла после определённого события или достижения конкретного условия.
- В случаях, когда дальнейшее выполнение цикла становится нежелательным или нецелесообразным (например, при возникновении ошибки).
Использование continue:
- Для пропуска определённых условий в рамках одной итерации, позволяя при этом продолжить выполнение цикла.
- Когда некоторые данные или случаи не требуют выполнения всего блока кода цикла, но не мешают продолжению обработки последующих итераций.

4. Цикл for…in

Цикл for...in предназначен для перебора свойств объектов в JavaScript. Он позволяет легко доступаться к каждому ключу (свойству) объекта и его значению.

const person = { name: "Алекс", age: 30 };
for (let key in person) {
    console.log(key + ": " + person[key]);
}

Этот код перебирает все свойства объекта person и выводит их ключи и значения.

Подобно другим циклам, for...in поддерживает использование операторов break и continue для управления итерациями.

Остановка выполнения цикла с помощью break

Оператор break применяется для немедленного прекращения выполнения цикла for...in. Это может быть полезно, если в процессе перебора объекта вы находите необходимую информацию и дальнейший перебор становится излишним.

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

const user = {
    name: "Алекс",
    age: 30,
    isSubscribed: true
};

for (let key in user) {
    console.log(key, user[key]);
    if (key === 'age') {
        break; // Прерываем цикл после обработки свойства 'age'
    }
}

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

Пропуск итераций с помощью continue

Оператор continue используется для пропуска текущей итерации в цикле for...in. Если во время перебора объекта некоторые свойства не требуют обработки, можно использовать continue для перехода к следующему свойству.

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

const user = {
    name: "Алекс",
    age: 30,
    isSubscribed: false
};

for (let key in user) {
    if (key === 'isSubscribed' && !user[key]) {
        continue; // Пропускаем свойство 'isSubscribed', если оно false
    }
    console.log(key, user[key]);
}

Здесь цикл пропускает вывод свойства isSubscribed, если оно ложно (false), и продолжает перебор с оставшимися свойствами.

Когда использовать break и continue в цикле for...in

Использование break:
- Когда достигнута цель перебора и дальнейший перебор не требуется.
- Для экономии времени и ресурсов, если обработка всех свойств объекта не нужна.
Использование continue:
- Когда определённые свойства объекта не требуют обработки или не соответствуют заданным условиям.
- Для фильтрации свойств по определённым критериям в рамках одного цикла.

5. Цикл for…of

Цикл for...of позволяет выполнять итерацию по элементам итерируемых объектов, таких как массивы, строки, а также коллекции типа Map и Set. Он является частью современного стандарта ECMAScript 2015 (ES6) и предоставляет чистый и удобный способ перебора элементов без необходимости управления индексами или ключами.

Итерация по массиву:

const fruits = ["apple", "banana", "cherry"];
for (const fruit of fruits) {
    console.log(fruit);
}
// apple
// banana
// cherry

В этом примере, каждый элемент массива fruits выводится поочерёдно в консоль.

Итерация по строке:

const greeting = "Hello";
for (const character of greeting) {
    console.log(character);
}
// H
// e
// l
// l
// o

Каждый символ строки greeting будет выведен отдельно.

Итерация по Map:

const book = new Map();
book.set("title", "1984");
book.set("author", "George Orwell");

for (const [key, value] of book) {
    console.log(`${key}: ${value}`);
}

// title: 1984
// author: George Orwell

Map содержит пары ключ-значение, и for...of позволяет легко итерировать эти пары.

Управление выполнением цикла

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

break: Прерывает цикл при выполнении определённого условия.
continue: Пропускает текущую итерацию и переходит к следующей, если текущий элемент не соответствует заданным критериям.

Пример с break и continue:

const numbers = [1, 2, 3, 4, 5, 6];

for (const number of numbers) {
    if (number > 4) {
        break; // Прекращаем цикл, если число больше 4
    }
    if (number % 2 === 0) {
        continue; // Пропускаем чётные числа
    }
    console.log(number); // Выводит 1, 3
}

Заключение

Выбор типа цикла зависит от конкретной задачи:

Используй цикл for для чётко заданного количества итераций.
Опирайся на while или do...while для более динамичных условий, когда необходимо учитывать изменения в данных во время исполнения программы.
Выбирай for...in и for...of для специфических задач перебора элементов и свойств объектов и коллекций.

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

Все виды циклов в JavaScript