Разбиваем на итерацию
Array.prototype.reduce JavaScript может оказаться сложной функцией для понимания! Когда вы просматриваете документацию по MDN, вы сразу видите функцию-редуктор, которая принимает аккумулятор и currentValue и суммирует их. Примерно как на изображении ниже:
На секунду отбросим хитрую терминологию. Когда следует использовать сокращение?
Используйте сокращение, если у вас есть массив элементов, которые вы хотите объединить в одно значение или объект. Прекрасным примером этого является сумма, как вы видели выше! У нас есть несколько чисел, которые мы хотим объединить (в данном случае сложением), чтобы получить одно число.
Код для такого сокращения может выглядеть так:
[1,3,6].reduce((accumulator, currentValue) => {
return accumulator + currentValue;
});
Ах, вот оно снова в коде! Это слово: аккумулятор. Что это значит?
Проще говоря, аккумулятор - это значение, возвращаемое после каждой итерации функции. Давайте разберем это визуально по итерациям:
В первой итерации мы начинаем с аккумулятора, установленного на 1. По умолчанию в качестве начального значения выбирается первый элемент массива. Вы можете видеть, что currentValue имеет значение 3. Поскольку первый элемент использовался в качестве начального значения, второй элемент в нашем массиве становится currentValue для первой итерации.
Первая итерация суммирует 3 + 1, возвращая 4. Это возвращаемое значение становится аккумулятором для второй итерации. Вторая итерация также перемещается вперед по массиву, чтобы захватить следующий элемент и установить его как currentValue. Вторая итерация суммирует 6 + 4, возвращая 10. Если после этого была сделана еще одна итерация, следующим аккумулятором будет 10. Это будет продолжаться даже в гораздо большем массиве. Однако, поскольку это последний элемент в массиве, это просто последнее уменьшенное значение.
Другой пример использования reduce - найти наибольшее число в массиве. В этом случае вместо использования оператора сложения мы будем сравнивать два числа и возвращать большее из них для аккумулятора после каждой итерации. Посмотрим, как это может выглядеть в коде:
[1,3,6].reduce((accumulator, currentValue) => {
return accumulator > currentValue ? accumulator : currentValue;
});
На этом веселье тоже не заканчивается, есть множество отличных примеров использования reduce, чтобы начать с массива и уменьшить до объекта!
Хотите сами погрузиться в упражнения по коду? Ознакомьтесь с этим учебником по коду в браузере по Array Reduce!
Кроме того, вот видео с упражнениями в классе ChainShot:
Для получения обучающих материалов и последних обновлений подписывайтесь на нас в Twitter! Или посетите www.chainshot.com.