Array.prototype.forEach()

Метод forEach() экземпляров Array выполняет предоставленную функцию один раз для каждого элемента массива.

Попробуйте

const array = ["a", "b", "c"];

array.forEach((element) => console.log(element));

// Expected output: "a"
// Expected output: "b"
// Expected output: "c"

Синтаксис

forEach(callbackFn)
forEach(callbackFn, thisArg)

Параметры

callbackFn

Функция, которая будет выполнена для каждого элемента массива. Её возвращаемое значение игнорируется. Функция вызывается со следующими аргументами:

element

Текущий обрабатываемый элемент массива.

index

Индекс текущего обрабатываемого элемента массива.

array

Массив, для которого был вызван forEach().

thisArg Необязательный

Значение, которое будет использоваться как this при выполнении callbackFn. См. итеративные методы.

Возвращаемое значение

Нет (undefined).

Описание

Метод forEach() является итеративным методом. Он вызывает предоставленную функцию callbackFn один раз для каждого элемента массива в порядке возрастания индексов. В отличие от map(), forEach() всегда возвращает undefined и не может быть связан (chainable). Типичный сценарий использования — выполнение побочных эффектов в конце цепочки. Прочтите раздел итеративные методы для получения дополнительной информации о том, как эти методы работают в целом.

callbackFn вызывается только для индексов массива, которым присвоены значения. Он не вызывается для пустых слотов в разреженных массивах.

Метод forEach() является общим. Он ожидает, что значение this будет иметь свойство length и свойства с целочисленными ключами.

Нет способа остановить или прервать цикл forEach(), кроме как путем выбрасывания исключения. Если вам нужно такое поведение, метод forEach() — это неправильный инструмент.

Раннее завершение может быть достигнуто с помощью циклов, таких как for, for...of и for...in. Методы массива, такие как every(), some(), find() и findIndex(), также немедленно останавливают итерацию, когда дальнейшая итерация не требуется.

forEach() ожидает синхронную функцию — он не дожидается промисов. Убедитесь, что вы осведомлены о последствиях при использовании промисов (или асинхронных функций) в качестве обратных вызовов forEach.

const ratings = [5, 4, 5];
let sum = 0;

const sumFunction = async (a, b) => a + b;

ratings.forEach(async (rating) => {
  sum = await sumFunction(sum, rating);
});

console.log(sum);
// Naively expected output: 14
// Actual output: 0

Чтобы выполнить серию асинхронных операций последовательно или параллельно, см. композицию промисов.

Примеры

Преобразование цикла for в forEach

const items = ["item1", "item2", "item3"];
const copyItems = [];

// before
for (let i = 0; i < items.length; i++) {
  copyItems.push(items[i]);
}

// after
items.forEach((item) => {
  copyItems.push(item);
});

Вывод содержимого массива

Следующий код выводит строку для каждого элемента массива:

const logArrayElements = (element, index /*, array */) => {
  console.log(`a[${index}] = ${element}`);
};

// Notice that index 2 is skipped, since there is no item at
// that position in the array.
[2, 5, , 9].forEach(logArrayElements);
// Logs:
// a[0] = 2
// a[1] = 5
// a[3] = 9

Использование thisArg

Следующий (условный) пример обновляет свойства объекта на основе каждой записи в массиве:

class Counter {
  constructor() {
    this.sum = 0;
    this.count = 0;
  }
  add(array) {
    // Only function expressions have their own this bindings.
    array.forEach(function countEntry(entry) {
      this.sum += entry;
      ++this.count;
    }, this);
  }
}

const obj = new Counter();
obj.add([2, 5, 9]);
console.log(obj.count); // 3
console.log(obj.sum); // 16

Поскольку параметр thisArg (this) предоставлен для forEach(), он передается в callback каждый раз, когда он вызывается. Обратный вызов использует его как свое значение this.

Функция копирования объекта

Следующий код создает копию заданного объекта.

Существуют различные способы создания копии объекта. Следующий пример — лишь один из них и представлен для объяснения того, как работает Array.prototype.forEach(), используя вспомогательные функции Object.*.

const copy = (obj) => {
  const copy = Object.create(Object.getPrototypeOf(obj));
  const propNames = Object.getOwnPropertyNames(obj);
  propNames.forEach((name) => {
    const desc = Object.getOwnPropertyDescriptor(obj, name);
    Object.defineProperty(copy, name, desc);
  });
  return copy;
};

const obj1 = { a: 1, b: 2 };
const obj2 = copy(obj1); // obj2 looks like obj1 now

Сглаживание массива

Следующий пример приведен только в учебных целях. Если вы хотите сгладить массив с помощью встроенных методов, вы можете использовать Array.prototype.flat().

const flatten = (arr) => {
  const result = [];
  arr.forEach((item) => {
    if (Array.isArray(item)) {
      result.push(...flatten(item));
    } else {
      result.push(item);
    }
  });
  return result;
};

// Usage
const nested = [1, 2, 3, [4, 5, [6, 7], 8, 9]];
console.log(flatten(nested)); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

Использование третьего аргумента callbackFn

Аргумент array полезен, если вы хотите получить доступ к другому элементу массива, особенно когда у вас нет существующей переменной, ссылающейся на массив. Следующий пример сначала использует filter() для извлечения положительных значений, а затем использует forEach() для вывода его соседей.

const numbers = [3, -1, 1, 4, 1, 5];
numbers
  .filter((num) => num > 0)
  .forEach((num, idx, arr) => {
    // Without the arr argument, there's no way to easily access the
    // intermediate array without saving it to a variable.
    console.log(arr[idx - 1], num, arr[idx + 1]);
  });
// undefined 3 1
// 3 1 4
// 1 4 1
// 4 1 5
// 1 5 undefined

Использование forEach() на разреженных массивах

const arraySparse = [1, 3, /* empty */, 7];
let numCallbackRuns = 0;

arraySparse.forEach((element) => {
  console.log({ element });
  numCallbackRuns++;
});

console.log({ numCallbackRuns });

// { element: 1 }
// { element: 3 }
// { element: 7 }
// { numCallbackRuns: 3 }

Функция обратного вызова не вызывается для отсутствующего значения по индексу 2.

Вызов forEach() на объектах, не являющихся массивами

Метод forEach() считывает свойство length объекта this, а затем обращается к каждой записи, ключ которой является неотрицательным целым числом, меньшим length.

const arrayLike = {
  length: 3,
  0: 2,
  1: 3,
  2: 4,
  3: 5, // ignored by forEach() since length is 3
};
Array.prototype.forEach.call(arrayLike, (x) => console.log(x));
// 2
// 3
// 4

Спецификации

Совместимость с браузерами

См. также

• Polyfill для Array.prototype.forEach в core-js
• es-shims polyfill для Array.prototype.forEach
• Руководство по коллекциям с индексами
• Array
• Array.prototype.find()
• Array.prototype.map()
• Array.prototype.filter()
• Array.prototype.every()
• Array.prototype.some()
• TypedArray.prototype.forEach()
• Map.prototype.forEach()
• Set.prototype.forEach()