Привет 👋, давайте узнаем, как работает Array.prototype.reduce()!

Просто чтобы облегчить нам изучение Array.prototype.reduce, вот

Краткий обзор Array.prototype.map

Array.prototype.map() перебирает каждый элемент массива и возвращает новый массив. Позволяя вам одновременно изменять текущий элемент массива.

Вот очень простой вариант использования:

// Imagine we fetched this array from a very interesting api!
const bikes = [
  {id: 1, color: 'red'},
  {id: 2, color: 'blue'},
  {id: 3, color: 'orange'}
];
// We want to change all of the bikes color to `purple`
const purpleBikes = bikes.map((bike) => {
  bike.color = 'purple';
  return bike;
});
console.log(purpleBikes);
// Array(5) [
//   {id: 1, color: 'purple'},
//   {id: 2, color: 'purple'},
//   {id: 3, color: 'purple'}
// ]

Как мы видим, функция .map перебирает каждый элемент массива и позволяет нам решить, что мы хотим вернуть в качестве элемента возвращаемого массива.

Понимание Array.prototype.reduce()

Функция .reduce похожа на .map тем, что она также выполняет итерацию по каждому элементу массива.

Однако .reduce позволяет вам решить, какой тип объекта вы хотите вернуть.

Это означает, что вместо массива можно вернуть число, строку, массив или объект.

Вот банальный пример,

Мистер М. просит нас выяснить, сколько велосипедов каждого цвета есть у него в запасе(он хочет, чтобы это выглядело так:{colorA: x, colorB: y, …}).

// Again, our super awesome dataset 🚀
const bikes = [
  {id: 1, color: 'red'},
  {id: 2, color: 'blue'},
  {id: 3, color: 'red'},
  {id: 4, color: 'blue'},
  {id: 5, color: 'orange'},
  {id: 6, color: 'blue'}
];
// Let's figure out how many bikes of each colors we have.
const colorsCount = bikes.reduce((acc, bike) => {
  if (!acc[bike.color])
    acc[bike.color] = 0;
  acc[bike.color] += 1;
  return acc;
}, {});
console.log(colorsCount);
// Object() {
//   red: 2,
//   blue: 3,
//   orange: 1
// }

Форма .reduce выглядит следующим образом:

array.reduce((acc, item) => {
  // mutate or not 'acc'...
  return acc;
}, [initial_value]);
  • acc: это совокупность всех return acc во время «цикла» .reduce.
    Это также то, что возвращает .reduce;
  • item:соответствует текущему обрабатываемому элементу в массиве (аналогично параметру bike нашей ранее объявленной функции .map);
  • return acc:функция обратного вызова внутри .reduce должна что-то вернуть, чтобы обновить acc для следующей итерации массива.
  • [initial_value]: представляет начальное значение объекта acc. Вы можете заменить [initial_value] на ‘’ , {} , [] , 0 и т. д.
    Обратите внимание: если вы введете {}, это потому, что вы хотите, чтобы .reduce возвращал объект. , [] для массива, ‘’ для строки, 0 для числа и т. д.

Прежде чем уйти 🚀

Вы должны знать, что для .map, .reduce и т. д. для функции обратного вызова также доступен параметр index, который представляет индекс позицию текущего обрабатываемого элемента.

array.map((item, index) => {...});
array.reduce((acc, item, index) => {...}, [initial_value]);