Что такое 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.
-
Уверенно работать с JavaScript
-
Создавать архитектуру приложения
-
Взаимодействовать с сервером
-
Создавать SPA приложения
-
Использовать HTML5 API