RUDE

Агрегатные функции в RxJS: count, max, min и reduce.

CoderStudio, 27.04.2022 00:15
Агрегатные функции в RxJS: count, max, min и reduce.

Каждый, кто использовал RxJS, знает, насколько она облегчает работу программиста. Эта библиотека предоставляет нам тонну полезных функций. Во всем этом легко запутаться и, как следствие, не знать, какую функцию использовать. В этой статье я постараюсь рассказать, как использовать операторы min, max, reduce и count, которые относятся к последней из вышеперечисленных категорий.

1. Max()

Чтобы было проще понять, давайте рассмотрим пример. Представьте, что у вас есть компания, которая продает одежду. Мы хотели бы загрузить список одежды с id, названием и ценой, а затем проверить, какой товар самый дорогой. Для упрощения примера мы не будем использовать HTTP-запрос к API, а создадим простой массив объектов, который будет служить нам источником данных.

const products =
[{ id: 1, name: 'Shoes', price: 129},
{ id: 2, name: 'T-shirt', price: 45},
{ id: 3, name: 'Skirt', price: 28},
{ id: 4, name: 'Sockets', price: 5},
{ id: 5, name: 'Jeans', price: 49}]
const products$ = from(products);

После создания массива создадим интерфейс "Product":

interface Product {
id: number,
name: string,
price: number
}

Следующим шагом будет добавление следующего кода:

products$.pipe(max((productA: Product, productB: Product) => {
return productA.price < productB.price ? -1 : 1
})
).subscribe((product: Product) => console.log(product));

Открыв консоль в браузере, мы должны увидеть следующий результат:

{id: 1, name: 'Shoes, prie: 129}

В данном случае оператор max принимает в качестве аргумента продуктA и продукт B. Затем он проверяет, больше ли цена продуктаА, чем продуктаВ, или меньше. Если цена больше, функция сортирует его с индексом, меньшим, чем индекс продуктаВ. Если цена продуктаВ больше цены продуктаА, то функция сортирует цену продуктаВ с индексом, меньшим, чем индекс продуктаА.

2. Min()

Этот оператор возвращает нам наименьшее значение, выданное источником данных. Код, использующий этот оператор, будет выглядеть очень похоже на предыдущий - на этот раз вместо max мы будем использовать min.

products$.pipe(
min((productA: Product, productB: Product) => {
return productA.price < productB.price ? -1 : 1
})).subscribe((product: Product) => console.log(product));

В результате в консоли браузера будет отображен объект с самой низкой ценой:

{id: 4, name: 'Sockets', price: 5}

Принцип работы аналогичен функции max. Здесь сравниваются цены и в зависимости от их значения присваивается больший или меньший индекс.

3. Reduce()

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

products$.pipe(
map((product: Product) => product.price),
reduce((accumulator: number, nextPrice: number) => {
return accumulator + nextPrice;
})
).subscribe((sum: number) => console.log(sum));

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

4. Count()

Последним оператором является count. Этот простой оператор позволяет нам подсчитать, сколько значений было выдано из источника данных. В нашем случае это количество продуктов, т.е. 5.

products$.pipe(
count()
).subscribe((sum: number) => console.log(sum));

В результате в консоли должно отобразиться значение 5.

Заключение

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