Карта, Фильтр и Уменьшение - три мощных инструмента функционального программирования.
Понимание карты
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]
Вы можете создать еще массу примеров для этих трех функций, и настоящее волшебство придет, когда вы научитесь использовать их вместе.