Как использовать Map, Filter и Reduce в Javascript

Map, Filter и Reduce - это три основных компонента функциональности, которые появились в Javascript как часть спецификации ES6 в 2015 году.

В конечном счете, map, filter и Reduction - это просто функции, которые можно использовать в массивах. Все, что делает каждый из них, может быть достигнуто с помощью других средств, начиная от простых циклов for, до более сложных вещей, таких как вызов функций внутри циклов for. В основе этого, отображение, фильтрация и уменьшение обеспечивают действительно хорошие, краткие способы выполнения определенных действий.

Если вы хотите, чтобы звучало так, как будто вы знаете, о чем говорите, Map, Filter и Reduce являются функциями более высокого порядка (в основном это функции, которые принимают другие функции в качестве параметров).

В этом уроке будут использованы стрелочные функции. Если вы еще не научились их использовать, это не проблема, поскольку вы все еще можете писать map, filter и reduce с помощью обычного синтаксиса функций.

Хорошо, теперь это не так, поехали!

Итак, допустим, что мы строим приложение To Do (потому что миру нужно другое приложение To-Do!)

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

Хотите увидеть, как выглядит наш массив? Смотри ниже:

let tasks = [
{
  'name'     : 'Buy milk from the shop',
  'duration' : 20,
  'priority' : 1
},
{
  'name'     : 'Clean the house',
  'duration' : 120,
  'priority' : 3
},
{
  'name'     : 'Study JS functions',
  'duration' : 180,
  'priority' : 1
},
]

Теперь предположим, что нам нужен быстрый и простой способ отображения всех имен задач, но мы не заботимся о продолжительности, потому что мы просто хотим получить хороший, чистый список задач, которые необходимо выполнить. Ну, вот где мы можем использовать функцию map.

tasks.map(task => task.name)
// ["Buy milk from the shop", "Clean the house", "Study JS functions"]

Теперь давайте представим, что наше приложение To Do имеет возможность пометить каждую задачу с различным приоритетом (1 для высокого, 2 для среднего, 3 для низкого). Если бы мы хотели, чтобы в нашем приложении был раздел, показывающий только высокоприоритетные задачи, мы могли бы использовать функцию filter.

tasks.filter(task => task.priority == 1)
// [{name: "Buy milk from the shop", duration: 20, priority: 1}, {name: "Study JS functions", duration: 180, priority: 1}]

Теперь давайте представим, что часть duration каждого объекта в массиве задач выделена для приблизительного количества времени, которое, по нашему мнению, потребуется для выполнения каждой задачи. Может быть, мы хотим, чтобы в углу нашего приложения To Do был небольшой раздел, показывающий общее приблизительное время, необходимое для выполнения всех задач в нашем списке. Ну, мы могли бы просто добавить их все по одному, или использовать хорошую, чистую функцию reduce, чтобы сделать выполнить это.

tasks.map(task => task.duration).reduce((total, amount) => total + amount)
// 320

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