Некоторое время я использую map, reduce, filter в своей базе кода, но чтение книги Луиса Атенсио «Функциональное программирование в Javascript» подтолкнуло меня к изучению ее реализации. Давайте лучше поймем эти «неизменные» (в кавычках) драгоценные камни и, в частности, ответим на why и how вопросы?

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

Шаг 1: построение нашего примера

Предположим, что новая партия инженеров-программистов нанята компанией XYZ на основе определенных должностных требований. Итак, класс Developer определен для захвата этих основных свойств,

Карта 🎯

Компания решает добавить сумму бонуса всем вновь нанятым разработчикам. Если мы хотим закодировать это, мы, возможно, переберем все эти объекты и добавим дополнительную сумму.

В наших первых двух шагах мы можем сосредоточиться на ответе на карту почему? а позже мы сможем узнать, как работает карта?

Шаг 1. Императивный подход

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

Шаг 2: Декларативный подход

Подход два включает функциональное программирование, в котором больше внимания уделяется композиции, но в любом случае цикл и обработка временного массива отвлечены от нас. Также он не изменил исходный массив developers. Короче говоря, он вёл себя как чёрный ящик.

Например; с помощью карты мы создали новые кусочки пиццы 🍕 с сырной начинкой из заданных простых кусочков. Как гурман, я могу есть обычную простую пищу (слева) или ломтики с сырной начинкой (справа) в любое время e.

Надеюсь, это помогло решить часть головоломки, почему. Далее мы сделаем еще один шаг в понимании внутренней работы карты.

Шаг 3. Анализ карты

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

но мы часто используем map в массиве, например array.map(), но в нашем примере мы передали массив в качестве аргумента. Хммм… .. можем ли мы заставить нашу карту вести себя так же, как карта ECMAScript?

давайте перейдем к следующему, уменьшим.

Уменьшить ⚖

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

Шаг 1. Императивный подход

Хотя мы могли выполнять вычисления в одном цикле, нам все же приходилось беспокоиться о цикле, объявив временную переменную для расчета суммы.

Шаг 2: Декларативный подход

Поначалу это может показаться немного пугающим, но подход более модульный и по-прежнему следует неизменному соглашению. (Примечание. Если у вас есть способ лучше разобраться averageSalPerYear с помощью reduce, дайте мне знать, мы рады узнать)

Шаг 3. Уменьшите расслоение

Вместо того, чтобы сразу приступить к решению нашей проблемы «среднего прироста заработной платы в год», давайте сначала начнем с более простого примера (сложения чисел).

Выглядит неплохо, теперь давайте воспользуемся «myReducer», чтобы получить средний прирост зарплаты в нашем массиве разработчиков.

Отлично, но если мы хотим использовать цепочку прототипов myReducer as, тогда реализация изменится на ниже (создание нового редуктора как myNewReducer, чтобы все реализации отличались друг от друга),

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

аккуратно, теперь перейдем к фильтру.

Фильтр 🔎

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

Шаг 1. Императивный подход

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

Шаг 2: Декларативный подход

быстрая проверка для сравнения, совпадают ли отфильтрованные данные с данными массива обязательного фильтра.

Этап 3. Рассечение фильтра

Как и раньше, мы определим наш новый фильтр как метод прототипа массива, чтобы мы могли использовать его как array.myNewFilter

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

Сцепление 🔗

В этом разделе мы рассмотрим «добавление суммы бонуса всем нашим разработчикам, имеющим минимальный опыт работы не менее 3 лет, и, наконец, вычисление общей заработной платы этих разработчиков»

Ура, мы закончили 🙌

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

Хорошо, это именно то, что мы ожидали. Давайте проверим наш массив developersCopy.

если вы заметили, что новое свойство title было добавлено к каждому объекту, но map предполагается, что оно неизменяемое 🤯.

Почему на этот раз у нас не получилось? потому что объекты доступны по ссылке. Таким образом, изменение свойства объекта по ссылке изменит исходный массив объектов (т.е. нечистый).

Можно избежать мутации, если мы клонируем каждый объект перед применением карты. Для более подробной информации вы можете сослаться на этот носитель блог или вопрос о переполнении стека. Итак, функциональное программирование - это тип реализации, а не фреймворк.

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

Удачного кодирования 🦸🏽‍♂️

P.S: Я не понимаю этого "хлопка", но если вам понравился блог, не помешает нажать на него 👏