В чем разница между тапом и картой в Rx JS? - PullRequest
Новая
       7

В чем разница между тапом и картой в Rx JS?

0 голосов
/ 18 апреля 2020

Я прочитал разницу из статьи, но основные моменты выглядят так:

, поэтому с помощью tap я могу изменить переменные, например, если я поставлю x=3+4, то это изменит значения переменной. тогда я могу сказать, что есть один побочный эффект.

Но с map я могу изменить значение, зацикливая каждое значение, не так ли? Можете ли вы определить, какие выдающиеся различия у них есть?

tap

Rx JS tap выполняет побочные эффекты для каждого значения, испускаемого источником Observable, и возвращает Observable Идентичен источнику. Наблюдается до тех пор, пока не возникнет ошибка.

map

map является оператором Rx JS. карта применяет данную функцию к каждому элементу, излучаемому исходной наблюдаемой, и выдает результирующие значения в виде наблюдаемой

Ответы [ 4 ]

0 голосов
/ 19 апреля 2020

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

Это как "заглянуть" в "трубу". Данные остаются прежними, вы можете что-то с этим. Некоторые данные входят, вы смотрите, те же данные выходят.

Карта предназначена для преобразования / отображения данных в «трубе». Некоторые данные поступают, разные / преобразованные данные выходят.

0 голосов
/ 18 апреля 2020

tap и map являются операторами Rx JS, операторы Rx JS являются просто функцией, которая выполняет некоторые манипуляции с данными.

Они оба pipeable operators, которые принимают входные данные в качестве наблюдаемых, выполняют некоторые действия и возвращают наблюдаемые выходные данные.

Разница между картой и касанием:

map - это конвейерный оператор, который принимает наблюдаемую входную информацию, выполняет с ней некоторые манипуляции и возвращает новую наблюдаемую манипуляцию. Например, 

const source$ = of(1,2,3) // observable which will emit 1,2,3
// It take an input observable and return a new observable which will emit square of input values. 
// So, the output observable will emit 1,4,9
const mapSource$ = of(1,2,3)
                    .pipe(map(value => value * value))

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

const source$ = of(1,2,3) // observable which will emit 1,2,3
// It take an input observable and return a same observable after console value.
// So, the output observable will emit 1,2,3
const tapSource$ = of(1,2,3)
                    .pipe(tap(value => console.log(value)))
0 голосов
/ 18 апреля 2020

  • Цель tap - выполнить действие , сохраняя то же значение наблюдаемого

  • Цель map должен преобразовать излучаемые значения наблюдаемых 

const messagesCount$ = newMessages$
.pipe(tap(messages => notificationService.notify('You have ' + message.length + ' message(s)')))
.pipe(map(messages => messages.length))
0 голосов
/ 18 апреля 2020

Функция отображения берет одно и возвращает другое. например, я могу построить функцию, которая принимает 10 и возвращает 11, которая принимает 11 и возвращает 12 и т. д. c. 

const inc = n => n + 1;

Array#map применяет такую ​​функцию отображения ко всем элементам массива, но «map» не означает «итерация».

В Rx JS, когда данные отправляются в поток, они проходят через ряд операторов :

  • Оператор map просто применяет функцию к этим данным и возвращает результат.
  • Однако оператор tap принимает данные, применяет функцию к этим данным но возвращает исходные данные, если функция потрудилась вернуть результат, tap просто игнорирует его.

Вот пример:

  • Мы пу sh 10 для потоковой передачи a$, tap просто зарегистрируйте значение. Мы знаем, что console.log всегда возвращает undefined, но это нормально, потому что tap просто возвращает свой параметр.
  • Мы пу sh 10 в поток b$, он проходит через map(inc), что применяется inc к 10 возвращению 11. 

const a$ = of(10).pipe(tap(n => console.log(`tap: ${n}`)));
const b$ = of(10).pipe(map(inc));

a$.subscribe(n => console.log(`n from a$: ${n}`));
b$.subscribe(n => console.log(`n from b$: ${n}`));
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.5/rxjs.umd.min.js"></script>

<script>
const {of} = rxjs;
const {map, tap} = rxjs.operators;

const inc = n => n + 1;
</script>
...