Как использовать карту, фильтр и уменьшение.

В этом руководстве будут рассмотрены 3 наиболее важные функции Javascript, которые жизненно важны для функционального программирования, а именно:

  • Метод массива .map()
  • Метод массива .filter()
  • Метод массива .reduce()

Но сначала, что такое функциональное программирование??

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

Метод массива .map()

Массив. Метод map() вызывается для существующего массива и возвращает новый массив на основе того, что было передано в качестве аргументов.

Давайте посмотрим на следующий пример массива.

city ​​— наш начальный массив, и мы хотим получить новый массив, который дает длину каждого элемента в массиве.

Используя карту, мы делаем это

Сначала мы вызываем .map() для нашего массива, а затем передаем стрелочную функцию в качестве аргумента.

В качестве аргумента передается функция city => city.length.

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

Новый массив length_of_city_names

будет [ 8, 7, 5, 6, 11, 10 ].

Как видите, функция карты возвращает новый массив, а не модифицирует существующий массив.

Давайте посмотрим на другой пример. Можете ли вы предположить, каким будет решение?

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

map() также абстрагируется от деталей, таких как инициализация и увеличение счетчиков, найденных в циклах.

2. Метод .filter() массива

Метод filter() Javascript ведет себя так же, как и метод map в этом случае.

  • Он вызывается для нового массива
  • В качестве аргумента принимает функцию
  • Он дает новый массив
  • Не изменяет исходный массив

Как звучит название, метод filter действует как фильтр для нового массива, и только элементы в массиве, которые проходят фильтр, передаются в новый массив.

Рассмотрим пример, который мы использовали ранее.

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

Аргумент представляет собой стрелочную функцию, которая проверяет, меньше ли длина каждого элемента 8. Если длина меньше, элемент добавляется в новый массив. И так делается наш код.

Как и в примере с картой, каждый элемент массива передается в метод фильтра, и если он проходит проверку, он добавляется в новый массив shortNames.

Если вывести решение в консоль, то получим следующее.

Давайте посмотрим на другой пример.

Сочетание .map() и .filter()

Вы также можете комбинировать .map() и filter() в своем коде, чтобы сделать ваш код еще более простым.

Используя наш предыдущий пример, объединение карты и фильтра становится

Здесь мы сначала вызываем метод фильтра для массива city_names, и результирующий массив становится массивом для метода фильтра. Результатом этой операции будет [5].

Массив.уменьшить()

Метод редукции сводит все элементы массива к одному значению.

Синтаксис сокращения:

arr.reduce(callbackFn, initialValue)

где callbackFn — это функция, которая передается в другую функцию в качестве аргумента. InitialValue — это необязательное значение, используемое в качестве первого аргумента для первого вызова callbackFn. Если начальное значение не указано, в качестве начального значения используется первый элемент массива.

Рассмотрим следующий пример.

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

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

Понимание того, как работает сокращение, является ключевым элементом управления состоянием в Redux.

Вывод

Теперь, когда вы узнали о сопоставлении, фильтрации и сокращении, попробуйте i с вашим кодом и посмотрите, насколько проще станет ваш код.