JS оператор for

Загальний опис

for — це базова конструкція JavaScript, що дозволяє повторювати виконання певного блоку коду. Цикл "for" складається з трьох основних частин: ініціалізації, умови та оновлення. Кожна частина має свою функцію:

1. Ініціалізація виконується один раз перед початком циклу. Зазвичай тут створюють змінну-лічильник (let i = 0).
2. Умова визначає, чи виконуватиметься наступна ітерація. Поки умова повертає true, тіло циклу виконується.
3. Оновлення виконується після кожної ітерації та зазвичай змінює лічильник (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 правити

Порада

Коли використовуєте "for" для обходу масивів, віддавайте перевагу методу length у умові. Наприклад, for (let i = 0; i < arr.length; i++) — це універсально та безпечно, але пам'ятайте, що великі масиви краще обробляти через методи масивів (map, forEach).

автор: Bond правити

Порада

Уникайте зайвих операцій всередині умови циклу. Наприклад, замість for (let i = 0; i < someArray.length; i++) кешуйте значення довжини:

for (let i = 0, len = someArray.length; i < len; i++) { }

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

for (ініціалізація; умова; оновлення) {
  // Тіло циклу
}

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	3	12

Підтримка: мобільні переглядачі

Переглядач
	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);