Метод Array.reduce() в JavaScript — мощный инструмент для обработки массивов, представленный в ECMAScript 5.1 (2011). Он позволяет последовательно обрабатывать элементы массива, накапливая результат в специальной переменной — аккумуляторе.
Как работает reduce()
В отличие от forEach, map и includes, reduce() использует аккумулятор. Обработка элементов происходит последовательно, с накоплением результата в этом аккумуляторе.
Процесс:
- reduce() принимает функцию обратного вызова (callback) и (опционально) начальное значение аккумулятора.
- Функция обратного вызова имеет два обязательных параметра: accumulator (аккумулятор) и currentValue (текущий элемент). Дополнительно, могут передаваться index (индекс элемента) и array (сам массив).
- На первой итерации, функция получает первый элемент массива и начальное значение аккумулятора (если указано). В противном случае, первый элемент используется как начальное значение, и итерация начинается со второго элемента.
- Функция возвращает обновленное значение аккумулятора.
- Это значение передается как accumulator на следующей итерации, вместе со следующим элементом.
- Процесс повторяется до обработки всех элементов.
- Результат — окончательное значение аккумулятора.
Тип данных аккумулятора может быть любым: число, строка, булево значение, объект или массив.
Примеры использования reduce()
Суммирование чисел
const numbers = [4, 10, 5, 3];
const sumNumbers = (arrayOfNumbers) => arrayOfNumbers.reduce((sum, number) => sum + number, 0);
console.log(sumNumbers(numbers)); // Выведет 22
Здесь: sumNumbers — функция, принимающая массив. arrayOfNumbers.reduce((sum, number) => sum + number, 0) вызывает reduce(): (sum, number) => sum + number — функция обратного вызова, складывающая sum и number; 0 — начальное значение sum.
Пример с console.log внутри функции обратного вызова:
const sumNumbers = (arrayOfNumbers) => arrayOfNumbers.reduce((sum, number) => {
console.log(`sum is ${sum}, number is ${number}`);
return sum + number;
}, 0);
Подсчет лайков и дизлайков
const myPosts = [
{ title: 'JavaScript is awesome', likes: 5, dislikes: 1 },
{ title: 'How reduce method works', likes: 3, dislikes: 0 },
{ title: 'Should I use ES6?', likes: 10, dislikes: 4 },
];
const postLikesAndDislikes = (posts) => posts.reduce((quantitiesOfLikes, post) => ({
likes: quantitiesOfLikes.likes + post.likes,
dislikes: quantitiesOfLikes.dislikes + post.dislikes,
}), { likes: 0, dislikes: 0 });
console.log(postLikesAndDislikes(myPosts)); // Выведет { likes: 18, dislikes: 5 }
postLikesAndDislikes подсчитывает лайки и дизлайки. { likes: 0, dislikes: 0 } — начальный объект-аккумулятор.
Создание массива заголовков
const postTitles = (posts) => posts.reduce((allTitles, post) => {
allTitles.push(post.title);
return allTitles;
}, []);
console.log(postTitles(myPosts)); // Выведет ['JavaScript is awesome', 'How reduce method works', 'Should I use ES6?']
[] — пустой массив как начальный аккумулятор.
Array.reduce() — эффективный инструмент для обработки массивов, позволяющий накапливать результаты итераций и решать широкий спектр задач.