Виталий Котов
Как работает метод 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
.
Все гайды по 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
Событие 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
.textContent в JavaScript.style в JavaScript.setProperty() в JavaScript.scrollTo() в JavaScript.scrollIntoView() в JavaScript.scrollBy() в JavaScript.removeProperty() в JavaScript.removeEventListener() в JavaScript.querySelectorAll() в JavaScript.querySelector() в JavaScript.outerHTML в JavaScript.innerText в JavaScriptв JavaScript.hidden в JavaScript.getPropertyValue() в JavaScript.getElementsByTagName() в JavaScript.getElementsByClassName() в JavaScript.getAttribute() в JavaScript.focus() в JavaScriptЭлемент в JavaScript.dataset в JavaScript.closest() в JavaScript.classList в JavaScript.blur() в JavaScript.addEventListener() в JavaScript
Объект WeakSet в JavaScriptОбъект TypedArray в JavaScriptОбъект SharedArrayBuffer в JavaScriptОбъект Set в JavaScriptОбъект в JavaScriptОбъект Map в JavaScriptfunction в JavaScriptОбъект DataView в JavaScriptОбъект WeakMap в JavaScriptОбъект Atomics в JavaScriptМассивы в JavaScriptОбъект ArrayBuffer в JavaScript
window.print() в JavaScriptwindow.open() в JavaScriptwindow.navigator в JavaScriptwindow.location в JavaScriptwindow.history в JavaScriptURLSearchParams в JavaScriptsetTimeout() в JavaScriptsetInterval() в JavaScriptsessionStorage в JavaScriptqueueMicrotask() в JavaScriptprompt() в JavaScriptPerformance в JavaScriptwindow.matchMedia в JavaScriptlocalStorage в JavaScriptGeolocation API в JavaScriptFormData в JavaScriptfetch() в JavaScriptDOM в JavaScriptconsole.log() в JavaScriptconfirm() в JavaScriptclearTimeout() в JavaScriptclearInterval() в JavaScriptalert() в JavaScriptBOM в 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