Итак, вы слышали о функциях массива в 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 ()?
- Читаемость
- Модульное тестирование