RxJs - map

Reading time ~1 minute

Первый “серьезный” метод в моей 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.


Ссылки:

RxJs - from

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

RxJs - take и takeLast

Published on August 30, 2019

RxJs - first и last

Published on August 29, 2019