Функции высшего порядка в JS: sort, map, filter, reduce

1.

Проектирование и разработка веб-приложений. Лекция 4.
Функции высшего порядка JS
Sort. Map. Filter. Reduce.
Москва, 2025

2.

Повестка дня
Sort…..………3
Map.…..……..4
Filter.…………5
Reduce………6
Задания……..7

3.

Sort
Функции высшего порядка — это функции, которые либо принимают, либо возвра
Метод sort() выполняет всю работу по непосредственному перемещению
элементов в массиве.
const compare = (a, b) => {
if (a.age === b.age) {
return 0;
}
const users = [
{ name: 'Igorrr', age: 19 },
{ name: 'Dan', age: 1 },
{ name: 'Vovan', age: 99 },
{ name: 'Alex', age: 11 },
];
return a.age > b.age ? 1 : -1;
};
users.sort(compare);
const sortedNumbers = numbers.toSorted(
(a, b) => a - b
)
Метод массива toSorted() это копия метода sort(), но, в отличие от него, не измен
3

4.

Map
Метод map() принимает единственным параметром функцию. Этот метод
применяется к массивам! Внутри себя, map() перебирает элементы
переданной коллекции и для каждого элемента вызывает переданную
функцию. Результат выполнения записывается в новый массив.
const users = [
{ name: 'Igorrr', age: 19 },
{ name: 'Dan', age: 1 },
{ name: 'Vovan', age: 99 },
{ name: 'Alex', age: 11 },
];
var arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]
const ages = users.map((user) => user.age);
console.log(ages); // => [19, 1, 99, 11]
Метод flat() возвращает новый массив, в котором
все элементы вложенных подмассивов были
рекурсивно "подняты" на указанный уровень
depth (по умолчанию - 1).
.flatMap(findEmptyDirPaths) - полностью выпрямляет массив после выполнения
внутренних действий: сочетание flat и map
4

5.

Функция, передаваемая в метод filter(), должна быть предикатом. То есть
её задача вернуть либо true, либо false для каждого элемента коллекции.
const users = [
{ name: 'Igorrr', age: 19, friends: [{ name: "Vovan", gender:
"male" }, { name: "Mary", gender: "female" }] },
{ name: 'Alex', age: 11, friends: [{ name: "Mila", gender:
"female" }, { name: "Dan", gender: "male" }] } },
];
export default (users) => {
const friendsOfUsers = users.map(({ friends }) => friends);
return friendsOfUsers.flat().filter(({ gender }) => gender ===
'female');
};
// Вернёт: [{ name: "Mary",
gender: "female" }, { name: "Mila",
gender: "female" }]
Filter
const names = ["JC63", "Bob132", "Ursula89", "Ben96"];
const greatIDs = names
.map((name) => parseInt(name.match(/[0-9]+/)[0], 10))
.filter((id, idx, arr) => {
if (idx > 0 && id <= arr[idx - 1]) return false;
if (idx < arr.length - 1 && id <= arr[idx + 1]) return false;
return true;
});
console.log(greatIDs); // [132, 96]
Может принимать в параметры функции 3 элемента: element - элемент
массива, index - индекс элемента, array - массив, для которого вызывался
метод фильтрации.
5

6.

Reduce
Метод reduce() принимает на вход два параметра — функцию-обработчик
и начальное значение аккумулятора. Этот же аккумулятор возвращается
наружу в качестве результата всей операции.
Функция, передаваемая в reduce() принимает на вход два значения:
текущее значение аккумулятора и текущий обрабатываемый элемент.
Группировка имён пользователей по возрасту:
const users = [
{ name: 'Igorrr', age: 19 },
{ name: 'Dan', age: 1 },
{ name: 'Vovan', age: 99 },
{ name: 'Alex', age: 11 },
];
const cb = (acc, user) => {
if (!Object.hasOwn(acc, user.age)) {
acc[user.age] = [];
}
acc[user.age].push(user.name);
return acc; // обязательно вернуть!
};
// Начальное значение – пустой объект
const usersByAge = users.reduce(cb, {});
const ages = users.map((user) => user.age);
console.log(ages); // => [19, 1, 99, 11]
Под агрегацией понимается операция, вычисляющая значение, зависящее от всего
набора данных.
6

7.

