css.in.ua
Підтримати

Наповнення JS розділу

Добридень, Пані та Панове, завдяки вам вдалося зібрати більше 19тис грн з необхідних 15тис на впровадження JS розділу.

JS розділ вже впроваджено - переходимо до його наповнення і почнемо бігти довгий марафон, адже JS має більше 1100 різноманітних методів, властивостей, подій і т.д., які необхідно описати.

Будемо працювати, і вдень, і вночі, щоб орієнтовно взимку закінчити наповнювати JS розділ!

Ви також можете допомогти нам в цьому. Долучайтеся до нашої спільноти в дискорді - ставайте її частиною і допомагайте нашому розвитку.

Також, підтримуйте нас матеріально.

Підтримати матеріально

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" зручний для роботи з масивами та об'єктами через ітерацію по їхніх елементах.

Порада:

Використовуйте вкладені цикли обережно. Вони сповільнюють код, якщо є великий обсяг даних. Наприклад, можна оптимізувати пошук у двох масивах, використовуючи словник замість подвійного циклу.
Порада:

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

for (let i = 0, len = someArray.length; i < len; i++) { }
Порада:

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

Синтаксис

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

Переглядачі

Переглядач

1

1

1

3

12
Переглядач

4.4

18

4

1
Переглядач

0.10.0

1.0

Приклади


Приклад демонструє використання циклу for для створення інтерактивного списку чисел із можливістю виділяти лише парні або непарні числа за допомогою кнопок. Користувач може взаємодіяти з формою, щоб генерувати список чисел до заданого значення та фільтрувати його.

Цей код об'єднує елементи, які є лише в одному з масивів.

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);

Методи

Властивості

Документи

Зв'язок