Изучение функции reduce часть 1

Не буду врать.
Я с трудом справляюсь с reduce, даже сейчас!
Но она очень мощная, и ее стоит изучить.

Что такое reduce?

функция, используемая для массивов/объектов
reduce перебирает все элементы
дает один результат

Давайте начнем с базового (и слишком часто используемого!) применения:

Нахождение общего…

array = [3, 12, 14, 23, 2, 3, 2, 13, 0, 2, 234, 213]

const total = array.reduce((previousValue,currentValue,indexNumber,array)=> {
code here
},initialValue)

Reduce принимает 4 аргумента, в данном примере нам понадобятся только первые два. Начальное значение будет равно нулю.

const total = array.reduce((previousValue,currentValue)=>{
code here
},0)

Совет по рефакторингу

Чтобы сделать его более удобочитаемым, я превращу 2 аргумента в функцию обратного вызова. Это иногда называют «редуктором».

const total = array.reduce(reducerTotal, 0)

function reducerTotal(previousValue, currentValue) {
  console.log('Previous Value:', previousValue)
  console.log('CurrentValue:', currentValue)
  console.log('------')
}

Посмотрите, что происходит, измените 0… что происходит?

В настоящее время цикл выполняется правильно, но мы не суммируем числа.

Что бы вы ни вернули, это будет предыдущее значение.

Вот почему мы получили ‘undefined’, так как не было возврата функции.

Попробуйте вернуть что-нибудь глупое, например «I love Reduce», и посмотрите, что теперь произойдет!

Теперь давайте действительно добавим, чтобы создать нашу общую сумму…

const total = array.reduce(reducerTotal, 0)

function reducerTotal(previousValue, currentValue) {
  return previousValue + currentValue
}
console.log(total)

Да!

Вызовы!

1. Используйте этот редуктор и вычислите среднее значение (mean).

2. Попробуйте переписать все вышеописанные действия в одну строку кода, возможно, с помощью функции стрелки!

3. Создайте новый редуктор, который принимает общую сумму денег, скажем, £1000, и ваш массив — суммы денег, которые вы тратите. Уменьшите это, чтобы узнать, сколько у вас осталось…

Прокрутите вниз для ответов (пожалуйста, попробуйте прежде!)
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

Возможно, есть другие (и лучшие способы!) Пожалуйста, поделитесь ниже!!!

const oneLiner = array.reduce((prev, curr) => prev + curr)
console.log(oneLiner)

const average = array.reduce(reducerTotal, 0) / array.length

function reducerTotal(previousValue, currentValue) {
  return previousValue + currentValue
}

console.log(average)

spendings = [3, 12, 14, 23, 2, 3, 2, 13, 0, 2, 234, 213]
const money = 1000

const howMuchDoIHaveLeft = spendings.reduce(reducerTotal, money)

function reducerTotal(previousValue, currentValue) {
  return previousValue - currentValue
}

console.log(howMuchDoIHaveLeft)

Вы также можете расширить эту задачу, добавив валюту, округление до 2 знаков после запятой, даже предупреждающую проверку, если ваши деньги опускаются ниже 0