Виталий Котов
Как работает метод reduce() - JavaScript
Автор
Метод reduce()
вызывает callback
функцию для каждого элемента массива и возвращает одно значение.
Пример
const message = ["JavaScript ", "is ", "fun."];
// функция для объединения всех строковых элементов
function joinStrings(accumulator, currentValue) {
return accumulator + currentValue;
}
// метод reduce объединяет каждый элемент строки
let joinedString = message.reduce(joinStrings);
console.log(joinedString);
// вывод в консоль: JavaScript is fun.
Синтаксис reduce()
Синтаксис метода reduce()
следующий:
arr.reduce(callback(accumulator, currentValue), initialValue);
Где arr
- это массив.
Параметры reduce()
Метод reduce()
принимает:
callback
- функцию, которая будет вызываться для каждого элемента массива (кроме первого элемента, если не указано значение
initialValue
). Принимает:
- функцию, которая будет вызываться для каждого элемента массива (кроме первого элемента, если не указано значение
accumulator
- аккумулятор, накапливающий возвращаемые значения функции
callback
.
- аккумулятор, накапливающий возвращаемые значения функции
currentValue
- текущий обрабатываемый элемент в массиве.
InitialValue
(необязательно) — значение, которое будет передано в callback() при первом вызове. Если он не указан, первый элемент действует какaccumulator
при первом вызове, иcallback()
выполняться для него не будет.
Примечание: Вызов метода
reduce()
для пустого массива без начального значения вернётTypeError
.
Возвращаемое значение reduce()
Возвращает одно значение, полученное после обработки массива.
Примечания:
reduce()
вызывает заданную функцию для каждого элемента массива слева направо.reduce()
не изменяет исходный массив.- Почти всегда безопаснее указать
initialValue
.
Примеры
Пример 1: Сумма всех элементов массива
const numbers = [1, 2, 3, 4, 5, 6];
function sum_reducer(accumulator, currentValue) {
return accumulator + currentValue;
}
let sum = numbers.reduce(sum_reducer);
console.log(sum); // 21
// используем стрелочную функцию
let summation = numbers.reduce(
(accumulator, currentValue) => accumulator + currentValue
);
console.log(summation); // 21
Вывод в консоль:
21
21
Пример 2: Вычитание чисел в массиве
const numbers = [1800, 50, 300, 20, 100];
// вычитает все числа из первого числа
// так как первый элемент яляется аккумулятором
// 1800 - 50 - 300 - 20 - 100
let difference = numbers.reduce(
(accumulator, currentValue) => accumulator - currentValue
);
console.log(difference); // 1330
const expenses = [1800, 2000, 3000, 5000, 500];
const salary = 15000;
// функция, которая вычитает все элементы массива из заданного числа
// 15000 - 1800 - 2000 - 3000 - 5000 - 500
let remaining = expenses.reduce(
(accumulator, currentValue) => accumulator - currentValue,
salary
);
console.log(remaining); // 2700
Вывод в консоль:
1330
2700
Этот пример ясно передаёт разницу между указанием initialValue и его отсутствием.
Пример 3: Удаление повторяющихся элементов из массива
let ageGroup = [18, 21, 1, 1, 51, 18, 21, 5, 18, 7, 10];
let uniqueAgeGroup = ageGroup.reduce(function (accumulator, currentValue) {
if (accumulator.indexOf(currentValue) === -1) {
accumulator.push(currentValue);
}
return accumulator;
}, []);
console.log(uniqueAgeGroup); // [ 18, 21, 1, 51, 5, 7, 10 ]
Вывод в консоль:
[18, 21, 1, 51, 5, 7, 10];
Пример 4: Группировка объектов по свойству
let people = [
{ name: "John", age: 21 },
{ name: "Oliver", age: 55 },
{ name: "Michael", age: 55 },
{ name: "Dwight", age: 19 },
{ name: "Oscar", age: 21 },
{ name: "Kevin", age: 55 },
];
function groupBy(objectArray, property) {
return objectArray.reduce(function (accumulator, currentObject) {
let key = currentObject[property];
if (!accumulator[key]) {
accumulator[key] = [];
}
accumulator[key].push(currentObject);
return accumulator;
}, {});
}
let groupedPeople = groupBy(people, "age");
console.log(groupedPeople);
Вывод в консоль:
{
'19': [ { name: 'Dwight', age: 19 } ],
'21': [ { name: 'John', age: 21 }, { name: 'Oscar', age: 21 } ],
'55': [
{ name: 'Oliver', age: 55 },
{ name: 'Michael', age: 55 },
{ name: 'Kevin', age: 55 }
]
}
Все гайды по 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