Уроки по веб-разработке

forEach() JS — метод для перебора массива

developer

Метод forEach() в языке JS используется для прохода всех элементов массива. Данный цикл работает так — он перебирает каждый элемент и выполняет переданную ему функцию для каждого элемента.

Теперь давайте рассмотрим параметры, которые данный метод принимает

array.forEach(function callback(currentValue, index, currentArray)[, thisArg]);

callback — та самая функция, которая будет вызвана для каждого элемента при выполнении цикла forEach
Callback может быть стрелочной функцией и принимает такие параметры

thisArg — это необязательный параметр. Значение, используемое в качестве this при вызове функции callback.

Примеры использования

Самый простой пример:

let arr = ["John", "Mike", "Andry", "Shenon"];

arr.forEach((item, index) => {
    // item - элемент массива на текущей итерации
    // index - порядковый номер элемента в массиве
    console.log(`${index}: ${item}`);
})

Рассмотрим более сложный пример. У вас в html есть список <ul>, к которому вам нужно из массива добавить данные:

let arr = ['BMW', 'Mercedes', 'Volkswagen', 'Toyota'];

const carList = document.querySelector('.car-list');
let list = '';

arr.forEach(item => {
    list += `<li>${ item }</li>`
});

carList.innerHTML = list;

Итак, сначала мы с DOM дерева вытягиваем список ul, чтобы потом к нему добавить каждый элемент li. Задаем переменную, к которой добавим пункты списка. С помощью метода forEach() проходим по нашему массиву и добавляем всё к li. Затем с помощью .innerHTML добавляем это к полученному ul.

Полный код с html смотрите тут:

Весь код

Теперь рассмотрим пример, когда у нас есть массив и нам нужно заменить какое-то значение при условии. Например, в массиве из примера выше, нам нужно заменить Toyota на Lexus:

let arr = ['BMW', 'Mercedes', 'Volkswagen', 'Toyota'];

arr.forEach((item, index) => {
    if (item === 'Toyota') {
        arr[index] = 'Lexus'; // Выбираем нужный элемент массива по его индексу и присваиваем ему новое значение
    }
})

console.log(arr); // ['BMW', 'Mercedes', 'Volkswagen', 'Lexus']

Пишем свой forEach с помощью цикла

В JS метод forEach сделан для удобства, но мы также можем пройтись по массиву используя обычный цикл for.

let arr = ['Mike', 'Ray', 'Liam', 'Mason', 'Jacob'];

for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

Перебор массива объектов

Скорее всего на практике вам чаще всего придется делать перебор массива объектов, чтобы вывести какие-либо данные, изменить свойства объекта или добавить что-либо к объекту.

Давайте рассмотрим такие примеры.

Пример 1. У нас есть ответ от сервера с именами и возрастом пользователей. Нам нужно вывести данные только тех пользователей, которые старше 18

let users = [
    { name: 'Steve', age: 18 },
    { name: 'John', age: 12 },
    { name: 'Liam', age: 16 },
    { name: 'Mike', age: 20 },
    { name: 'Jacob', age: 21 }
]

users.forEach(user => {
   if (user.age >= 18) console.log(user.name);
});

В данном случае на каждой итерации в переменную user мы получаем объект. Мы знаем, что у него есть свойство age и с помощью if мы проверяем соответствует ли возраст пользователя нашему условию (18 лет). Если да, тогда выводим имя в консоль.

Пример 2. Давайте добавим всем пользователям свойство city.

let users = [
    { name: 'Steve', age: 18 },
    { name: 'John', age: 12 },
    { name: 'Liam', age: 16 },
    { name: 'Mike', age: 20 },
    { name: 'Jacob', age: 21 }
]

users.forEach(user => {
   user.city = 'New York';
});