Использование reduce () с map (), sort (), filter () и обратным
Вы готовы дружить сreduce
? Я знаю, это страшно… Но надо же.
reduce
- один расплывчатый и пугающий метод, в отличие от filter
, map
и forEach
.
Проблема с reduce
: зачем мне его использовать ?!
Сегодня я расскажу вам, что такое reduce
, как его использовать и почему вам следует его использовать.
Я хочу, по крайней мере, познакомить вас с тем, что можно делать с reduce
.
Что такое reduce ()?
Посмотрите на эту классную картинку ниже. У них есть отличный редуктор!
Поняли шутку? Нет? Мне очень жаль ... 🙄
Он называется
reduce
, потому что он сокращает массив из нескольких значений до одного значения. - @ Майк Кронин
Не волнуйтесь, если это еще не имеет смысла :)
Как работает reduce () ?!
Вы знаете, что хорошего в reduce
? Это очень универсально! С ним можно делать все что угодно!
Давайте посмотрим на несколько примеров того, что вы можете делать с reduce
:
1. Просуммируйте все числа в массиве:
Заменим for loop
на reduce
!
Давайте проделаем тот же процесс, но с for loop
:
Теперь легче понять, правда?
Вернемся к нашему reduce
.
reduce
назначьтеstartingValue = 0
accumalator
в качестве начального значения.
2. reduce
переберите каждый элемент и примените функцию обратного вызова.
3. Функция обратного вызова добавляет текущий номер в accumalator
и возвращает результат.
4. Возвращаемый результат будет accumalator
в следующей итерации.
5. По завершении цикла reduce
возвращает accumulator
.
Давайте добавим это console.log(“accumalator:”, accumulator)
в нашу функцию обратного вызова и посмотрим, что происходит за кулисами 😉.
Вот сценарий в псевдокоде:
Первая итерация: (acc = 0, element = 1)
acc = acc + element
return acc // 1
Вторая итерация :( acc = 1, element = 2)
acc = acc + элемент
return acc // 3
……………..
Заключительная итерация: (acc = 10, element = 5)
acc = acc + элемент
возврат в соотв. // 15
Вы думаете, это слишком долго? позвольте мне сделать фокус… ПУФ! 😎
[1,2,3,4,5].reduce((acc, num) => acc + num,0)
Output: 15
2. Получите наибольшее число внутри массива.
Хотите найти наибольшее число? Легкий!
Заменим Math.max
на reduce
!
maxNumber
начальное значение равно 0, если num
больше, чем maxNumber
, присвойте его maxNumber
.
output: 232
Более короткий синтаксис.
БОНУСНЫЙ СОВЕТ: если вы не укажете reduce
начальное значение, в качестве начального значения будет использоваться первый элемент массива 😉
3. Отфильтруйте массив:
Как я уже сказал, с reduce
возможно все.
Заменим .filter
на .reduce
!
В этом примере я передал startingValue
как пустой массив, а не число!
Это потому, что я фильтрую все числа меньше 50. Если число соответствует условию, оно будет помещено в accumulator
(массив).
4. Сопоставьте массив и умножьте каждое число:
Заменим .map
на .reduce
!
Дополнительный совет: причина, по которой я использовал
concat
вместоpush
:
.concat
вернет массив:
console.log ([]. concat (1,2,3,4,5)) // вывод [1,2,3,4,5]
while
.push
вернет длину массива:
console.log ([]. push (1,2,3,4,5)) // вывод 5
Также
.unshift
вернет длину массива:
console.log ([]. unshift (1,2,3,4,5)) // вывод 5
5. Переверните массив:
Давайте заменим .reverse
на .reduce
!
Мне пришлось использовать для возврата acc
в новой строке, потому что return acc.unshift
вернет длину массива, а не фактический массив.
6. Отсортируйте массив:
Заменим .sort
на .reduce
!
Условие if используется для остановки проверки следующего элемента в последней итерации и добавления наибольшего числа в массиве.
7. Постройте атомную бомбу:
Ну не совсем все😅
Почему нам нужно использовать Reduce ()
reduce
- это очень общий метод, и вы можете поэкспериментировать с ним и создать все, что вы можете придумать.
Вы можете заменить большинство методов массива на reduce
.
Например, я хотел взять этот массив объектов и превратить его в объект объектов!
Вы хотите массив объектов и внутри каждого объекта другой объект?
Вы называете это! С reduce
возможно все!
Хотите узнать средний возраст? КАБУМ!
Хотите сгладить 2D-массив? Ну вот!
Надеюсь, это помогло вам понять, что можно делать с reduce
.
Спасибо за чтение :)