JS оператор while
Загальний опис
while — це цикл в JavaScript, який повторює виконання блоку коду доти, доки задана умова залишається істинною (true). Перед кожною ітерацією умова перевіряється, і якщо вона є хибною (false), виконання циклу завершується.
Цикл while є корисним, коли кількість повторень наперед невідома. Наприклад, він може застосовуватися для читання даних, поки вони доступні, або для виконання операцій, поки користувач не завершить певну дію.
Приклад простого використання:
let i = 0;
while (i < 5) {
console.log(i);
i++;
}
У цьому прикладі змінна i збільшується на 1 на кожній ітерації, поки її значення менше 5.
Якщо умова завжди істинна і її не змінювати, це може призвести до нескінченного циклу:
while (true) {
console.log("Цей цикл ніколи не завершиться");
}
Нескінченні цикли слід уникати або використовувати з умовою для примусового виходу, наприклад, через break.
Існує також цикл do...while, схожий на while, але він виконує блок коду щонайменше один раз, незалежно від початкового стану умови.
- Порада
-
автор: Bondwhileчасто використовують у сценаріях, де необхідно очікувати певної події, наприклад, виконання асинхронної операції. Проте у таких випадках краще використовувати асинхронні методи, щоб уникнути блокування потоку. - Порада
-
Під час роботи з
автор: Bondwhileзавжди переконайтеся, що змінна, яка перевіряється в умові, змінюється в тілі циклу. Без цього можна легко створити нескінченний цикл. - Порада
-
Для роботи з великими масивами використовуйте
автор: Bondwhile, коли потрібно обробляти елементи до досягнення певного стану. Це дозволяє більш ефективно завершувати цикл, ніж перебирати всі елементи черезfor.
Синтаксис
while (умова) {
// Код для виконання
}Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 3 | 12 | 3 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
| Переглядач |  |
 |
|---|---|---|
| 0.10.0 | 1.0 |
Приклади
+ запропонувати свій приклад у пісочниці
Користувач вводить кількість чисел у текстове поле та натискає кнопку "Згенерувати список". Програма очищає список і за допомогою циклу while додає до нього вказану кількість чисел. Це наочний приклад використання while для обробки введених даних та динамічного оновлення сторінки.
HTML
<header>
<h2 class="title">Використання "while"</h2>
<p class="description">Демонстрація циклу "while" для генерації списку чисел на основі введення користувача</p>
</header>
<main>
<div class="result">
<label for="numberInput">Скільки чисел згенерувати?</label>
<input type="number" id="numberInput" min="1" placeholder="Введіть число">
<button id="generateBtn">Згенерувати список</button>
<ul id="numberList"></ul>
</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);
}
button {
font-size: 16px;
padding: 10px 15px;
margin: 5px 0;
cursor: pointer;
border: 1px solid #ccc;
background-color: #fff;
transition: background-color 0.3s;
}
button:hover {
background-color: #f0f0f0;
}
#numberInput {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
box-sizing: border-box;
}
#numberList {
list-style-type: decimal;
padding-left: 20px;
margin-top: 15px;
}JS
// Пошук елементів
const numberInput = document.getElementById('numberInput');
const generateBtn = document.getElementById('generateBtn');
const numberList = document.getElementById('numberList');
// Обробник події для кнопки
generateBtn.addEventListener('click', function () {
// Очищення списку перед генерацією
numberList.innerHTML = '';
// Отримання введеного значення
const count = parseInt(numberInput.value, 10);
// Перевірка, чи є введення коректним числом
if (isNaN(count) || count <= 0) {
alert('Будь ласка, введіть число більше 0.');
return;
}
// Використання while для генерації списку чисел
let currentNumber = 1;
while (currentNumber <= count) {if (window.CP.shouldStopExecution(0)) break;
const listItem = document.createElement('li');
listItem.textContent = `Число: ${currentNumber}`;
numberList.appendChild(listItem);
currentNumber++;
}window.CP.exitedLoop(0);
});
//# sourceURL=pen.jsУ цьому прикладі цикл продовжує запитувати користувача на введення, доки він не введе непорожній рядок. Це корисно для валідації даних у реальному часі.
let input;
while (!input || input.trim() === "") {
input = prompt("Введіть своє ім'я (не залишайте поле порожнім):");
}
console.log(`Привіт, ${input}!`);Цей цикл повторюється, поки не згенерується випадкове число 7. Він демонструє, як while можна використовувати для виконання повторюваних операцій із невизначеною кількістю ітерацій.
let randomNumber = 0;
let attempts = 0;
while (randomNumber !== 7) {
randomNumber = Math.floor(Math.random() * 10); // Генерація числа від 0 до 9
attempts++;
}
console.log(`Знайдено 7 за ${attempts} спроб`);Коментарі
Коментарів ще немає — будьте першим!