RxJs - first и last

Метод 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.

Ссылки:

• https://rxjs.dev/api/operators/first
• https://rxjs.dev/api/operators/last
• https://rxmarbles.com/#first
• https://rxmarbles.com/#last