#
Reduce
Метод reduce() в JavaScript — один из самых мощных и гибких методов для работы с массивами. Он используется для последовательного применения функции к элементам массива с целью свести его к единому значению (например, сумме, произведению или объекту).
Синтаксис: array.reduce(callback(accumulator, currentValue, currentIndex, array), initialValue
callback— функция, которая выполняется для каждого элемента массива. Эта функция принимает следующие аргументы:accumulator— аккумулятор, который накапливает результат. Он и будет тем итоговым значением, которое вернетreduce().currentValue— текущий элемент массива, который обрабатывается на данном шаге.currentIndex(необязательный) — индекс текущего элемента (начиная с0или с1, если переданinitialValue).array(необязательный) — исходный массив, к которому применяетсяreduce().
initialValue(необязательный) — начальное значение аккумулятора. Если не указано, тоaccumulatorпринимает значение первого элемента массива, а перебор начинается со второго элемента.
#
Возвращаемое значение:
Метод reduce() возвращает одно итоговое значение, которое получается в результате последовательного применения функции-обработчика ко всем элементам массива.
#
Пример использования reduce():
Сумма всех элементов массива
const numbers = [1, 2, 3, 4, 5];
// Пример с явным указанием начального значения (initialValue = 0)
const sum = numbers.reduce((accumulator, currentValue) => {
return accumulator + currentValue;
}, 0);
console.log(sum); // 15
accumulatorнакапливает сумму элементов.currentValue— текущий элемент массива.- В каждой итерации результат накапливается и сохраняется в аккумулятор.
Пример без начального значения:
const numbers = [1, 2, 3, 4, 5];
// Пример без начального значения, тогда accumulator = 1, и начиная со второго элемента массива
const sum = numbers.reduce(
(accumulator, currentValue) => accumulator + currentValue
);
console.log(sum); // 15
В данном случае, если initialValue не указано, reduce() начинает работу с первого элемента массива как с начального значения, и второй элемент становится первым элементом для обработки в функции.
Нахождение максимального значения:
const numbers = [1, 3, 5, 7, 2, 9];
// Используем reduce для нахождения максимального значения
const max = numbers.reduce((accumulator, currentValue) => {
return currentValue > accumulator ? currentValue : accumulator;
}, 0);
console.log(max); // 9
Здесь аккумулятор содержит максимальное значение, которое обновляется, если текущий элемент больше, чем текущее максимальное значение.
Подсчет количества вхождений элементов:
const fruits = ["apple", "banana", "apple", "orange", "banana", "apple"];
const count = fruits.reduce((accumulator, fruit) => {
if (accumulator[fruit]) {
accumulator[fruit] += 1;
} else {
accumulator[fruit] = 1;
}
return accumulator;
}, {});
console.log(count);
// Вывод: { apple: 3, banana: 2, orange: 1 }
Объединение объектов в один:
const users = [
{ name: "John", age: 30 },
{ name: "Jane", age: 25 },
{ name: "Jack", age: 40 },
];
const combined = users.reduce((accumulator, user) => {
return { ...accumulator, [user.name]: user.age };
}, {});
console.log(combined);
// Вывод: { John: 30, Jane: 25, Jack: 40 }
Плоское преобразование массива массивов (флэттенинг):
const nestedArrays = [
[1, 2],
[3, 4],
[5, 6],
];
const flatArray = nestedArrays.reduce((accumulator, currentArray) => {
return accumulator.concat(currentArray);
}, []);
console.log(flatArray); // [1, 2, 3, 4, 5, 6]
Группировка элементов массива по какому-то критерию:
const people = [
{ name: "Alice", age: 21 },
{ name: "Bob", age: 25 },
{ name: "Charlie", age: 21 },
{ name: "David", age: 25 },
];
const groupedByAge = people.reduce((accumulator, person) => {
const age = person.age;
if (!accumulator[age]) {
accumulator[age] = [];
}
accumulator[age].push(person.name);
return accumulator;
}, {});
console.log(groupedByAge);
// Вывод: { '21': ['Alice', 'Charlie'], '25': ['Bob', 'David'] }
#
Заключение
Метод reduce() — мощный инструмент для трансформации массивов и вычисления сложных итоговых значений. Он гибок и может быть использован для решения различных задач, таких как суммирование, группировка, слияние данных, подсчет вхождений и многое другое. Однако его использование требует понимания того, как accumulator обновляется на каждом шаге, и умения правильно работать с функцией обратного вызова.
#
Послесловие
Также можете ознакомиться аналогичным методом reduceRight