Оригінальна публікація: JavaScript forEach – How to Loop Through an Array in JS

Метод forEach у JavaScript — це один із декількох способів пройти масив циклічно. Кожен метод має свої особливості, і вам, залежно від того, що ви робите, вирішувати, який з них використовувати.

У цій публікації ми докладніше розглянемо метод forEach у JavaScript.

Враховуючи, що ми маємо наступний масив:

const числа = [1, 2, 3, 4, 5];

Використання традиційного циклу for для проходження масиву буде таким:

for (i = 0; i < числа.length; i++) {
  console.log(числа[i]);
}

Чим особливий метод forEach( )?

Метод forEach також використовується для циклічного проходження масивів, але у порівнянні із циклом for він використовує функцію по-іншому.

Метод forEach передає функцію зворотного виклику для кожного елемента масиву разом з такими параметрами:

  • Поточне значення (обов’язково) — значення поточного елемента масиву
  • Індекс (необов’язково) — номер індексу поточного елемента
  • Масив (необов’язково) — об’єкт масиву, до якого належить поточний елемент

Поясню ці параметри покроково.

По-перше, щоб пройти масив за допомогою методу forEach, вам потрібна функція зворотного виклику (або анонімна функція):

числа.forEach(function() {
    // код
});

Функція буде виконана для кожного окремого елемента масиву. Вона повинна приймати принаймні один параметр, який представляє елементи масиву:

числа.forEach(function(число) {
    console.log(число);
});

Це все, що нам потрібно зробити для циклічного проходження масиву:

Ads-z-2

Альтернативно, ви можете використати представлення стрілкової функції ES6, щоб спростити код:

числа.forEach(число => console.log(число));
Представлення стрілкової функції

Додаткові параметри

Індекс

Зараз продовжимо із додатковими параметрами. Першим є параметр «індекс», який представляє номер індексу кожного елемента.

По суті, ми можемо побачити номер індексу елемента, якщо додамо його як другий параметр:

числа.forEach((число, індекс) => {
    console.log('Індекс: ' + індекс + ' Значення: ' + число);
});
screenshot-4

Масив

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

числа.forEach((число, індекс, масив) => {
    console.log(масив);
});
Ads-z

Підтримка браузера

Метод Array.forEach підтримується в усіх браузерах, окрім Internet Explorer 8 або ранішого:

Ads-z
caniuse.com

Дякую, що прочитали!