Оператор continue в JavaScript — пропустити крок циклу
Загальний опис
continue є оператором керування потоком у JavaScript, який використовується в циклах для пропуску поточної ітерації та переходу до наступної. Коли continue зустрічається в тілі циклу, всі наступні операції в поточній ітерації пропускаються, і виконання переходить до наступного повторення циклу. Цей оператор часто використовується разом із умовними конструкціями (if), щоб уникнути виконання певного коду за певних умов.
Розглянемо базовий приклад:
for (let i = 0; i < 10; i++) {
if (i % 2 === 0) continue; // Пропустити парні числа
console.log(i); // Виведе 1, 3, 5, 7, 9
}
Тут, якщо i парне, виконується оператор continue, і console.log пропускається.
continue можна використовувати у будь-якому циклі: for, while, або do...while. Наприклад:
let i = 0;
while (i < 5) {
i++;
if (i === 3) continue; // Пропустити число 3
console.log(i); // Виведе 1, 2, 4, 5
}
Особливість continue полягає в тому, що він працює лише в межах циклу. Використання поза циклом викликає синтаксичну помилку.
- Порада
-
Коли використовуєте
автор: Bondcontinue, завжди чітко документуйте умови, щоб уникнути заплутаності. Наприклад, складні вкладені умови можуть ускладнити читабельність, тому краще використовувати його обдумано. - Порада
-
Уникайте надмірного використання
автор: Bondcontinue, якщо можна обійтись іншими способами. Наприклад, реорганізація коду зменшує потребу у цьому операторі, що робить його зрозумілішим. - Порада
-
автор: Bondcontinueз мітками (label) може використовуватись у вкладених циклах, але така практика може ускладнити код. Віддавайте перевагу спрощенню структури замість використання міток.
Синтаксис
continue;Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 4 | 12 | 3 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
| Переглядач |  |
 |
|---|---|---|
| 0.10.0 | 1.0 |
Приклади
+ запропонувати свій приклад у пісочниці
У цьому прикладі continue пропускає обробку неактивних користувачів, зосереджуючи увагу лише на активних.
const users = [
{ id: 1, name: 'Іван', active: true },
{ id: 2, name: 'Оксана', active: false },
{ id: 3, name: 'Петро', active: true }
];
for (const user of users) {
if (!user.active) continue; // Пропустити неактивного користувача
console.log(`Активний користувач: ${user.name}`);
}Цей приклад демонструє, як continue можна використовувати для фільтрації негативних чисел, зберігаючи лише позитивні значення в новому масиві.
const numbers = [1, -2, 3, -4, 5];
const positives = [];
for (const num of numbers) {
if (num < 0) continue; // Пропустити від'ємні числа
positives.push(num);
}
console.log(positives); // [1, 3, 5]Користувач вводить список чисел через кому в текстове поле та натискає кнопку "Фільтрувати". Скрипт аналізує введений текст, використовуючи continue, щоб пропустити від'ємні або некоректні значення (наприклад, текстові символи), і відображає лише додатні числа. Це зручний спосіб показати, як continue може спростити обробку даних у циклі.
HTML
<header>
<h2 class="title">continue</h2>
<p class="description">Пропускає виконання поточної ітерації циклу та переходить до наступної.</p>
</header>
<main>
<div class="result">
<!-- Форма для введення чисел -->
<form id="filterForm">
<label for="numbersInput">Введіть числа через кому:</label>
<input type="text" id="numbersInput" placeholder="Наприклад: 1, -2, 3, -4">
<button type="button" id="filterButton">Фільтрувати</button>
</form>
<!-- Виведення результату -->
<p id="output">Результат: <span id="filteredNumbers"></span></p>
</div>
</main>CSS
body {
font-size: 16px;
line-height: 1.5;
font-family: monospace;
}
header {
background-color: #f1f1f1;
margin-bottom: 25px;
padding: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
header h2.title {
padding-bottom: 15px;
border-bottom: 1px solid #999;
}
header p.description {
font-style: italic;
color: #222;
}
.result {
background-color: #f8f8f8;
padding: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
form {
margin-bottom: 15px;
}
input {
font-size: 14px;
padding: 5px;
}
button {
padding: 5px 10px;
font-size: 14px;
cursor: pointer;
}JS
// Отримуємо посилання на елементи DOM
const filterButton = document.getElementById('filterButton');
const numbersInput = document.getElementById('numbersInput');
const filteredNumbersOutput = document.getElementById('filteredNumbers');
// Обробка натискання кнопки
filterButton.addEventListener('click', () => {
const input = numbersInput.value; // Отримати введені числа
const numbers = input.split(',').map(num => parseFloat(num.trim())); // Перетворити у масив чисел
const filteredNumbers = [];
// Фільтрація чисел
for (const num of numbers) {
if (isNaN(num) || num < 0) continue; // Пропустити від'ємні або некоректні числа
filteredNumbers.push(num);
}
// Вивести результат
filteredNumbersOutput.textContent = filteredNumbers.join(', ');
});
//# sourceURL=pen.jsКоментарі
Коментарів ще немає — будьте першим!