О методе .reduce

Привет, я Ханна.

Я начинающий кодер, который учится в процессе написания статей.

Любой конструктивный вклад или разъяснения приветствуются 🙂

Что делает метод .reduce?

Метод .reduce принимает массив и выполняет обратный вызов функции reducer, написанной пользователем, для каждого элемента массива. Конечным результатом метода .reduce является одно значение. Это значение может быть целым числом, строкой, объектом и т.д.

Метод .reduce является неразрушающим для исходного массива.

Как построить функцию .reduce

Параметры

  1. Функция обратного вызова
    Это функция редуктора, предоставленная пользователем.

  2. Начальное значение (необязательно)
    Это наша начальная точка.

Затем мы можем сформулировать основную структуру нашего метода .reduce, как показано ниже:

array.reduce( () = > {

}, 0)
Вход в полноэкранный режим Выход из полноэкранного режима

Функция стрелки станет пользовательской функцией обратного вызова, а начальное значение мы установили равным 0.

Подробнее о функции обратного вызова

Функция обратного вызова принимает 4 параметра.

Аккумулятор — (требуется)
Это значение, до которого мы хотим уменьшить наш массив.
В приведенном выше коде мы хотим найти общее количество пойманной рыбы.

Текущее значение — (требуется)
Элемент массива, по которому мы сейчас выполняем цикл. Для приведенного выше массива мы хотим просмотреть каждую отдельную рыбу.

Я буду использовать следующий массив, чтобы продемонстрировать работу метода .reduce. С помощью этого массива я хочу найти общее количество пойманной рыбы.

let fish= [
  {name: 'Halibut', amount: 100},
  {name: 'Pacific Cod', amount: 10},
  {name: 'Yellow Irish Lord', amount:14},
  {name: 'Rougheye', amount: 22}
]
Вход в полноэкранный режим Выйти из полноэкранного режима

Начало нашей функции будет выглядеть следующим образом:

let totalFish = fish.reduce((total, fish) => {

}, 0)
Вход в полноэкранный режим Выход из полноэкранного режима

Текущий индекс — (необязательно)
Это текущий индекс текущего значения в функции.

Массив — (необязательно)
Это массив, по которому мы выполняем итерацию. В приведенном выше примере это будет массив рыбы.

let num1 = fish.reduce((total, fish, index, array) => {

}, 0)
Войти в полноэкранный режим Выйти из полноэкранного режима

Обычно, когда мы сталкиваемся с функцией .reduce, мы видим только необходимые параметры (аккумулятор и текущее значение). Дополнительные параметры мы видим изредка, по мере необходимости.

Возврат

Это значение, которое мы хотим получить по завершении работы функции reducer над всем массивом.
Вы должны вернуть что-то, чтобы функция .reduce работала.

let totalFish = fish.reduce((total, fish) => {
  return total + fish.amount
}, 0)
Вход в полноэкранный режим Выход из полноэкранного режима

Что происходит в нашем коде?

Первый цикл — Наше общее количество (т.е. аккумулятор) равно 0, что соответствует нашему начальному значению. Наша сумма рыбы равна 100.

Второй цикл — Наш итог равен 100, что является суммой нашего начального значения + предыдущее количество рыбы. Общее количество рыбы равно 10.

Третий цикл — Наш итог равен 110, то есть сумма итога второго цикла + предыдущее количество рыбы. Общее количество рыбы равно 14.

Четвертая петля — Наш итог равен 124, что является суммой итога третьей петли + предыдущее количество рыбы. Наше количество рыбы равно 22.

Окончательное значение — Наш итог равен 146, что является суммой итога четвертого цикла + предыдущее количество рыбы. Мы завершили итерацию.

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

Подробнее о начальном значении

Что произойдет, если мы не зададим начальное значение?

Наш метод numbers.reduce действует так, как и ожидалось. Мы ожидаем, что наша функция возьмет каждое число в массиве и умножит его на 3, чтобы получить конечное значение 183.

Наш метод numbers2.reduce действует не так, как ожидалось. Поскольку мы не задали начальное значение, метод reduce устанавливает итоговое значение как значение по адресу index[0], в данном случае 5, и наше число начинается с 11 для первой итерации. Мы не умножаем 5 на 3, поэтому наше ожидаемое значение на 10 меньше ожидаемого.

Важно установить начальное значение, чтобы избежать ошибок.

Возвращение объекта


Выше у нас есть массив с различными пойманными рыбами, мы хотим вести подсчет этих рыб и возвращать его в виде объекта.

Написание нашей функции редуктора
Наш аккумулятор — это наш подсчет, наше текущее значение — это наша рыба.
Наш оператор if утверждает, что если текущая рыба не находится в нашем объекте, мы добавим рыбу в объект со значением подсчета 1.
Иначе, если наша текущая рыба находится в нашем объекте, мы увеличим значение подсчета на 1.
Затем мы возвращаем значение tally.
Очень важно не забыть вернуть значение tally, чтобы функция работала.

Вызов функции reducer
Мы устанавливаем метод .reduce на переменную tallyFish.
Затем мы вызываем метод .reduce на массиве fish, первым параметром которого является наша функция reducer, а вторым параметром (начальным значением) — пустой объект.

Результат
tally (наш аккумулятор) обновляется через каждую итерацию нашего массива. Когда мы console.log нашей переменной, tallyFish, мы видим конечный результат.

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

Ресурсы

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce
https://www.youtube.com/watch?v=s1XVfm5mIuU
https://egghead.io/lessons/javascript-reduce-an-array-into-a-single-object

Оцените статью
Procodings.ru
Добавить комментарий