Что такое JavaScript forEach и для чего используется

В языке программирования JavaScript есть несколько способов перебрать массивы данных. Одним из наиболее распространенных стал метод forEach(), который позволяет поочередно получить доступ к каждому элементу и при необходимости изменить его. Используя его, вы сможете написать более лаконичный и чистый код, чем с применением простого цикла for.

Что такое JavaScript forEach

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

Метод forEach используют, если проект работает на основе ECMAScript 5 или более новой версии языка программирования. Стоит отметить, что 4-ое поколение JS уже не используется даже в любительской разработке.

Пример применения метода:

var a = ["a", "b", "c"];

a.forEach(function(entry) {

console.log(entry);

});

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

Как и другие способы работы с массивами, forEach — не единственный вариант. JavaScript -программисты для перебора массивов также используют:

• every — проверяет, удовлетворяют ли все элементы массива условию, заданному в коллбэке. Метод every возвращает true, если функция проверки возвращает истинноподобное (truthy) значение для каждого элемента массива, и false в противном случае;
• some — аналогичен предыдущему методу, но возвращает true, если функция проверки возвращает truthy хотя бы для одного элемента массива;
• filter — создает новый массив, в который входят все элементы массива, прошедшие проверку в коллбэк-функции;
• reduce — сводит массив к одному общему значению, применяя коллбэк по очереди ко всем элементам. Этот вариант используют, например, для вычисления суммы элементов.

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

Для чего используется

В JavaScript метод forEach() позволяет выполнить функцию обратного вызова по разу для всех элементов в массиве по порядку. Стоит отметить, что он не работает для удаленных и пропущенных объектов.

Синтаксис

Чтобы разобраться в особенностях синтаксиса этого метода, рассмотрим 4 простых примера:

array.forEach((currentElement) => { /* ... */ })

array.forEach(function(currentElement) { /* ... */ })

array.forEach((currentElement, index) => { /* ... */ })

array.forEach(function(currentElement, index) { /* ... */ })

array.forEach((currentElement, index, array) => { /* ... */ })

array.forEach(function(currentElement, index, array){ /* ... */ })

array.forEach((currentElement, index, array) => { /* ... */ }, thisValue)

array.forEach(function(currentElement, index, array) { /* ... */ }, thisValue)

На них представлены основные варианты написания этого метода. В зависимости от того что программист хочет использовать, он введет следующие параметры:

• callbackFunction — это функция обратного вызова, которая выполняется один раз для каждого элемента списка;
• currentElement — обязательный аргумент, который является актуальным элементом массива, обрабатываемым во время итерации;
• index — необязательный параметр, содержащий порядковый номер текущего элемента;
• array — массив, по которому forEach осуществляет проход (необязательный параметр);
• thisValue — определяет значение, используемое в качестве this при вызове коллбэка.

Примеры применения

Функция forEach может использоваться для разных задач, включая самые простые. Новичкам стоит сначала освоить сложение и умножение. Чтобы посчитать сумму чисел в массиве, нужно написать:

let sum = 0;

const numbers = [65, 44, 12, 4];

numbers.forEach(myFunction);

 

function myFunction(item) {

sum += item;

}

А для умножения элементов:

const numbers = [65, 44, 12, 4];

numbers.forEach(myFunction)

 

function myFunction(item, index, arr) {

arr[index] = item * 10;

}

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

class Counter {

constructor() {

this.sum = 0;

this.count = 0;

}

add(array) {

// Only function expressions will have its own this binding

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

Вывод

forEach — удобный способ перебрать все элементы массива. Его первым аргументом становится функция обратного вызова, а другими — currentElement, index, array. Метод будет полезен для обработки данных без разрыва и с одновременным использованием побочных эффектов.

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