Вариант 1
1.
2.
3.
4.
Задание 1. Map и Filter
Вариант 2
1. В фитнес-центре ведется учет его посетителей. Посетители
Создать словарь с данными постояльцев гостиницы со следующими
могут быть записаны на различные тренировки, пользоваться
параметрами: постояльцы гостиницы проживают в номерах, при этом
дополнительными услугами, а также иметь абонемент с
они могут делить один номер; номер может включать несколько
различными условиями: у посетителей есть имя, возраст, пол,
спальных мест, доступ в интернет, комплект средств гигиены для
может быть личный шкафчик с номером; у абонемента
каждого гостя; обед для гостей, которые оплатили его заранее;
посетителя есть тип (доступ в разные залы), срок действия и
время и цена проживания предписываются каждому номеру
стоимость; в центре есть залы разных типов и вместимости;
отдельно; у постояльцев есть имя, возраст и пол, а также может
залы курируют тренера, к которым можно записаться на
иметься автомобиль/и с маркой, цветом и номером; у номера
определённое время, у тренера есть имя, стаж работы и
указывается этаж, и собственно, номер.
специализация.
Необходимо создать функцию, которая будет регистрировать
2. Необходимо создать функцию, которая будет выписывать
постояльца в гостиницу, используя метод Filter. Для этого нужно
клиенту абонемент, по которому он в дальнейшем сможет
добавить график, в котором будет фиксироваться время
свободно посещать залы и записаться к тренеру, на свободное в
бронирования и занятости номеров. Гостиница работает ежедневно и
его графике время. Всего в фитнес-центре 3 тренажёрных зала
содержит три этажа с 2 двухместными, 1 трёхместным и 1
(2 на 10 человек, и один на 5), к которым приставлены 5
одноместным номерами на каждом.
тренеров, 2 танцевальных зала (по 6 человек) с тренером и
тренершей и один бассейн (на 10 человек) с 1 тренером.
Зарегистрируйте в гостиницу пожилую пару (заехавшую сегодня с
утра на 3 дня), родителей с ребенком (выезжающих сегодня вечером),
3. Выдайте абонементы 15 клиентам с разными уровнями доступа.
бизнесмена (приехавшего в понедельник на 5 дней с обедом),
Двое из них ходят в тренажёрный зал по Вт и Чт, трое посещают
вредную женщину (которая спустя 3 дня жалоб на включённый обед,
его 3 раза в неделю, 1 клиент посещает один из видов зала 4
завтра должна наконец-то съехать), 3 сотрудницы авиакомпании
раза в неделю, все они записаны к соответствующим тренерам
(съезжающих завтра) и группу из 5 студентов (которые уже третий
другая клиентка в те же дни ходит в танцевальный зал
день продляют бронь). Оформите бронь для пары туристов (с
исключительно с тренершей. Остальные клиенты могут посетить
завтрашнего дня до воскресенья) и матери с подростком (через 3 дня
зал в любое время.
на 2 суток).
4. Используя метод Map напишите функцию, которая будет
Напишите функцию, на основе метода Map высчитывающую, сколько
записывать кого-то из присутствующих в базе клиентов к
обедов нужно предоставить на каждый день текущей недели.
свободному тренеру в интересующий их зал.
7

8.

Задание 2. Map и Filter
Вариант 1
Вариант 2
5. Выберите, в какой день лучше
всего проводить дизинфекцию в
гостинице (когда будет меньше
всего клиентов).
6. Добавьте в один случайный номер
гостиницы на каждом этаже
возможность проживания с
питомцем.
7. Напишите функцию отмены
брони.
8. Выведите всех постояльцев с
именем "Татьяна".
5. Напишите функцию, которая
позволит заморозить клиенту
абонемент на указанный срок.
6. Посчитайте самый загруженный
день работы фитнес-центра.
7. Выведите в консоль, людей «за
30», которые посетили фитнесцентр в самый загруженный
день.
8. Выведите всех посетителей,
которые записаны в бассейн на
грядущую пятницу.
8

9.

Задание 3. Reduce и Sort
Вариант 1
Вариант 2
9. Выведите в консоль клиента,
который посещает фитнес-центр
чаще всех.
10.Посчитайте, сколько шкафчиков
свободно, если всего их 33.
11.Узнайте и выведите, сколько
прибыли получит фитнес-центр,
если завтра придёт 5
посетителей, которые будут
ходить в тренажёрный зал к
тренеру каждую неделю.
12.Определите самого
нагруженного тренера.
9. Выведите в консоль прибыль
гостиницы за три прошедших и
три грядущих дня.
10.Найдите самого пожилого
постояльца гостиницы,
проживающего в ней вчера.
11.Посчитайте, на сколько бы
увеличилась прибыль гостиницы,
если бы помимо обеда,
предлагался бы ужин.
12.Отсортируйте гостей по дате
выселения.
9

10.

На этом всё!