Reactive Extensions (Rx) — это библиотека для составления асинхронных и событийных программ с использованием наблюдаемых последовательностей. RxJS — это реализация Rx на JavaScript. Он предоставляет набор мощных операторов, помогающих разработчикам создавать реактивный код. В этой статье мы более подробно рассмотрим некоторые из лучших операторов RxJS.

  1. карта

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

import { from } from 'rxjs';
import { map } from 'rxjs/operators';

const numbers = from([1, 2, 3, 4, 5]);
const squares = numbers.pipe(map(x => x * x));
squares.subscribe(x => console.log(x)); // output: 1, 4, 9, 16, 25

2. фильтр

Оператор фильтра используется для выборочного выделения значений из наблюдаемого на основе условия. Он принимает функцию-предикат в качестве аргумента, которая применяется к каждому испускаемому значению. Если предикат возвращает true, значение выдается; в противном случае он отбрасывается. Например, мы можем использовать оператор filter для выделения из потока только четных чисел:

import { from } from 'rxjs';
import { filter } from 'rxjs/operators';

const numbers = from([1, 2, 3, 4, 5]);
const even = numbers.pipe(filter(x => x % 2 === 0));
even.subscribe(x => console.log(x)); // output: 2, 4

3. время устранения дребезга

Оператор debounceTime используется для задержки выдачи значений из наблюдаемого до тех пор, пока не пройдет определенное количество времени без выдачи каких-либо новых значений. В качестве аргумента принимает временной интервал в миллисекундах. Например, мы можем использовать оператор debounceTime, чтобы выводить значение из окна поиска только после того, как пользователь перестал печатать в течение 500 мс:

import { fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';

const searchBox = document.getElementById('search-box');
const keyup$ = fromEvent(searchBox, 'keyup');
const search$ = keyup$.pipe(debounceTime(500));
search$.subscribe(event => {
  // handle search logic here
});

4. взять

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

import { from } from 'rxjs';
import { take } from 'rxjs/operators';

const numbers = from([1, 2, 3, 4, 5]);
const firstThree = numbers.pipe(take(3));
firstThree.subscribe(x => console.log(x)); // output: 1, 2,

5. слияние

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

import { interval } from 'rxjs';
import { merge } from 'rxjs/operators';

const numbers1 = interval(1000);
const numbers2 = interval(500);
const merged = numbers1.pipe(merge(numbers2));
merged.subscribe(x => console.log(x)); // output: 0, 0, 1, 2, 1, 3, 4, 2, 5, 6, ...
``