안녕하세요 여러분!

오늘 저는 RxJs 연산자가 흥미로운 연산자인지 보여드리고자 합니다. 시작하겠습니다!

RxJ 연산자

먼저 RxJs 연산자가 무엇인지 간단히 보여드리겠습니다. RxJs 연산자는 함수이며 데이터로 흥미로운 작업을 수행할 수 있도록 하며 두 가지 유형의 연산자가 있습니다.

파이프 가능한 연산자

Pipeable 연산자는 observableInstance.pipe(operator()) 구문을 사용하여 호출할 수 있습니다. Observable을 수신하고 새로운 Observable을 출력으로 생성합니다. 따라서 새 Observable 인스턴스를 출력으로 생성하기 때문에 기존 Observable 인스턴스를 변경하지 않습니다.

생성 연산자

이것은 새로운 Observable을 생성하기 위해 독립 실행형 함수로 호출될 수 있습니다. 숫자를 인수로 받고 Observable을 출력으로 생성할 수 있습니다.

이제 몇 가지 연산자를 살펴보겠습니다!

수도꼭지()

제 생각에는 이것은 매우 흥미롭고 간단합니다. console.log에서 소스의 정확한 데이터 미러를 볼 수 있습니다.

import { of, tap } from 'rxjs';

const source = of('Angular', 'Typescript', 'RxJs');

const exampleTap = source.pipe(
   tap(val => console.log(`Technologies: ${val}`)),
);

const subscribe = exampleTap.subscribe();

//Output: Technologies: Angular... Technologies: Typescript... Technologies: RxjS

지도()

제 생각에는 이것은 가장 중요한 연산자 중 하나입니다. 예를 들어 API 응답을 삭제하는 것과 같이 많은 작업을 수행할 수 있기 때문입니다. 그것은 Array.prototype.map()와 같으며 각 소스 값과 변환 함수를 수신하고 결과 값을 Observable로 내보냅니다.

// My API Response

[
 {
   "cityNameAPIResponse": "New York"
 },
 {
   "cityNameAPIResponse": "Texas"
 }
]

import { of, map } from 'rxjs';

// City is my class with nameCity property.

const exampleMap = myResponseCitiesAPIObservable.pipe(
  map((myCities) => {
    new City(myCities)
  })
);

subscribe = exampleMap.subscribe();

// OutPut Sanitized
//[
// {
//   nameCity: "New York"
// },
// {
//   nameCity: "Texas"
// }
//];

별개의()

distinct() 연산자는 이전 항목을 비교하여 반복되지 않는 값을 가진 Observable을 반환하기 때문에 "깨끗한"Observable을 반환합니다.

import { of, distinct } from 'rxjs';

const myCoursesObservable = of('Angular', 'Typescript', 'Angular', 'Typescript');

const exampleDistinct = myCoursesObservable.pipe(
  distinct(),
  tap(val => console.log(`Distinct Courses: ${val}`)),
);

 subscribe = exampleDistinct.subscribe();

//Output: Distinct Courses: Angular
//Output: Distinct Courses: Typescript

가져가다()

take() 연산자는 양을 전달할 수 있고 전달된 특정 항목 수와 함께 Observable을 반환하므로 특정 개수의 항목을 가져와야 할 때 유용합니다.

import { of, take } from 'rxjs';

const myIngredientsObservable = of('Banana', 'Orange', 'Milk', 'Typescript');

const exampleTake = myIngredientsObservable.pipe(
   take(2),
   tap(val => console.log(`Just some ingredients: ${val}`))
);

const subscribe = exampleTake.subscribe();

//Output: Just some ingredients: Banana
//Output: Just some ingredients: Orange

스위치맵()

중요한 RxJs 연산자의 switchMap()은 일반적으로 사용됩니다. 각 값을 매핑하고 새로운 인턴 Observable을 생성합니다. 따라서 switch라는 용어는 우리가 소스 observable에서 내부 Observable로 전환하기 때문이고 Map는 방출된 소스 값을 새로운 observable로 매핑하기 때문입니다. switchMap()을 사용하십시오.

import { of, switchMap } from 'rxjs';

const myGreetings = of('Hello guys, this is as awesome text!');

const exampleMap = myGreetings.pipe(
  switchMap((text: string) => {
    return of(text + ' Yeahh! A nice text :D');
  }),
    tap(val => console.log(`My new greetings: ${val}`))
);

const subscribe = exampleMap.subscribe();

// Output: My Favorite Cars: My new greetings: Hello guys, this is as awesome text! Yeahh! A nice text :D

필터()

filter() 연산자는 Array.prototype.filter() 와 같기 때문에 좋습니다. 따라서 필요를 충족시키기 위해 술어를 전달하고 소스 Observable에서 필요한 항목만 가져올 수 있습니다.

import { of, filter } from 'rxjs';

const myColorCarsCollection = of('Yellow BWM', 'Red BWM', 'Red BWM', 'Black BWM', 'Dark Blue BWM');

const exampleFilter = myCarColorCollection.pipe(
  filter(myCarColorCollection => myCarColorCollection.includes('Yellow') ||  myCarColorCollection.includes('Blue')),
  tap(val => console.log(`My Favorite Cars: ${val}`))
);

const subscribe = exampleFilter.subscribe();

// Output: My Favorite Cars: Yellow BWM
// Output: My Favorite Cars: Dark Blue BWM

디바운스타임()

debounceTime() 은 delay 와 같습니다. Observable 소스의 방출을 지정된 시간만큼 지연시키는 Observable을 반환하기 때문입니다. 따라서 앱에 검색 입력이 있고 API를 사용할 때 debounceTime(1000)을 사용할 수 있으며 사용자는 검색에 대한 전체 단어를 쓸 수 있고 불필요한 요청을 하지 않습니다.

import { fromEvent, debounceTime } from 'rxjs';

const searchInputField = document.getElementById('search-input');

const clientSearch$ = fromEvent(searchInputField, 'keypress');

clientSearch$
   .pipe(
      map((searchInput: any) => {
         searchInput.currentTarget.value
      }),
      debounceTime(500)
   )
   .subscribe(
     console.log
   );

// Output after 500: Car

반복하다()

반복 연산자는 repeat() 연산자에 매개변수로 숫자를 전달할 수 있고 지정된 숫자로 Observable을 반복하므로 어떤 경우에는 매우 간단하고 매우 유용합니다.

import { of, repeat } from 'rxjs';

const justMyTeam = of('Minnesota Vikings');

const exampleRepeat = justMyTeam.pipe(
  repeat(3),
  tap(val => console.log(`My team: ${val}`))
);

const subscribe = exampleRepeat.subscribe();

//Output: My team: Minnesota Vikings
//Output: My team: Minnesota Vikings
//Output: My team: Minnesota Vikings

그래서 그게 다야! 분명히 다른 멋진 연산자가 많이 있으며 볼 수 있습니다here. 나는 당신이 기사를 즐겼고 도움이 되었기를 바랍니다!

그리고 마지막으로 카드로 캐스케이드 목록 애니메이션을 만들어야 했던 적이 있습니까!? 그렇다면 에서 살펴보십시오.

안녕 여러분, 시간 내주셔서 감사합니다. 곧 뵙겠습니다!