Цикли по масивах у

Про концепцію Цикли по масивах

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

Тут ми розглянемо випадок, коли змінювати масив у процесі не потрібно. Якщо ж треба перетворювати масиви, натомість див. концепцію «Перетворення масивів».

Цикл for

Найпростіший і зазвичай дуже ефективний спосіб перебрати масив - використати цикл for, див. концепцію «Цикли for».

const numbers = [6.0221515, 10, 23];

for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}
// => 6.0221515
// => 10
// => 23

Цикл for...of

Коли потрібно працювати безпосередньо зі значенням на кожній ітерації й індекс зовсім не потрібен, можна використати цикл for...of.

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

const numbers = [6.0221515, 10, 23];

// Because re-assigning number inside the loop will be very
// confusing, disallowing that via const is preferable.
for (const number of numbers) {
  console.log(number);
}
// => 6.0221515
// => 10
// => 23

Як і у звичайних циклах for, можна використати continue, щоб перервати поточну ітерацію, і break, щоб повністю зупинити виконання циклу.

У JavaScript також є цикл for...in, який перебирає ключі в обʼєкті. Важливо зазначити, що for...of і for...in не взаємозамінні; подробиці див. у документації MDN.

Метод forEach

Кожен масив має метод forEach, який також можна використати, щоб пройтися циклом по елементах масиву.

forEach приймає колбек як параметр. Функція-колбек викликається один раз для кожного елемента масиву.

const numbers = [6.0221515, 10, 23];

numbers.forEach((number) => console.log(number));
// => 6.0221515
// => 10
// => 23

У наведеному вище прикладі колбек використовує як параметр лише поточний елемент. За потреби колбек може приймати до трьох параметрів.

• значення поточної ітерації
• індекс поточної ітерації
• весь масив

const numbers = [6.0221515, 10, 23];

function callback(number, index, fullArray) {
  console.log(number, index, fullArray);
}

numbers.forEach(callback);
// => 6.0221515 0 [ 6.0221515, 10, 23 ]
// => 10 1 [ 6.0221515, 10, 23 ]
// => 23 2 [ 6.0221515, 10, 23 ]

Крім колбека, forEach як необовʼязковий другий параметр приймає контекст this, який використовується під час ітерації. Приклад можна побачити в розділі «Using thisArg» на MDN.

Працюючи з forEach, варто памʼятати про кілька речей.

• Після запуску циклу forEach зупинити ітерацію неможливо. Інструкцій break і continue у цьому контексті не існує.
• forEach поводиться дивно, якщо змінити масив після початку циклу. Елементи, додані в кінець, будуть проігноровані, видалення елементів може призвести до пропуску інших тощо. Щоб уникнути таких проблем, ніколи не варто змінювати масив, по якому йде цикл, усередині колбека.
• Метод forEach повертає undefined. Тому приєднати в кінці ланцюжком інші методи масиву не вдасться.
• Якщо потрібно оптимізувати код заради продуктивності, варто натомість розглянути for або for...of, бо обидва приблизно втричі швидші.