takeWhile
signature: takeWhile(predicate: function(value, index): boolean, inclusive?: boolean): Observable
takeWhile(predicate: function(value, index): boolean, inclusive?: boolean): Observable
넘겨받은 표현식이 참인 동안, 값을 발생시킵니다.
💡 옵션 파라미터인 inclusive
가 true
로 지정되면, 참을 만족하지못하는 첫번째 아이템 또한 발생시킵니다.
예시
예시 1: 조건에 해당하는 값만 받습니다
( StackBlitz | jsBin | jsFiddle )
// RxJS v6+
import { of } from 'rxjs';
import { takeWhile } from 'rxjs/operators';
// 1,2,3,4,5를 발생시킵니다
const source$ = of(1, 2, 3, 4, 5);
//4 이하인 값만 발생시키고, 종료합니다
source$
.pipe(takeWhile(val => val <= 4))
// log: 1,2,3,4
.subscribe(val => console.log(val));
예시2: (v6.4+) inclusive를 활용한 takeWhile
( StackBlitz )
// RxJS v6.4+
import { of } from 'rxjs';
import { takeWhile, filter } from 'rxjs/operators';
const source$ = of(1, 2, 3, 9);
source$
// inclusive 를 설정하면, false를 리턴하게 하는 값도 발생되어집니다
.pipe(takeWhile(val => val <= 3, true))
// log: 1, 2, 3, 9
.subscribe(console.log);
예시 3: takeWhile 과 filter의 차이점
( StackBlitz | jsBin | jsFiddle )
// RxJS v6+
import { of } from 'rxjs';
import { takeWhile, filter } from 'rxjs/operators';
// 3, 3, 3, 9, 1, 4, 5, 8, 96, 3, 66, 3, 3, 3를 발생시킵니다
const source$ = of(3, 3, 3, 9, 1, 4, 5, 8, 96, 3, 66, 3, 3, 3);
// 소스의 값이 3일 때만 값을 발생시키고, 종료합니다
source$
.pipe(takeWhile(it => it === 3))
// log: 3, 3, 3
.subscribe(val => console.log('takeWhile', val));
source$
.pipe(filter(it => it === 3))
// log: 3, 3, 3, 3, 3, 3, 3
.subscribe(val => console.log('filter', val));
관련 사용법
추가 자료
takeWhile 📰 - 공식 문서
Completing a stream with takeWhile 📹💵 - John Linquist
📂 Source Code: https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/takeWhile.ts
Last updated
Was this helpful?