логотип PurpleSchool
логотип PurpleSchool

Как работает метод forEach() - JavaScript

Автор

Виталий Котов

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

let numbers = [1, 3, 4, 9, 8];

// функция для вычисления квадрата
function computeSquare(element) {
  console.log(element * element);
}

// вычисление квадрата каждого элемента
numbers.forEach(computeSquare);

Синтаксис forEach()

Синтаксис метода forEach() следующий:

arr.forEach(callback(currentValue), thisArg);

Где arr - это массив.

Параметры forEach()

Метод forEach() принимает:

  • callback
    • функцию, которая будет вызываться для каждого элемента массива. Принимает:
      • currentValue
        • текущий обрабатываемый элемент в массиве.
  • thisArg (необязательно) - значение, используемое в качестве this, при вызове функции callback. По умолчанию определен как undefined.

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

Возвращает undefined.

Примечания

  • forEach() не изменяет исходный массив.
  • forEach() вызывает функцию callback один раз для каждого элемента массива по порядку.
  • forEach() не вызывает функцию callback для элементов массива без значений.

Примеры

Пример 1: Печать содержимого массива

function printElements(element, index) {
  console.log("Array Element " + index + ": " + element);
}

const prices = [1800, 2000, 3000, , 5000, 500, 8000];

// forEach() не выполняется для элементов без значения
// поскольку элемент под номером три пуст, в такой ситуации он пропускается
prices.forEach(printElements);

Вывод в консоль:

Элемент массива 0: 1800
Элемент массива 1: 2000
Элемент массива 2: 3000
Элемент массива 4: 5000
Элемент массива 5: 500
Элемент массива 6: 8000

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

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

Counter.prototype.execute = function (array) {
  array.forEach((entry) => {
    this.sum += entry;
    ++this.count;
    this.product *= entry;
  }, this);
};

const obj = new Counter();
obj.execute([4, 1, , 45, 8]);

console.log(obj.count); // 4

console.log(obj.sum); // 58

console.log(obj.product); // 1440

Вывод в консоль:

4
58
1440

Здесь мы снова видим, что метод forEach() пропускает пустой элемент. thisArg передается как this внутри определения метода execute объекта Counter.

Стрелочка влевоКак работает метод from() - JavaScriptКак работает метод flatMap() - JavaScriptСтрелочка вправо

Все гайды по Javascript

Как работает метод trim() - JavaScriptКак работает метод toUpperCase() - JavaScriptКак работает метод toLowerCase() - JavaScriptКак работает метод substring() - JavaScriptКак работает метод startsWith() - JavaScriptКак работает метод split() - JavaScriptКак работает метод slice() - JavaScriptКак работает метод search() - JavaScriptКак работает метод replaceAll() - JavaScriptКак работает метод replace() - JavaScriptКак работает метод repeat() - JavaScriptКак работает метод padStart() - JavaScriptКак работает метод padEnd() - JavaScriptКак работает метод matchAll() - JavaScriptКак работает метод match() - JavaScriptКак работает метод localeCompare() - JavaScriptКак работает свойство length - JavaScriptКак работает метод lastIndexOf() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод fromCodePoint() - JavaScriptКак работает метод fromCharCode() - JavaScriptКак работает метод endsWith() - JavaScriptКак работает метод concat() - JavaScriptКак работает метод codePointAt() - JavaScriptКак работает метод charCodeAt() - JavaScriptКак работает метод charAt() - JavaScript
Итератор в JavaScript
try...catch в JavaScriptError в JavaScript
Событие wheel в JavaScriptСобытие unload в JavaScriptСобытие touch в JavaScriptСобытие submit в JavaScriptСобытие scroll в JavaScriptСобытие reset в JavaScriptМетод .preventDefault() в JavaScriptСобытие mouseover в JavaScriptСобытие mouseout в JavaScriptСобытие load в JavaScriptСобытие keyup в JavaScriptСобытие keydown в JavaScriptСобытие invalid в JavaScriptСобытие input в JavaScriptСобытийная модель Event в JavaScriptОбъект события Event в JavaScriptСобытие DOMContentLoaded в JavaScriptСобытие dblclick в JavaScriptСобытие click в JavaScriptСобытие change в JavaScriptСобытие beforeunload в JavaScript
Как работает метод some() - JavaScriptКак работает метод reverse() - JavaScriptКак работает метод reduce() - JavaScriptКак работает метод map() - JavaScriptКак работает метод isArray() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод from() - JavaScriptКак работает метод forEach() - JavaScriptКак работает метод flatMap() - JavaScriptКак работает метод flat() - JavaScriptКак работает метод findIndex() - JavaScriptКак работает метод find() - JavaScriptКак работает метод filter() - JavaScriptКак работает метод every() - JavaScriptМассивы в JavaScript
Открыть базу знаний