RxJs - map

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

Ссылки:

• https://rxmarbles.com/#map