Карта, Фильтр и Уменьшение - три мощных инструмента функционального программирования.

Понимание карты

map возвращает новый массив каждого элемента в массиве, запущенном через функцию. Это делает его особенно полезным для перебора массивов и их изменения. Это примерно эквивалентно следующему:

const map = (array, fn)=>{
  let returned = []
  for(let [index, item] of array)
    returned.push(fn(item, index))
  return returned
}

Использование карты для преобразования значения

Один из наиболее распространенных вариантов использования карты - это преобразование элементов в другое значение.

[1, 2, 3, 4, 5, 6, 7, 8].map(x => x * 2)
=> [2, 4, 6, 8, 10, 12, 14, 16]

Использование карты для извлечения собственности

Другой распространенный вариант использования карты - извлечение значений. Если у вас есть массив объектов, вы можете map значений.

[{count: 6}, {count: 2}, {count: 1}].map(x => x.count)
=> [6, 2, 1]

Понимание фильтра

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

const map = (array, fn)=>{
  let returned = []
  for(let [index, item] of array)
    if (fn(item, index))
      returned.push(item)
  return returned
}

Использование фильтра для удаления нулевых значений

Чаще всего фильтр используется для удаления элементов из списка, которых там не должно быть.

[1, 2, null, 3, 4].filter(x=>x !== null)
=> [1, 2, 3, 4]

Использование фильтра для запроса в массиве

Другой распространенный вариант использования - запрос списка элементов, соответствующих функции поиска. Он находит предметы, где userId равно 1.

[{userId: 1}, {userId: 2}, {userId: 1}].filter(x=>x.userId === 1)
=> [{userId: 1}, {userId: 1}]

Понимание Reduce

Уменьшить сложнее всего для понимания из этих трех функций. Он выполняется аналогично map, но переносит значение от каждого элемента в массиве к следующему. Это примерно эквивалентно следующему:

const map = (array, fn, acc)=>{
  for(let [index, item] of array)
    acc = fn(acc, item, index)
  return acc
}

Есть несколько отличий в реализации от реальной версии, но это поможет нам в большинстве случаев. Если вы хотите узнать больше, есть отличная статья на MDN о сокращении.

Использование элементов сокращения до суммы

Самый распространенный пример, который вы увидите, - это суммирование массива элементов.

[1, 2, 3, 4, 5].reduce((acc, item)=>acc + item, 0)
=> 15

Использование уменьшения для удаления дубликатов

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

[1, 2, 4, 2].reduce((acc, item)=>{
  return acc.indexOf(item) === -1? [...acc, item] : acc
}, [])
=> [1, 2, 4]

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