Итак, вы слышали о функциях массива в javascript, таких как .map (), .reduce (), .filter (), но не знаете, как использовать их в ваш код, тогда мой друг, это подходящее место для вас.

Вы очень беспокоитесь о читабельности вашего кода и устали от того, как логика кода портится, когда вы используете простые операторы цикла, такие как .for (), .forEach (), а затем ваш поисковое путешествие заканчивается здесь.

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

Карта

Метод map () создает новый массив с результатами вызова предоставленной функции для каждого элемента в вызывающем массиве.

Синтаксис:

var new_array = arr.map(function callback(element, index, array) {
    		// Return value for new_array
		}[, thisArg]);

Фильтр

Метод filter () создает новый массив со всеми элементами, которые проходят проверку, реализованную предоставленной функцией.

Синтаксис:

var new_array = arr.filter(function callback(element, index, array){
                // Return true or false
               }[, thisArg]);

Уменьшить

Метод reduce () применяет функцию к аккумулятору и каждому элементу в массиве (слева направо), чтобы уменьшить его до одного значения.

Синтаксис:

arr.reduce(callback[, initialValue]);

Вот забавное представление вышеперечисленных функций:

Было замечено, что лучший способ изучить любую концепцию программирования - это изучить ее, применяя ее.
Итак, давайте попробуем изучить ее, решив проблему.

Прежде чем мы перейдем к проблеме, давайте внимательно посмотрим на наши данные:

Постановка проблемы: «Получите название штата с наибольшей плотностью населения, начинающееся с буквы’ N ’»
Давайте быстро рассмотрим алгоритм решения нашей проблемы.

Шаг 1. Отфильтруйте данные с помощью буквы «N»

output: 
  [
   { id: 30, name: 'New Jersey', population: 43569, area: 2300 },
   { id: 40, name: 'New York', population: 98901, area: 550 }
  ]

Шаг 2: Рассчитайте плотность населения отфильтрованных данных

output:
  [
   { 
     id: 30, name: 'New Jersey', 
     populationdensity:18.94304347826087
   },
   { 
     id: 40, name: 'New York', 
     populationdensity: 179.82 
   }
  ]

Шаг 3. Получите название штата с наибольшей плотностью населения

output : New York

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

Сцепление

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

Стрелочные функции

Мы также можем использовать стрелочные функции, чтобы сделать наш код более кратким (требуется поддержка ES6).

Вам всем может быть интересно, что эту проблему также можно было решить с помощью .forEach (). Итак, зачем использовать вышеуказанные функции? Давайте посмотрим на код с помощью .forEach ().

Если мы посмотрим на приведенный выше код, мы увидим, как использовались вложенные ifs, и по мере усложнения постановки задачи нам нужно иметь несколько условий if… else и следовательно, читаемость кода также ухудшается.

Заключение
Почему следует предпочесть .map (), .filter (), .reduce () перед .forEach ()?

  1. Читаемость
  2. Модульное тестирование