Блог / Новости / Познакомьтесь со Святой Троицей Функционального Программирования: Карта, Фильтр и Сокращение

Познакомьтесь со Святой Троицей Функционального Программирования: Карта, Фильтр и Сокращение

Вы смотрели видео на Youtube, вы прошли учебные курсы по Pluralsight и считаете себя экспертом по Javascript. Однако Теперь вы хотите поболтать со всеми классными детьми и поговорить о функциональном программировании. Поскольку циклы предназначены для присосок (ну, на самом деле, нет), функции высшего порядка - все в моде, и вы хотите понять, что это значит. Ну, самый первый шаг - понять 3 самых популярных метода: Map, Filter и Reduce. Важно понимать, как и когда использовать эти методы, но, что более важно, вам также нужно знать, когда их избегать. . Чтобы настроить некоторый контекст, давайте представим, что у нас есть приложение, которое сохраняет основную информацию о пользователях. Предположим, что наша сущность User имеет следующие свойства: id, firstName, lastName, дата рождения, адрес электронной почты, URL-адрес аватара, имя пользователя и флаг, чтобы сообщить нам, активны они или нет. User.tsimport { Column, Entity, PrimaryGeneratedColumn } from 'typeorm'; @Entity() export class User { @PrimaryGeneratedColumn() public id?: number; @Column() public firstName: string; @Column() public lastName: string; @Column() public age: number; @Column() public email: string; @Column() public avatarUrl: string; @Column() public username: string; @Column() public isActive: boolean; }Если аннотации не знакомы, не беспокойтесь об этом. Это не важно для примера и является лишь некоторыми аннотациями, специфичными для TypeORM. Чтобы исследовать концепции отображения, фильтрации и сокращения, мы создадим класс со следующими методами: 1. standardizeAvatars ???? Принимает массив пользователей и добавляет базовый URL ко всем аватарам urls2. getActiveUsers ???? Принимает массив пользователей и возвращает только активных.3. getAllAges ???? Принимает массив пользователей и получает общий возраст всех в массиве. pssst Я чирикаю о вещах кода все время. Если у вас есть вопросы о том, как повысить уровень ваших навыков разработки, дайте мне знать: @mlevkov

Map ????

Функция .map просматривает каждый элемент массива и применяет переданную функцию к каждому элементу. Есть один ОЧЕНЬ ОЧЕНЬ важный момент, на который следует обратить внимание, о котором не говорилось, что функция .map проходит КАЖДЫЙ ???? ОДИН ???? ЭЛЕМЕНТ ???? и возвращает новый массив с измененными значениями. Это означает, что вы можете &# x27 ; t вырваться из цикла И вы продублируете каждый элемент массива. Если у вас огромная коллекция, которая занимает много памяти, возможно, лучше использовать старую добрую моду для цикла. Вот пример того, как преобразовать цикл for в .map./** * Assumes that the urls will be hosted on imgur. * Appends the base imgur url to each avatar if it's set or sets a default one * if it isn't. */ public standardizeAvatars(users: User[]): User[] { // using a for loop for (const user of users) { let url = 'https://imgur.com/avatars/default.jpg'; if (user.avatarUrl.trim()) { url = `https://imgur.com/avatars/${user.avatarUrl}`; } user.avatarUrl = url; } return users; } /** * Assumes that the urls will be hosted on imgur. * Appends the base imgur url to each avatar if it's set or sets a default one * if it isn't. */ public standardizeAvatars(users: User[]): User[] { // using map return users.map((user: User) => { let url = 'https://imgur.com/avatars/default.jpg'; if (user.avatarUrl.trim()) { url = `https://imgur.com/avatars/${user.avatarUrl}`; } user.avatarUrl = url; return user; }); }

Filter ????

Функция .filter просматривает каждый элемент массива и проверяет, возвращает ли этот элемент значение true или false при передаче в переданную функцию. Если он возвращает true, мы сохраняем этот элемент, в противном случае мы не используем &# x27; t. Фух, это полный рот. Не волнуйтесь, приведенный ниже пример. Как и .map, функция .filter проходит КАЖДЫЙ ???? SINGLE ???? ELEMENT ???? и возвращает новый массив, содержащий только те элементы, которые не были отфильтрованы. , Таким образом, в то время как ваша коллекция может уменьшиться в размере (или может не уменьшиться), вы все равно будете просматривать каждый отдельный элемент без возможности разбить или продолжить. Если вы выполняете тяжелые вычисления, то для каждого элемента, который хотите сохранить, рассмотрите возможность использования цикла for. Вот пример использования .filter и тот же пример с циклом for. /** * Goes through the whole array and returns a collection of only active users. */ public getActiveUsers(users: User[]): User[] { //for loop const result: User[] = []; for (const user of users) { if (user.isActive) { result.push(user); } } return users; } /** * Goes through the whole array and returns a collection of only active users. */ public getActiveUsers(users: User[]): User[] { return users.filter((user: User) => user.isActive); }

Reduce ????‍????

Функция .reduce также будет проходить через каждый элемент массива, НО в этом случае она не вернет вам другую коллекцию, а только один элемент. Фактически, вы можете сказать, что это «уменьшает» Ваша коллекция на один предмет. Функция .reduce принимает созданную вами пользовательскую функцию и значение заполнителя, которое отслеживает операции. Это гарантирует, что ваша коллекция уменьшится в размере./** * Goes through all the users in the array, sums up their * ages and returns the final result; */ public getAllAges(users: User[]): number { let result = 0; for (const user of users) { if (+user.age) { // <- the + is neat shortcut to check if you have a number result += user.age; } } return result; }/** * Goes through all the users in the array, sums up their * ages and returns the final result; */ public getAllAges(users: User[]): number { //sum keeps track of the ages, the 0 is the starting point return users.reduce((sum, user) => sum + user.age, 0); }Вот вам, как использовать священную троицу функционального программирования. Если вы хотите повысить свои навыки кодирования, я собираю сборник пьес, который включает в себя: 1. 30+ общих запахов кода & как их исправить2. 15+ методик проектирования и разработки; как их применять3. 20+ распространенных ошибок JS & как предотвратить их? Получить ранний доступ к Javascript Playbook ????

Якщо у вас виникли питання, вбо ви бажаєте записатися на індивідуальний урок, замовити статтю (інструкцію) або придбати відеоурок, пишіть нам на:
скайп: olegg.pann
telegram, viber - +380937663911
додавайтесь у телеграм-канал: t.me/webyk
email: oleggpann@gmail.com
ми у fb: www.facebook.com/webprograming24
Обов`язково оперативно відповімо на усі запитіння

Познакомьтесь со Святой Троицей Функционального Программирования: Карта, Фильтр и Сокращение

Map ????

Filter ????

Reduce ????‍????

Теги

Комментарии