Array.reduce() в JavaScript: Полное руководство

Метод Array.reduce() в JavaScript — мощный инструмент для обработки массивов, представленный в ECMAScript 5.1 (2011). Он позволяет последовательно обрабатывать элементы массива, накапливая результат в специальной переменной — аккумуляторе.

Как работает reduce()

В отличие от forEach, map и includes, reduce() использует аккумулятор. Обработка элементов происходит последовательно, с накоплением результата в этом аккумуляторе.

Процесс:

  1. reduce() принимает функцию обратного вызова (callback) и (опционально) начальное значение аккумулятора.
  2. Функция обратного вызова имеет два обязательных параметра: accumulator (аккумулятор) и currentValue (текущий элемент). Дополнительно, могут передаваться index (индекс элемента) и array (сам массив).
  3. На первой итерации, функция получает первый элемент массива и начальное значение аккумулятора (если указано). В противном случае, первый элемент используется как начальное значение, и итерация начинается со второго элемента.
  4. Функция возвращает обновленное значение аккумулятора.
  5. Это значение передается как accumulator на следующей итерации, вместе со следующим элементом.
  6. Процесс повторяется до обработки всех элементов.
  7. Результат — окончательное значение аккумулятора.

Тип данных аккумулятора может быть любым: число, строка, булево значение, объект или массив.

Примеры использования 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() — эффективный инструмент для обработки массивов, позволяющий накапливать результаты итераций и решать широкий спектр задач.

Что будем искать? Например,программа