ForEach: примеры (JAVASCRIPT)

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

Базовый пример с выводом элементов:

const fruits = ['яблоко', 'банан', 'апельсин'];
fruits.forEach(item => console.log(item));

яблоко
банан
апельсин

Использование всех параметров callback-функции:

const numbers = [10, 20, 30];
numbers.forEach((value, index, array) => {
  console.log(`Элемент ${value} с индексом ${index} в массиве [${array}]`);
});

Элемент 10 с индексом 0 в массиве [10,20,30]
Элемент 20 с индексом 1 в массиве [10,20,30]
Элемент 30 с индексом 2 в массиве [10,20,30]

Использование параметра thisArg:

function Counter() {
  this.sum = 0;
  this.count = 0;
}

Counter.prototype.add = function(array) {
  array.forEach(function(element) {
    this.sum += element;
    this.count++;
  }, this);
};

const obj = new Counter();
obj.add([1, 2, 3]);
console.log(obj.sum, obj.count);

6 3

Альтернативные методы в JavaScript

map() - создает новый массив с результатами вызова функции для каждого элемента. Используется, когда нужно трансформировать данные.

filter() - создает новый массив со всеми элементами, прошедшими проверку. Подходит для фильтрации данных.

reduce() - выполняет функцию-редьюсер для каждого элемента, возвращая одно результирующее значение. Применяется для агрегации данных.

for...of - цикл для перебора итерируемых объектов. Предпочтительнее, когда нужен контроль над процессом итерации или требуется прервать выполнение.

for - классический цикл. Используется при работе с индексами или когда нужна максимальная производительность.

Типичные ошибки

Попытка прервать выполнение forEach:

const arr = [1, 2, 3, 4];
arr.forEach(item => {
  if (item === 3) return; // Не прерывает выполнение
  console.log(item);
});

1
2
4

Изменение массива во время итерации:

const numbers = [1, 2, 3];
numbers.forEach((num, index) => {
  numbers.push(num * 2); // Бесконечный цикл
  if (index > 5) return;
});

Использование асинхронных функций без учета их асинхронности:

const urls = ['url1', 'url2', 'url3'];
let results = [];
urls.forEach(async url => {
  const data = await fetch(url);
  results.push(data); // Порядок может нарушиться
});

Изменения в последних версиях

В ECMAScript 2023 добавлен метод findLast() и findLastIndex() для обратного поиска, но forEach остался без изменений.

Основные изменения касаются производительности и оптимизации в движках JavaScript. Современные браузеры лучше оптимизируют forEach для больших массивов.

В строгом режиме ES5 и выше, значение this в callback-функции соответствует переданному thisArg или undefined в обычном режиме.

Расширенные примеры

Работа с массивами объектов:

const users = [
  {id: 1, name: 'Анна', active: true},
  {id: 2, name: 'Иван', active: false},
  {id: 3, name: 'Мария', active: true}
];

users.forEach((user, index, arr) => {
  if (user.active) {
    console.log(`${user.name} активен(а)`);
  }
});

Анна активен(а)
Мария активен(а)

Использование forEach с NodeList:

// Получение всех элементов на странице
const divs = document.querySelectorAll('div');
divs.forEach(div => {
  div.style.color = 'blue';
});

Параллельная обработка нескольких массивов:

const keys = ['name', 'age', 'city'];
const values = ['Алексей', 30, 'Москва'];
const obj = {};

keys.forEach((key, index) => {
  obj[key] = values[index];
});

console.log(obj);

{name: 'Алексей', age: 30, city: 'Москва'}

Имитация метода map с использованием forEach:

const numbers = [1, 2, 3];
const doubled = [];
numbers.forEach(num => {
  doubled.push(num * 2);
});
console.log(doubled);

[2, 4, 6]

Аналоги в других языках программирования

В Python используется comprehensions и функция map():

# Python
numbers = [1, 2, 3]
# Списочное выражение
squares = [x**2 for x in numbers]
# Функция map с lambda
result = list(map(lambda x: x*2, numbers))

squares = [1, 4, 9]
result = [2, 4, 6]

В PHP применяется конструкция foreach:

// PHP
$array = [1, 2, 3];
foreach ($array as $value) {
    echo $value * 2;
}
// С ключами
foreach ($array as $key => $value) {
    echo "$key: $value";
}

В C# используется метод ForEach для коллекций:

// C#
List numbers = new List {1, 2, 3};
numbers.ForEach(n => Console.WriteLine(n));

Основное отличие JavaScript forEach - невозможность прервать выполнение с помощью break или return.