mergeMap과 switchMap, concatMap과 배기 맵의 차이점

안녕하세요. Angular 개발자 인터뷰에서 RxJs 연산자와 그 차이점에 대해 몇 가지 질문을 받을 수 있습니다.

가장 일반적인 질문 중 하나는 "mergeMap, switchMap, concatMap 및 배기 맵의 차이점은 무엇입니까?"

입니다.

들어가서 간단한 용어로 설명해 보겠습니다.

간단한 예를 사용하여 동작의 차이점을 설명하겠습니다.

import { interval, take, tap, from } from 'rxjs';
import {
  switchMap,
  mergeMap,
  concatMap,
  exhaustMap,
} from 'rxjs/operators';

const mapOperators = [
  mergeMap,
  switchMap,
  concatMap,
  exhaustMap
];

const selectedMap = mapOperators[0]; // <- Change operator index here

const clicks$ = from(['First Click', 'Second Click', 'Third Click']).pipe(
  tap(console.log),
);

clicks$
  .pipe(
    selectedMap((click: number) =>
      interval(500).pipe(
        tap((intervalValue: number) =>
          console.log(
            `${click} Value: ${intervalValue}`
          )
        ),
        take(3)
      )
    )
  )
  .subscribe();

Stackblitz에서 실험할 수 있는 코드 예제에서는 3명의 사용자 클릭을 모방하는 것을 볼 수 있습니다

이제 각 연산자가 무엇을 반환하는지 살펴보겠습니다

병합 지도

First Click
Second Click
Third Click
First Click Value: 0
Second Click Value: 0
Third Click Value: 0
First Click Value: 1
Second Click Value: 1
Third Click Value: 1
First Click Value: 2
Second Click Value: 2
Third Click Value: 2

mergeMap 연산자는 방출을 병렬로 실행하므로

First Click Value: 0
Second Click Value: 0
Third Click Value: 0

값이 0인

스위치맵

First Click
Second Click
Third Click
Third Click Value: 0
Third Click Value: 1
Third Click Value: 2

switchMap 연산자는 새로 클릭할 때마다 이전 항목을 취소합니다. 우리의 경우 첫 번째 클릭은 두 번째 클릭에 의해 취소되고 두 번째 클릭은 취소됩니다. 세 번째 클릭에 의해 취소되었으며 결과적으로 세 번째 클릭 값
이 표시됩니다.

Third Click Value: 0
Third Click Value: 1
Third Click Value: 2

ConcatMap

First Click
Second Click
Third Click
First Click Value: 0
First Click Value: 1
First Click Value: 2
Second Click Value: 0
Second Click Value: 1
Second Click Value: 2
Third Click Value: 0
Third Click Value: 1
Third Click Value: 2

concatMap 연산자는 모든 클릭을 기억하고 이를 동일한 순서로 console.log에 기록합니다. 우리의 경우에는 첫 번째 클릭, 두 번째 클릭, 세 번째 클릭입니다. 콘솔에서 확인하세요

First Click Value: 0
First Click Value: 1
First Click Value: 2
Second Click Value: 0
Second Click Value: 1
Second Click Value: 2
Third Click Value: 0
Third Click Value: 1
Third Click Value: 2

배기지도

First Click
Second Click
Third Click
First Click Value: 0
First Click Value: 1
First Click Value: 2

exhaustMap 연산자는 첫 번째 클릭이 완료될 때까지 스트림을 차단하며, 우리의 경우 두 번째 클릭 및 세 번째 클릭은 무시됩니다

First Click Value: 0
First Click Value: 1
First Click Value: 2

이제 이러한 연산자 간의 차이점을 이해했으므로 잘못된 연산자를 선택할 경우의 결과를 상상할 수 있습니다

위 내용은 mergeMap과 switchMap, concatMap과 배기 맵의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!