JS оператор for
Загальний опис
for — це базова конструкція JavaScript, що дозволяє повторювати виконання певного блоку коду. Цикл "for" складається з трьох основних частин: ініціалізації, умови та оновлення. Кожна частина має свою функцію:
- Ініціалізація виконується один раз перед початком циклу. Зазвичай тут створюють змінну-лічильник (
let i = 0). - Умова визначає, чи виконуватиметься наступна ітерація. Поки умова повертає
true, тіло циклу виконується. - Оновлення виконується після кожної ітерації та зазвичай змінює лічильник (
i++).
Робота циклу завершується, якщо умова стає false. Наприклад:
for (let i = 0; i < 5; i++) {
console.log(i);
}
// Вивід: 0, 1, 2, 3, 4
Важливо: всередині тіла циклу можна використовувати ключові слова break (для дострокового завершення циклу) та continue (для переходу до наступної ітерації).
Також цикл може працювати без деяких частин:
- Без ініціалізації:
let i = 0; for (; i < 3; i++) { console.log(i); } - Без умови (виконується нескінченно, якщо не використати
break):for (let i = 0; ; i++) { if (i === 3) break; console.log(i); } - Без оновлення:
for (let i = 0; i < 3;) { console.log(i); i++; }
Цикл "for" зручний для роботи з масивами та об'єктами через ітерацію по їхніх елементах.
автор: Bond
- Порада
-
Використовуйте вкладені цикли обережно. Вони сповільнюють код, якщо є великий обсяг даних. Наприклад, можна оптимізувати пошук у двох масивах, використовуючи словник замість подвійного циклу.
автор: Bond - Порада
-
Коли використовуєте "for" для обходу масивів, віддавайте перевагу методу
автор: Bondlengthу умові. Наприклад,for (let i = 0; i < arr.length; i++)— це універсально та безпечно, але пам'ятайте, що великі масиви краще обробляти через методи масивів (map,forEach). - Порада
-
Уникайте зайвих операцій всередині умови циклу. Наприклад, замість
for (let i = 0; i < someArray.length; i++)кешуйте значення довжини:
автор: Bondfor (let i = 0, len = someArray.length; i < len; i++) { }
Синтаксис
for (ініціалізація; умова; оновлення) {
// Тіло циклу
}Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 3 | 12 | 3 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
| Переглядач |  |
 |
|---|---|---|
| 0.10.0 | 1.0 |
Приклади
+ запропонувати свій приклад у пісочниці
Цей код об'єднує елементи, які є лише в одному з масивів.
let arr1 = [1, 2, 3, 4];
let arr2 = [3, 4, 5, 6];
let unique = [];
for (let i = 0; i < arr1.length; i++) {
if (!arr2.includes(arr1[i])) unique.push(arr1[i]);
}
for (let j = 0; j < arr2.length; j++) {
if (!arr1.includes(arr2[j])) unique.push(arr2[j]);
}
console.log(unique); // [1, 2, 5, 6]Код генерує таблицю множення, використовуючи вкладені цикли, що корисно для створення матриць або багатовимірних масивів.
let table = [];
for (let i = 1; i <= 5; i++) {
let row = [];
for (let j = 1; j <= 5; j++) {
row.push(i * j);
}
table.push(row);
}
console.table(table);Приклад демонструє використання циклу for для створення інтерактивного списку чисел із можливістю виділяти лише парні або непарні числа за допомогою кнопок. Користувач може взаємодіяти з формою, щоб генерувати список чисел до заданого значення та фільтрувати його.
HTML
<header>
<h2 class="title">Цикл for</h2>
<p class="description">Генерація чисел із фільтрацією парних і непарних значень</p>
</header>
<main>
<div class="controls">
<!-- Поле для введення числа -->
<label for="max-number">Введіть максимальне число:</label>
<input type="number" id="max-number" min="1" placeholder="Наприклад, 10">
<button id="generate">Згенерувати</button>
</div>
<div class="result">
<!-- Кнопки фільтрації -->
<button id="filter-even">Показати парні</button>
<button id="filter-odd">Показати непарні</button>
<!-- Список чисел -->
<ul id="number-list"></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);
}
.controls {
margin-bottom: 15px;
}
button {
margin-right: 5px;
padding: 5px 10px;
font-size: 14px;
}
ul {
list-style-type: none;
padding: 0;
}
ul li {
padding: 5px;
border-bottom: 1px solid #ddd;
}JS
document.getElementById('generate').addEventListener('click', () => {
const maxNumber = parseInt(document.getElementById('max-number').value, 10);
const numberList = document.getElementById('number-list');
// Очистка попереднього списку
numberList.innerHTML = '';
if (isNaN(maxNumber) || maxNumber < 1) {
alert('Введіть коректне число!');
return;
}
// Генерація списку чисел
for (let i = 1; i <= maxNumber; i++) {if (window.CP.shouldStopExecution(0)) break;
const li = document.createElement('li');
li.textContent = i;
li.dataset.value = i;
numberList.appendChild(li);
}window.CP.exitedLoop(0);
});
// Фільтрація парних чисел
document.getElementById('filter-even').addEventListener('click', () => {
filterNumbers(number => number % 2 === 0);
});
// Фільтрація непарних чисел
document.getElementById('filter-odd').addEventListener('click', () => {
filterNumbers(number => number % 2 !== 0);
});
// Функція для фільтрації
function filterNumbers(condition) {
const listItems = document.querySelectorAll('#number-list li');
listItems.forEach(item => {
const value = parseInt(item.dataset.value, 10);
item.style.display = condition(value) ? 'list-item' : 'none';
});
}
//# sourceURL=pen.jsКоментарі
Коментарів ще немає — будьте першим!