home강의 홈으로
Section 2. Operator - RxJS의 다양한 연산자들
Lesson 3. take와 skip 관련 연산자들
<script src="https://unpkg.com/@reactivex/rxjs/dist/global/rxjs.umd.js"></script>

Take 관련 Operator

take : 앞에서부터 N개 선택

const { range, interval, fromEvent } = rxjs const { take, filter, pluck } = rxjs.operators
range(1, 20).pipe( take(5) ).subscribe(console.log) range(1, 20).pipe( filter(x => x % 2 === 0), take(5) ).subscribe(console.log) range(1, 20).pipe( take(5), filter(x => x % 2 === 0) ).subscribe(console.log)
interval(1000).pipe( take(5) ).subscribe( console.log, err => console.error(err), _ => console.log('COMPLETE') )
fromEvent(document, 'click').pipe( take(5), pluck('x') ).subscribe( console.log, err => console.error(err), _ => console.log('COMPLETE') ) fromEvent(document, 'click').pipe( pluck('x'), filter(x => x < 200), take(5), ).subscribe( console.log, err => console.error(err), _ => console.log('COMPLETE') )

takeLast : 뒤에서부터 N개 선택

const { range, interval, fromEvent } = rxjs const { takeLast, take, pluck } = rxjs.operators
range(1, 20).pipe( takeLast(5) ).subscribe(console.log) interval(1000).pipe( takeLast(5) ).subscribe( console.log, err => console.error(err), _ => console.log('COMPLETE') ) interval(1000).pipe( take(10), takeLast(5) ).subscribe( console.log, err => console.error(err), _ => console.log('COMPLETE') ) fromEvent(document, 'click').pipe( takeLast(5), pluck('x') ).subscribe( console.log, err => console.error(err), _ => console.log('COMPLETE') ) fromEvent(document, 'click').pipe( take(10), takeLast(5), pluck('x') ).subscribe( console.log, err => console.error(err), _ => console.log('COMPLETE') )

takeWhile : ~하는동안 선택

const { range, interval, fromEvent } = rxjs const { takeWhile, takeLast, filter, pluck } = rxjs.operators
range(1, 20).pipe( takeWhile(x => x <= 10) ).subscribe(console.log) interval(1000).pipe( takeWhile(x => x < 5) ).subscribe( console.log, err => console.error(err), _ => console.log('COMPLETE') ) fromEvent(document, 'click').pipe( pluck('x'), takeWhile(x => x < 200), ).subscribe( console.log, err => console.error(err), _ => console.log('COMPLETE') )

takeUntil : 기준이 되는 스트림이 발행하기까지

const { interval, timer, fromEvent } = rxjs const { ajax } = rxjs.ajax const { takeUntil, pluck, tap } = rxjs.operators obs1$ = interval(1000) obs2$ = fromEvent(document, 'click') obs1$.pipe( takeUntil(obs2$) ).subscribe( console.log, err => console.error(err), _ => console.log('COMPLETE') ) obs1$ = fromEvent(document, 'click') obs2$ = timer(5000) obs1$.pipe( pluck('x'), takeUntil(obs2$) ).subscribe( console.log, err => console.error(err), _ => console.log('COMPLETE') ) interval(50).pipe( takeUntil( ajax('http://127.0.0.1:3000/people/name/random').pipe( pluck('response'), tap(console.log) ) ) ).subscribe(console.log)


skip 관련 Operator

skip : 앞에서부터 N개 건너뛰기

const { range, interval, fromEvent } = rxjs const { skip, filter, pluck } = rxjs.operators
range(1, 20).pipe( skip(5) ).subscribe(console.log) interval(1000).pipe( skip(5) ).subscribe( console.log, err => console.error(err), _ => console.log('COMPLETE') ) fromEvent(document, 'click').pipe( skip(5), pluck('x') ).subscribe( console.log, err => console.error(err), _ => console.log('COMPLETE') )

skipLast : 뒤에서부터 N개 건너뛰기

const { range, interval, fromEvent } = rxjs const { skipLast, pluck } = rxjs.operators
range(1, 20).pipe( skipLast(5) ).subscribe(console.log)

❗❗❗

interval(1000).pipe( skipLast(5) ).subscribe( console.log, err => console.error(err), _ => console.log('COMPLETE') ) fromEvent(document, 'click').pipe( skipLast(5), pluck('x') ).subscribe( console.log, err => console.error(err), _ => console.log('COMPLETE') )

skipWhile : ~하는동안 건너뛰기

const { range, interval, fromEvent } = rxjs const { skipWhile, filter, pluck } = rxjs.operators
range(1, 20).pipe( skipWhile(x => x <= 10) ).subscribe(console.log) interval(1000).pipe( skipWhile(x => x < 5) ).subscribe( console.log, err => console.error(err), _ => console.log('COMPLETE') ) fromEvent(document, 'click').pipe( pluck('x'), skipWhile(x => x < 200), ).subscribe( console.log, err => console.error(err), _ => console.log('COMPLETE') )

skipUntil : 기준이 되는 스트림이 발행하고부터

const { interval, timer, fromEvent } = rxjs const { skipUntil, pluck } = rxjs.operators const obs1$ = interval(1000) const obs2$ = fromEvent(document, 'click') obs1$.pipe( skipUntil(obs2$) ).subscribe( console.log, err => console.error(err), _ => console.log('COMPLETE') ) const obs1$ = fromEvent(document, 'click') const obs2$ = timer(5000) obs1$.pipe( pluck('x'), skipUntil(obs2$) ).subscribe( console.log, err => console.error(err), _ => console.log('COMPLETE') )

🤔얄코에게 질문하기질문은 반.드.시 이리로 보내주세요! ( 강의사이트 질문기능 ✖ )

강의에서 이해가 안 되거나 실습상 문제가 있는 부분,
설명이 잘못되었거나 미흡한 부분을 메일로 알려주세요!

답변드린 뒤 필요할 경우 본 페이지에
관련 내용을 추가/수정하도록 하겠습니다.

이메일 주소
yalco@yalco.kr
메일 제목 (반드시 아래 제목을 붙여넣어주세요!)
[질문] RxJS 2-3

🛑질문 전 필독!!

  • 구글링을 먼저 해 주세요. 들어오는 질문의 절반 이상은 구글에 검색해 보면 1분 이내로 답을 찾을 수 있는 내용들입니다.
  • 오류 메시지가 있을 경우 이를 구글에 복붙해서 검색해보면 대부분 짧은 시간 내 해결방법을 찾을 수 있습니다.
  • 강의 페이지에 추가사항 등 놓친 부분이 없는지 확인해주세요. 자주 들어오는 질문은 페이지에 추가사항으로 업데이트됩니다.
  • "유료파트의 강의페이지는 어디 있나요?" - 각 영상의 시작부분 검은 화면마다 해당 챕터의 강의페이지 링크가 있습니다.
  • 질문을 보내주실 때는 문제가 어떻게 발생했고 어떤 상황인지 등을 구체적으로 적어주세요. 스크린샷을 첨부해주시면 더욱 좋습니다.
🌏 Why not change the world?