Первый “серьезный” метод в моей RxJs-копилке знаний. На самом деле все просто - этот метод получает на вход поток, обрабатывает каждый event этого потока; и возвращает (это важно помнить!) новый поток, с модифицированными events.

Map’s job - is to transform things!

Обрабатывает при помощи callback-функции - в принципе, чрезвычайно похоже на то, как это делает метод map в “классическом” JavaScript.

Простейший пример использования оператора map:

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

const source = from([1,2,3,4,5,6,7]);
const result = source.pipe(map(v => v+1));
result.subscribe(v => console.log(v));

В данном случае создаем Observable-объект из простого массива - source. Затем каждый event преобразовываем при помощи map - увеличиваем на единицу. И возвращаем новый Observable-объект - result. На который можно подписаться и получить такой результат - 2,3,4,5,6,,7,8.

Так как метод map возвращает новый объект result, а оригинальный source остается неизменным, то метод map относится к immutable-операторам.

Чуть более сложный пример:

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

const source = from([
  { name: 'Joe', age: 30 },
  { name: 'Frank', age: 20 },
  { name: 'Ryan', age: 50 }
]);

const result = source.pipe(map(({name}) => name));
result.subscribe(v => console.log(v));

В принципе - этот пример аналогичен предыдущему, с тем лишь отличием, что source - это уже массив объектов. И в методе map при помощи деструктурирования получаем из каждого объекта этого массива значения свойства name. Получается новый Observable-объект result, состоящий из потока имен - Joe, Frank, Ryan.


Ссылки:

Метод from() позволяет создавать Observable-объект из различных сущностей и подписываться на него. Наиболее часто используемая сущность - это массивы.

Например, так:

const source = from([1,2,3,4,5]);
source.subscribe(v => console. log(v));

Еще одна сущность - строка; метод разберет строку на символы и преобразует их в поток, на который можно подписаться:

const source = from('hello');
source.subscribe(v => console.log(v));

Третья сущность - Promise. Возвращаемый промисом resolve можно преобразовать в поток:

const source = from(new Promise ((res, rej) => rest()));
source.subscribe(v => console.log(v));

Раньше были специальные методы fromArray и fromPromise, но сейчас их заменил универсальный метод from.


Ссылки:

Методы take() и takeLast() в общем очень схожи с методами first() и last(). С тем лишь отличием, что первые два могут возвращать не просто - самое первое или самое последнее событие потока; они могут возвращать указанное количество событий.

Метод take()

Подключение - import { take } from ‘rxjs/operators’;

Метод take() принимает в качестве аргумента число - количество событий потока, которые нужно вернуть с момента старта потока.

Например:

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

const source = timer(0, 1000);
const result = source.pipe(take(10));

result.subscribe(response => console.log(response));

… очевидно, что этот код вернет первые десять событий из потока source -> 0,1,2,3,4,5,6,7,8,9.

Метод takeLast()

Подключение - import { takeLast } from ‘rxjs/operators’;

В противоположность методу take(), метод takeLast() возвратит заданное количество последних событий потока.

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

Пример:

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

const source = from([0,1,2,3,4,5,6,7,8,9]);
const result = source.pipe(takeLast(4));

result.subscribe(response => console.log(response));

… этот код вернет последние четыре события потока source -> 6,7,8,9.


Ссылки:

Метод first()

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

Подключение first() - import { first } ‘rxjs/operators’

Пример - перехватываем только первый клик на документе, все последующие - игнорируем:

import { fromEvent } from 'fxjs'
import { first } from 'rxjs/operators'

const clicks = fromEvent(document, 'click);
const click = clicks.pipe(first());

click.subscribe(response => console.log(response))

Более интересный пример - возвращаем первое событие потока, которое удовлетворяет условию; после чего прекращаем работу:

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

const source = from([1,2,3,4,5,6,7]);
const result = source.pipe(first(el => el === 3));
result.subscribe(response => console.log(response)); // 3

Метод last()

Противоположность методу first(); принимает на вход поток событий и возвращает последнее событие этого потока; после чего прекращает свою работу.

Хорошие примеры использования last() приведены здесь - https://www.learnrxjs.io/operators/filtering/last.html.


Ссылки:

Метод interval является упрощенным вариантом метода timer.

Подключение - import { interval } from ‘rxjs’;

Синтаксис - interval(period: number, scheduler: Scheduler): Observable

Пример кода:

const source = interval(1000);
source.subscribe(data => console.log(data));

… здесь в консоли появится серия 0,1,2,3 и тд - после задержки в одну секунду и затем с интервалом в одну секунду.


Ссылки: