Использование reduce () с map (), sort (), filter () и обратным

Вы готовы дружить сreduce? Я знаю, это страшно… Но надо же.

reduce - один расплывчатый и пугающий метод, в отличие от filter, map и forEach.

Проблема с reduce: зачем мне его использовать ?!

Сегодня я расскажу вам, что такое reduce, как его использовать и почему вам следует его использовать.

Я хочу, по крайней мере, познакомить вас с тем, что можно делать с reduce.

Что такое reduce ()?

Посмотрите на эту классную картинку ниже. У них есть отличный редуктор!

Поняли шутку? Нет? Мне очень жаль ... 🙄

Он называется reduce , потому что он сокращает массив из нескольких значений до одного значения. - @ Майк Кронин

Не волнуйтесь, если это еще не имеет смысла :)

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

Вы знаете, что хорошего в reduce? Это очень универсально! С ним можно делать все что угодно!

Давайте посмотрим на несколько примеров того, что вы можете делать с reduce:

1. Просуммируйте все числа в массиве:

Заменим for loop на reduce!

Давайте проделаем тот же процесс, но с for loop:

Теперь легче понять, правда?

Вернемся к нашему reduce.

  1. 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.

Спасибо за чтение :)

Учить больше