Как использовать метод Array forEach в JavaScript

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

Обычно, когда вы хотите выполнить функцию для каждого элемента массива, вы используете оператор цикла for.

Например, следующий код показывает каждый элемент массива для консоли:

let ranks = ['A', 'B', 'C'];
for(let i = 0; i < ranks.length; i++) {
    console.log(ranks[i]);
}

Выход:

A
B
C

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

В следующем коде используется метод forEach(), который эквивалентен приведенному выше коду:

let ranks = ['A', 'B', 'C'];

ranks.forEach(function(e) {
    console.log(e);
});

Выход:

A
B
C

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

Синтаксис:

Array.forEach(callback [, thisArg]);

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

1) callback

Функция callback, которую метод forEach() использует для выполнения каждого элемента, принимает следующие аргументы:

• currentElement : текущий обрабатываемый элемент массива.
• index : индекс currentElement в массиве.
• array : массив, вызывающий метод forEach().

index и array необязательны.

2) thisArg

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

Обратите внимание, что функция forEach() возвращает undefined значение, поэтому она не является цепочкой, как другие итерационные методы: filter(), map(), some(), every(), и sort().

Одним из ограничений метода по сравнению с циклом for является то, что вы не можете использовать операторы break или continue для управления циклом.

Чтобы завершить цикл в методе forEach(), вы должны сгенерировать исключение внутри функции callback.

Пример

Давайте рассмотрим пример, который использует contextObject.

Ниже показана функция конструктора Counter :

function Counter() {
    this.count = 0;
    let self = this;
    return {
        increase: function() {
            self.count++;
        },
        current: function() {
            return self.count;
        },
        reset: function() {
            self.count = 0;
        }
    }
}

В этом примере показано, как передать объект счетчика в метод forEach().

var counter = new Counter();
var numbers = [1, 2, 3];
var sum = 0;
numbers.forEach(function(e) {
    sum += e;
    this.increase();
}, counter);

console.log(sum); // 6
console.log(counter.current()); // 3

Как это работает.

• Сначала создайте новый объект Counter.
• Затем определите массив из трех чисел.
• Затем объявите переменную sum и присвойте ей нулевое значение.
• После этого вызовите метод forEach() для массива numbers. В функции callback добавьте элемент в переменную sum и вызовите метод increase() объекта counter. Обратите внимание, что объект counter называется this внутри функции callback.
• Наконец, зарегистрируйте значение суммы и текущее значение счетчика в веб-консоли.