-
-
Save chrisdamba/7e42eee91e86667d75ade3278acbf27a to your computer and use it in GitHub Desktop.
Revisions
-
btroncone revised this gist
Dec 8, 2017 . 1 changed file with 0 additions and 2 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -4,8 +4,6 @@ A complete list of RxJS 5 operators with easy to understand explanations and runnable examples. ### Table of Contents * [buffer](#buffer) * [bufferCount](#buffercount) -
btroncone revised this gist
Dec 8, 2017 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,6 +1,6 @@ # RxJS 5 Operators By Example :warning: **UPDATE: I have moved the contents of this gist plus more to [http://www.learnrxjs.io](http://www.learnrxjs.io) and [https://github.com/btroncone/learn-rxjs](https://github.com/btroncone/learn-rxjs). For expanded examples, explanations, and resources, please check out this new location!** A complete list of RxJS 5 operators with easy to understand explanations and runnable examples. -
btroncone revised this gist
Oct 9, 2017 . 1 changed file with 2 additions and 2 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,6 +1,6 @@ # RxJS 5 Operators By Example :warning: **UPDATE: I have moved the contents of this gist plus more to [https://github.com/btroncone/learn-rxjs](https://github.com/btroncone/learn-rxjs) and [http://www.learnrxjs.io](http://www.learnrxjs.io). For expanded examples, explanations, and resources, please check out this new location!** A complete list of RxJS 5 operators with easy to understand explanations and runnable examples. -
btroncone revised this gist
Jul 11, 2016 . 1 changed file with 3 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,4 +1,7 @@ #RxJS 5 Operators By Example **UPDATE: I have moved the contents of this gist plus more to [https://github.com/btroncone/learn-rxjs](https://github.com/btroncone/learn-rxjs) and [http://www.learnrxjs.io](http://www.learnrxjs.io). For expanded examples, explanations, and resources, please check out this new location!** A complete list of RxJS 5 operators with easy to understand explanations and runnable examples. **[Chinese Version](https://gist.github.com/DrakeLeung/ecbcedab8534d4486a888ef777a76140)** by: [@DrakeLeung](https://github.com/DrakeLeung) -
btroncone revised this gist
Jun 9, 2016 . 1 changed file with 4 additions and 4 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -535,10 +535,10 @@ const subscription = source.subscribe({ #####signature: ` distinctUntilChanged(compare: function): Observable` *The gist: Only emit when the next value is different then the last...* ([demo](http://jsbin.com/wuhumodoha/edit?js,console) | [official docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-distinctUntilChanged)) ```js //only output distinct values, based on the last emitted value const myArrayWithDuplicatesInARow = Rx.Observable .from([1,1,2,2,3,1,2,3]); const distinctSub = myArrayWithDuplicatesInARow @@ -552,8 +552,8 @@ const nonDistinctSub = myArrayWithDuplicatesInARow const sampleObject = {name: 'Test'}; const myArrayWithDuplicateObjects = Rx.Observable.from([sampleObject, sampleObject, sampleObject]); //only out distinct objects, based on last emitted value const nonDistinctObjects = myArrayWithDuplicateObjects .distinctUntilChanged() //output: 'DISTINCT OBJECTS: {name: 'Test'} -
btroncone revised this gist
Jun 9, 2016 . 1 changed file with 0 additions and 20 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1046,26 +1046,6 @@ const exampleTwo = sourceTwo.take(5).repeat(2); //output: 0,1,2,3,4,5...0,1,2,3,4,5 const subscribeTwo = exampleTwo.subscribe(val => console.log(val)); ``` #### retry #####signature: `retry(number: number): Observable` *The gist: Retry specified number of times on error...* -
btroncone revised this gist
Jun 3, 2016 . 1 changed file with 48 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -36,6 +36,7 @@ A complete list of RxJS 5 operators with easy to understand explanations and run * [mapTo](#mapto) * [merge](#merge) * [mergeMap](#mergemap) * [partition](#partition) * [pluck](#pluck) * [publish](#publish) * [race](#race) @@ -902,6 +903,53 @@ const exampleThree = source //output: "Source: Hello, Promise: Hello World From Promise!" const subscribeThree = exampleThree.subscribe(val => console.log(val)); ``` #### partition #####signature: `partition(predicate: function: boolean, thisArg: any): [Observable, Observable]` *The gist: Split one observable into two based on predicate...* ([demo](http://jsbin.com/fuqojubaqu/edit?js,console) | [official docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-partition)) ```js const source = Rx.Observable.from([1,2,3,4,5,6]); //first value is true, second false const [evens, odds] = source.partition(val => val % 2 === 0); /* Output: "Even: 2" "Even: 4" "Even: 6" "Odd: 1" "Odd: 3" "Odd: 5" */ const subscribe = Rx.Observable.merge( evens .map(val => `Even: ${val}`), odds .map(val => `Odd: ${val}`) ).subscribe(val => console.log(val)); //if greater than 3 throw const example = source .map(val => { if(val > 3){ throw `${val} greater than 3!` } return {success: val}; }) .catch(val => Rx.Observable.of({error: val})); //split on success or error const [success, error] = example.partition(res => res.success) /* Output: "Success! 1" "Success! 2" "Success! 3" "Error! 4 greater than 3!" */ const subscribeTwo = Rx.Observable.merge( success.map(val => `Success! ${val.success}`), error.map(val => `Error! ${val.error}`) ).subscribe(val => console.log(val)); ``` #### pluck #####signature: `pluck(properties: ...args): Observable` *The gist: Pick out nested properties...* -
btroncone revised this gist
May 19, 2016 . 1 changed file with 1 addition and 3 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,7 +1,5 @@ #RxJS 5 Operators By Example A complete list of RxJS 5 operators with easy to understand explanations and runnable examples. **[Chinese Version](https://gist.github.com/DrakeLeung/ecbcedab8534d4486a888ef777a76140)** by: [@DrakeLeung](https://github.com/DrakeLeung) -
btroncone revised this gist
May 19, 2016 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -759,7 +759,7 @@ const exampleTwo = source.last(num => num % 2 === 0); const subscribeTwo = exampleTwo.subscribe(val => console.log(`Last to pass test: ${val}`)); ``` #### let #####signature: `let(function): Observable` *The gist: let me have the whole observable...* ([demo](http://jsbin.com/bivisofuxe/edit?js,console) | [official docs](https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/let.md)) -
btroncone revised this gist
May 19, 2016 . 1 changed file with 44 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -33,6 +33,7 @@ A (soon to be) complete list of RxJS 5 operators with easy to understand explana * [groupBy](#groupby) * [ignoreElements](#ignoreelements) * [last](#last) * [let](#let) * [map](#map) * [mapTo](#mapto) * [merge](#merge) @@ -757,6 +758,49 @@ const exampleTwo = source.last(num => num % 2 === 0); //output: "Last to pass test: 4" const subscribeTwo = exampleTwo.subscribe(val => console.log(`Last to pass test: ${val}`)); ``` #### let #####signature: `last(predicate: function): Observable` *The gist: let me have the whole observable...* ([demo](http://jsbin.com/bivisofuxe/edit?js,console) | [official docs](https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/let.md)) ```js const myArray = [1,2,3,4,5]; const myObservableArray = Rx.Observable.fromArray(myArray); //demonstrating the difference between let and other operators const test = myObservableArray .map(val => val + 1) //this fails, let behaves differently than most operators //val in this case is an observable //.let(val => val + 2) .subscribe(val => console.log('VALUE FROM ARRAY: ', val)); const letTest = myObservableArray .map(val => val + 1) //'let' me have the entire observable .let(obs => obs.map(val => val + 2)) .subscribe(val => console.log('VALUE FROM ARRAY WITH let: ', val)); //let provides flexibility to add multiple operators to source observable then return const letTestThree = myObservableArray .map(val => val + 1) .let(obs => obs .map(val => val + 2) //also, just return evens .filter(val => val % 2 === 0) ) .subscribe(val => console.log('let WITH MULTIPLE OPERATORS: ', val)); //pass in your own function to add operators to observable const obsArrayPlusYourOperators = (yourAppliedOperators) => { return myObservableArray .map(val => val + 1) .let(yourAppliedOperators) }; const addTenThenTwenty = obs => obs.map(val => val + 10).map(val => val + 20); const letTestFour = obsArrayPlusYourOperators(addTenThenTwenty) .subscribe(val => console.log('let FROM FUNCTION:', val)); ``` #### map #####signature: `map(project: Function, thisArg: any): Observable` *The gist: Apply projection to each element...* -
btroncone revised this gist
May 17, 2016 . 1 changed file with 3 additions and 3 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1351,7 +1351,7 @@ const subscribeTwo = example ``` #### windowWhen #####signature: `windowWhen(closingSelector: function(): Observable): Observable` *The gist: Close window at specified time frame emitting observable of collected values from source, repeat...* ([demo](http://jsbin.com/tuhaposemo/edit?js,console) | [official docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-windowWhen)) ```js @@ -1384,7 +1384,7 @@ const subscribeTwo = example ``` #### withLatestFrom #####signature: `withLatestFrom(other: Observable, project: Function): Observable` *The gist: When source emits, also give last value emitted from another observable...* ([demo](http://jsbin.com/xehucaketu/edit?js,console) | [official docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-withLatestFrom)) ```js @@ -1421,7 +1421,7 @@ const subscribeTwo = exampleTwo.subscribe(val => console.log(val)); ``` #### zip #####signature: `zip(observables: *): Observable` *The gist: After all observables emit, emit values as an array...* ([demo](http://jsbin.com/torusemimi/1/edit?js,console) | [official docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-zip)) ```js -
btroncone revised this gist
May 17, 2016 . 1 changed file with 33 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -58,6 +58,7 @@ A (soon to be) complete list of RxJS 5 operators with easy to understand explana * [windowToggle](#windowtoggle) * [windowWhen](#windowwhen) * [withLatestFrom](#withlatestfrom) * [zip](#zip) #### buffer #####signature: `buffer<T>(closingNotifier: Observable<any>): Observable<T[]>` @@ -1417,4 +1418,36 @@ const exampleTwo = secondSource ... */ const subscribeTwo = exampleTwo.subscribe(val => console.log(val)); ``` #### zip #####signature: `zip(observables: *): Observable` *The gist: After all observables emit, emit values as an array... * ([demo](http://jsbin.com/torusemimi/1/edit?js,console) | [official docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-zip)) ```js const sourceOne = Rx.Observable.of('Hello'); const sourceTwo = Rx.Observable.of('World!'); const sourceThree = Rx.Observable.of('Goodbye'); const sourceFour = Rx.Observable.of('World!'); //wait until all observables have emitted a value then emit all as an array const example = Rx.Observable .zip( sourceOne, sourceTwo.delay(1000), sourceThree.delay(2000), sourceFour.delay(3000) ); //output: ["Hello", "World!", "Goodbye", "World!"] const subscribe = example.subscribe(val => console.log(val)); //emit every 1s const interval = Rx.Observable.interval(1000); //when one observable completes no more values will be emitted const exampleTwo = Rx.Observable .zip( interval, interval.take(2) ); //output: [0,0]...[1,1] const subscribe = exampleTwo.subscribe(val => console.log(val)); ``` -
btroncone revised this gist
May 15, 2016 . 1 changed file with 38 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -57,6 +57,7 @@ A (soon to be) complete list of RxJS 5 operators with easy to understand explana * [windowTime](#windowtime) * [windowToggle](#windowtoggle) * [windowWhen](#windowwhen) * [withLatestFrom](#withlatestfrom) #### buffer #####signature: `buffer<T>(closingNotifier: Observable<any>): Observable<T[]>` @@ -1379,4 +1380,41 @@ const subscribeTwo = example 9 */ .subscribe(val => console.log(val)); ``` #### withLatestFrom #####signature: `withLatestFrom(other: Observable, project: Function): Observable` *The gist: When source emits, also give last value emitted from another observable... * ([demo](http://jsbin.com/xehucaketu/edit?js,console) | [official docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-withLatestFrom)) ```js //emit every 5s const source = Rx.Observable.interval(5000); //emit every 1s const secondSource = Rx.Observable.interval(1000); const example = source .withLatestFrom(secondSource) .map(([first, second]) => { return `First Source (5s): ${first} Second Source (1s): ${second}`; }); /* "First Source (5s): 0 Second Source (1s): 4" "First Source (5s): 1 Second Source (1s): 9" "First Source (5s): 2 Second Source (1s): 14" ... */ const subscribe = example.subscribe(val => console.log(val)); //withLatestFrom slower than source const exampleTwo = secondSource //both sources must emit at least 1 value (5s) before emitting .withLatestFrom(source) .map(([first, second]) => { return `Source (1s): ${first} Latest From (5s): ${second}`; }); /* "Source (1s): 4 Latest From (5s): 0" "Source (1s): 5 Latest From (5s): 0" "Source (1s): 6 Latest From (5s): 0" ... */ const subscribeTwo = exampleTwo.subscribe(val => console.log(val)); ``` -
btroncone revised this gist
May 14, 2016 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -56,7 +56,7 @@ A (soon to be) complete list of RxJS 5 operators with easy to understand explana * [windowCount](#windowcount) * [windowTime](#windowtime) * [windowToggle](#windowtoggle) * [windowWhen](#windowwhen) #### buffer #####signature: `buffer<T>(closingNotifier: Observable<any>): Observable<T[]>` -
btroncone revised this gist
May 14, 2016 . 1 changed file with 34 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -56,6 +56,7 @@ A (soon to be) complete list of RxJS 5 operators with easy to understand explana * [windowCount](#windowcount) * [windowTime](#windowtime) * [windowToggle](#windowtoggle) * [windowWhen](#windowWhen) #### buffer #####signature: `buffer<T>(closingNotifier: Observable<any>): Observable<T[]>` @@ -1345,4 +1346,37 @@ const subscribeTwo = example 22 */ .subscribe(val => console.log(val)); ``` #### windowWhen #####signature: `windowWhen(closingSelector: function(): Observable): Observable` *The gist: Close window at specified time frame emitting observable of collected values from source, repeat... * ([demo](http://jsbin.com/tuhaposemo/edit?js,console) | [official docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-windowWhen)) ```js //emit immediately then every 1s const source = Rx.Observable.timer(0,1000); const example = source //close window every 5s and emit observable of collected values from source .windowWhen((val) => Rx.Observable.interval(5000)) .do(() => console.log('NEW WINDOW!')) const subscribeTwo = example //window emits nested observable .mergeAll() /* output: "NEW WINDOW!" 0 1 2 3 4 "NEW WINDOW!" 5 6 7 8 9 */ .subscribe(val => console.log(val)); ``` -
btroncone revised this gist
May 14, 2016 . 1 changed file with 36 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -55,6 +55,7 @@ A (soon to be) complete list of RxJS 5 operators with easy to understand explana * [window](#window) * [windowCount](#windowcount) * [windowTime](#windowtime) * [windowToggle](#windowtoggle) #### buffer #####signature: `buffer<T>(closingNotifier: Observable<any>): Observable<T[]>` @@ -1309,4 +1310,39 @@ const subscribeTwo = example 5 */ .subscribe(val => console.log(val)); ``` #### windowToggle #####signature: `windowToggle(openings: Observable, closingSelector: function(value): Observable): Observable` *The gist: Collect and emit observable of values from source between opening and closing emission* ([demo](http://jsbin.com/xasofupuka/1/edit?js,console) | [official docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-windowToggle)) ```js //emit immediately then every 1s const source = Rx.Observable.timer(0,1000); //toggle window on every 5 const toggle = Rx.Observable.interval(5000); const example = source //turn window on every 5s .windowToggle(toggle, (val) => Rx.Observable.interval(val * 1000)) .do(() => console.log('NEW WINDOW!')) const subscribeTwo = example //window emits nested observable .mergeAll() /* output: "NEW WINDOW!" 5 "NEW WINDOW!" 10 11 "NEW WINDOW!" 15 16 "NEW WINDOW!" 20 21 22 */ .subscribe(val => console.log(val)); ``` -
btroncone revised this gist
May 12, 2016 . 1 changed file with 31 additions and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -54,6 +54,7 @@ A (soon to be) complete list of RxJS 5 operators with easy to understand explana * [switchMap](#switchmap) * [window](#window) * [windowCount](#windowcount) * [windowTime](#windowtime) #### buffer #####signature: `buffer<T>(closingNotifier: Observable<any>): Observable<T[]>` @@ -1250,7 +1251,7 @@ const subscribe = count.subscribe(val => console.log(`Window ${val}:`)); const subscribeTwo = example.mergeAll().subscribe(val => console.log(val)); ``` #### windowCount #####signature: `windowCount(windowSize: number, startWindowEvery: number): Observable` *The gist: Observable of values from source, emitted each time count is fulfilled* ([demo](http://jsbin.com/nezuvacexe/1/edit?js,console) | [official docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-windowCount)) @@ -1279,4 +1280,33 @@ const subscribeTwo = example 7 */ .subscribe(val => console.log(val)); ``` #### windowTime #####signature: `windowTime(windowTimeSpan: number, windowCreationInterval: number, scheduler: Scheduler): Observable` *The gist: Emit an observable of values collected from source every specified time span* ([demo](http://jsbin.com/mifayacoqo/1/edit?js,console) | [official docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-windowTime)) ```js //emit immediately then every 1s const source = Rx.Observable.timer(0,1000); const example = source //start new window every 3s .windowTime(3000) .do(() => console.log('NEW WINDOW!')) const subscribeTwo = example //window emits nested observable .mergeAll() /* output: "NEW WINDOW!" 0 1 2 "NEW WINDOW!" 3 4 5 */ .subscribe(val => console.log(val)); ``` -
btroncone revised this gist
May 12, 2016 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1251,7 +1251,7 @@ const subscribeTwo = example.mergeAll().subscribe(val => console.log(val)); ``` #### windowCount #####signature: ` windowCount(windowSize: number, startWindowEvery: number): Observable` *The gist: Observable of values from source, emitted each time count is fulfilled* ([demo](http://jsbin.com/nezuvacexe/1/edit?js,console) | [official docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-windowCount)) ```js -
btroncone revised this gist
May 11, 2016 . 1 changed file with 32 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -53,6 +53,7 @@ A (soon to be) complete list of RxJS 5 operators with easy to understand explana * [startWith](#startwith) * [switchMap](#switchmap) * [window](#window) * [windowCount](#windowcount) #### buffer #####signature: `buffer<T>(closingNotifier: Observable<any>): Observable<T[]>` @@ -1247,4 +1248,35 @@ const count = example.scan((acc, curr) => acc + 1, 0) */ const subscribe = count.subscribe(val => console.log(`Window ${val}:`)); const subscribeTwo = example.mergeAll().subscribe(val => console.log(val)); ``` #### windowCount #####signature: ` windowCount(windowSize: number, startWindowEvery: number): Observable` *The gist: Window of nested observables based on count* ([demo](http://jsbin.com/nezuvacexe/1/edit?js,console) | [official docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-windowCount)) ```js //emit every 1s const source = Rx.Observable.interval(1000); const example = source //start new window every 4 emitted values .windowCount(4) .do(() => console.log('NEW WINDOW!')) const subscribeTwo = example //window emits nested observable .mergeAll() /* output: "NEW WINDOW!" 0 1 2 3 "NEW WINDOW!" 4 5 6 7 */ .subscribe(val => console.log(val)); ``` -
btroncone revised this gist
May 11, 2016 . 1 changed file with 26 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -52,6 +52,7 @@ A (soon to be) complete list of RxJS 5 operators with easy to understand explana * [skipWhile](#skipwhile) * [startWith](#startwith) * [switchMap](#switchmap) * [window](#window) #### buffer #####signature: `buffer<T>(closingNotifier: Observable<any>): Observable<T[]>` @@ -1221,4 +1222,29 @@ const sourceTwo = Rx.Observable.fromEvent(document, 'click'); const exampleTwo = sourceTwo.switchMap(val => Rx.Observable.interval(3000).mapTo('Hello, I made it!')); //(click)...3s...'Hello I made it!'...(click)...2s(click)... const subscribeTwo = exampleTwo.subscribe(val => console.log(val)); ``` #### window #####signature: `window(windowBoundaries: Observable): Observable` *The gist: Observable of values for window of time* ([demo](http://jsbin.com/jituvajeri/1/edit?js,console) | [official docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-window)) ```js //emit immediately then every 1s const source = Rx.Observable.timer(0, 1000); const example = source .window(Rx.Observable.interval(3000)) const count = example.scan((acc, curr) => acc + 1, 0) /* "Window 1:" 0 1 2 "Window 2:" 3 4 5 ... */ const subscribe = count.subscribe(val => console.log(`Window ${val}:`)); const subscribeTwo = example.mergeAll().subscribe(val => console.log(val)); ``` -
btroncone revised this gist
May 10, 2016 . 1 changed file with 21 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -51,6 +51,7 @@ A (soon to be) complete list of RxJS 5 operators with easy to understand explana * [skipUntil](#skipuntil) * [skipWhile](#skipwhile) * [startWith](#startwith) * [switchMap](#switchmap) #### buffer #####signature: `buffer<T>(closingNotifier: Observable<any>): Observable<T[]>` @@ -1200,4 +1201,24 @@ const exampleTwo = sourceTwo "Hello World! Goodbye World!" */ const subscribeTwo = exampleTwo.subscribe(val => console.log(val)); ``` #### switchMap #####signature: `switchMap(a: Observable): Observable` *The gist: When source emits, switch to and emit values emitted from latest inner observable* ([demo](http://jsbin.com/decinatisu/1/edit?js,console,output) | [official docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-switchMap)) ```js //emit immediately, then every 5s const source = Rx.Observable.timer(0, 5000); //switch to new inner observable when source emits, emit items that are emitted const example = source.switchMap(() => Rx.Observable.interval(500)); //output: 0,1,2,3,4,5,6,7,8,9...0,1,2,3,4,5,6,7,8 const subscribe = example.subscribe(val => console.log(val)); //emit every click const sourceTwo = Rx.Observable.fromEvent(document, 'click'); //if another click comes within 3s, message will not be emitted const exampleTwo = sourceTwo.switchMap(val => Rx.Observable.interval(3000).mapTo('Hello, I made it!')); //(click)...3s...'Hello I made it!'...(click)...2s(click)... const subscribeTwo = exampleTwo.subscribe(val => console.log(val)); ``` -
btroncone revised this gist
May 8, 2016 . 1 changed file with 29 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -50,6 +50,7 @@ A (soon to be) complete list of RxJS 5 operators with easy to understand explana * [skip](#skip) * [skipUntil](#skipuntil) * [skipWhile](#skipwhile) * [startWith](#startwith) #### buffer #####signature: `buffer<T>(closingNotifier: Observable<any>): Observable<T[]>` @@ -1171,4 +1172,32 @@ const source = Rx.Observable.interval(1000); const example = source.skipWhile(val => val < 5); //output: 5...6...7...8........ const subscribe = example.subscribe(val => console.log(val)); ``` #### startWith #####signature: `startWith(an: Values): Observable` *The gist: Emit specified item first...* ([demo](http://jsbin.com/jeyakemume/1/edit?js,console) | [official docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-startWith)) ```js //emit (1,2,3) const source = Rx.Observable.of(1,2,3); //start with 0 const example = source.startWith(0); //output: 0,1,2,3 const subscribe = example.subscribe(val => console.log(val)); //emit ('World!', 'Goodbye', 'World!') const sourceTwo = Rx.Observable.of('World!', 'Goodbye', 'World!'); //start with 'Hello', concat current string to previous const exampleTwo = sourceTwo .startWith('Hello') .scan((acc, curr) => `${acc} ${curr}`); /* output: "Hello" "Hello World!" "Hello World! Goodbye" "Hello World! Goodbye World!" */ const subscribeTwo = exampleTwo.subscribe(val => console.log(val)); ``` -
btroncone revised this gist
May 7, 2016 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1159,7 +1159,7 @@ const example = source.skipUntil(Rx.Observable.timer(6000)); //output: 5...6...7...8........ const subscribe = example.subscribe(val => console.log(val)); ``` #### skipWhile #####signature: `skipWhile(predicate: Function): Observable` *The gist: Skip emitted items from source until provided expression is false...* -
btroncone revised this gist
May 7, 2016 . 1 changed file with 0 additions and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1171,5 +1171,4 @@ const source = Rx.Observable.interval(1000); const example = source.skipWhile(val => val < 5); //output: 5...6...7...8........ const subscribe = example.subscribe(val => console.log(val)); ``` -
btroncone revised this gist
May 7, 2016 . 1 changed file with 15 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -49,6 +49,7 @@ A (soon to be) complete list of RxJS 5 operators with easy to understand explana * [single](#single) * [skip](#skip) * [skipUntil](#skipuntil) * [skipWhile](#skipwhile) #### buffer #####signature: `buffer<T>(closingNotifier: Observable<any>): Observable<T[]>` @@ -1157,4 +1158,18 @@ const source = Rx.Observable.interval(1000); const example = source.skipUntil(Rx.Observable.timer(6000)); //output: 5...6...7...8........ const subscribe = example.subscribe(val => console.log(val)); ``` #### skipUntil #####signature: `skipWhile(predicate: Function): Observable` *The gist: Skip emitted items from source until provided expression is false...* ([demo](http://jsbin.com/bemikuleya/edit?js,console) | [official docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-skipWhile)) ```js //emit every 1s const source = Rx.Observable.interval(1000); //skip emitted values from source while value is less than 5 const example = source.skipWhile(val => val < 5); //output: 5...6...7...8........ const subscribe = example.subscribe(val => console.log(val)); ``` -
btroncone revised this gist
May 7, 2016 . 1 changed file with 23 additions and 9 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -48,6 +48,7 @@ A (soon to be) complete list of RxJS 5 operators with easy to understand explana * [share](#share) * [single](#single) * [skip](#skip) * [skipUntil](#skipuntil) #### buffer #####signature: `buffer<T>(closingNotifier: Observable<any>): Observable<T[]>` @@ -1029,7 +1030,7 @@ const example = source "Value 6 was too high!" --Wait 5 seconds then repeat */ const subscribe = example.subscribe(val => console.log(val)); ``` #### sample #####signature: `sample(sampler: Observable): Observable` @@ -1042,7 +1043,7 @@ const source = Rx.Observable.interval(1000); //sample last emitted value from source every 2s const example = source.sample(Rx.Observable.interval(2000)); //output: 2..4..6..8.. const subscribe = example.subscribe(val => console.log(val)); const sourceTwo = Rx.Observable.zip( //emit 'Joe', 'Frank' and 'Bob' in sequence @@ -1053,7 +1054,7 @@ const sourceTwo = Rx.Observable.zip( //sample last emitted value from source every 2.5s const exampleTwo = sourceTwo.sample(Rx.Observable.interval(2500)); //output: ["Joe", 0]...["Frank", 1]........... const subscribeTwo = exampleTwo.subscribe(val => console.log(val)); ``` #### scan #####signature: `scan(accumulator: function, seed: any): Observable` @@ -1103,8 +1104,8 @@ const example = source "***SIDE EFFECT***" "***RESULT***" */ const subscribe = example.subscribe(val => console.log(val)); const subscribeTwo = example.subscribe(val => console.log(val)); //share observable among subscribers const sharedExample = example.share(); @@ -1115,8 +1116,8 @@ const sharedExample = example.share(); "***RESULT***" "***RESULT***" */ const subscribeThree = sharedExample.subscribe(val => console.log(val)); const subscribeFour = sharedExample.subscribe(val => console.log(val)); ``` #### single #####signature: `single(a: Function): Observable` @@ -1129,7 +1130,7 @@ const source = Rx.Observable.from([1,2,3,4,5]); //emit one item that matches predicate const example = source.single(val => val === 4); //output: 4 const subscribe = example.subscribe(val => console.log(val)); ``` #### skip #####signature: `skip(the: Number): Observable` @@ -1142,5 +1143,18 @@ const source = Rx.Observable.interval(1000); //skip the first 5 emitted values const example = source.skip(5); //output: 5...6...7...8........ const subscribe = example.subscribe(val => console.log(val)); ``` #### skipUntil #####signature: `skipUntil(the: Observable): Observable` *The gist: Skip emitted items from source until inner observable emits...* ([demo](http://jsbin.com/tapizososu/1/edit?js,console) | [ official docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-skipUntil)) ```js //emit every 1s const source = Rx.Observable.interval(1000); //skip emitted values from source until inner observable emits (6s) const example = source.skipUntil(Rx.Observable.timer(6000)); //output: 5...6...7...8........ const subscribe = example.subscribe(val => console.log(val)); ``` -
btroncone revised this gist
May 5, 2016 . 1 changed file with 14 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -47,6 +47,7 @@ A (soon to be) complete list of RxJS 5 operators with easy to understand explana * [scan](#scan) * [share](#share) * [single](#single) * [skip](#skip) #### buffer #####signature: `buffer<T>(closingNotifier: Observable<any>): Observable<T[]>` @@ -1129,4 +1130,17 @@ const source = Rx.Observable.from([1,2,3,4,5]); const example = source.single(val => val === 4); //output: 4 const subscribe = example.subscribe(console.log); ``` #### skip #####signature: `skip(the: Number): Observable` *The gist: Skip a specified number of emitted items...* ([demo](http://jsbin.com/hacepudabi/1/edit?js,console) | [ official docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-skip)) ```js //emit every 1s const source = Rx.Observable.interval(1000); //skip the first 5 emitted values const example = source.skip(5); //output: 5...6...7...8........ const subscribe = example.subscribe(console.log); ``` -
btroncone revised this gist
May 5, 2016 . 1 changed file with 14 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -46,6 +46,7 @@ A (soon to be) complete list of RxJS 5 operators with easy to understand explana * [sample](#sample) * [scan](#scan) * [share](#share) * [single](#single) #### buffer #####signature: `buffer<T>(closingNotifier: Observable<any>): Observable<T[]>` @@ -1115,4 +1116,17 @@ const sharedExample = example.share(); */ const subscribeThree = sharedExample.subscribe(console.log); const subscribeFour = sharedExample.subscribe(console.log); ``` #### single #####signature: `single(a: Function): Observable` *The gist: Emit single item that matches condition...* ([demo](http://jsbin.com/solecibuza/1/edit?js,console) | [ official docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-single)) ```js //emit (1,2,3,4,5) const source = Rx.Observable.from([1,2,3,4,5]); //emit one item that matches predicate const example = source.single(val => val === 4); //output: 4 const subscribe = example.subscribe(console.log); ``` -
btroncone revised this gist
May 3, 2016 . 1 changed file with 36 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -45,6 +45,7 @@ A (soon to be) complete list of RxJS 5 operators with easy to understand explana * [retryWhen](#retrywhen) * [sample](#sample) * [scan](#scan) * [share](#share) #### buffer #####signature: `buffer<T>(closingNotifier: Observable<any>): Observable<T[]>` @@ -1079,4 +1080,39 @@ const subscribe = objectScan.subscribe(val => console.log('Accumulated object:', testSubjectTwo.next({name: 'Joe'}); // {name: 'Joe'} testSubjectTwo.next({age: 30}); // {name: 'Joe', age: 30} testSubjectTwo.next({favoriteLanguage: 'JavaScript'}); // {name: 'Joe', age: 30, favoriteLanguage: 'JavaScript'} ``` #### share #####signature: `share(): Observable` *The gist: Share observable among multiple subscribers...* ([demo](http://jsbin.com/jobiyomari/1/edit?js,console) | [ official docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-share)) ```js //emit value in 1s const source = Rx.Observable.timer(1000); //log side effect, emit result const example = source .do(() => console.log('***SIDE EFFECT***')) .mapTo('***RESULT***'); /* ***NOT SHARED, SIDE EFFECT WILL BE EXECUTED TWICE*** output: "***SIDE EFFECT***" "***RESULT***" "***SIDE EFFECT***" "***RESULT***" */ const subscribe = example.subscribe(console.log); const subscribeTwo = example.subscribe(console.log); //share observable among subscribers const sharedExample = example.share(); /* ***SHARED, SIDE EFFECT EXECUTED ONCE*** output: "***SIDE EFFECT***" "***RESULT***" "***RESULT***" */ const subscribeThree = sharedExample.subscribe(console.log); const subscribeFour = sharedExample.subscribe(console.log); ``` -
btroncone revised this gist
May 2, 2016 . 1 changed file with 29 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -44,6 +44,7 @@ A (soon to be) complete list of RxJS 5 operators with easy to understand explana * [retry](#retry) * [retryWhen](#retrywhen) * [sample](#sample) * [scan](#scan) #### buffer #####signature: `buffer<T>(closingNotifier: Observable<any>): Observable<T[]>` @@ -1050,4 +1051,32 @@ const sourceTwo = Rx.Observable.zip( const exampleTwo = sourceTwo.sample(Rx.Observable.interval(2500)); //output: ["Joe", 0]...["Frank", 1]........... const subscribeTwo = exampleTwo.subscribe(console.log); ``` #### scan #####signature: `scan(accumulator: function, seed: any): Observable` *The gist: Reduce over time...* ([demo](http://jsbin.com/jopikihuvu/1/edit?js,console) | [ official docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-scan)) ```js const testSubject = new Rx.Subject(); //basic scan example, sum over time starting with zero const basicScan = testSubject .startWith(0) .scan((acc, curr) => acc + curr); //log accumulated values const subscribe = basicScan.subscribe(val => console.log('Accumulated total:', val)); //next values into subject, adding to the current sum testSubject.next(1); //1 testSubject.next(2); //3 testSubject.next(3); //6 const testSubjectTwo = new Rx.Subject(); //scan example building an object over time const objectScan = testSubjectTwo.scan((acc, curr) => Object.assign({}, acc, curr), {}); //log accumulated values const subscribe = objectScan.subscribe(val => console.log('Accumulated object:', val)); //next values into subject, adding properties to object testSubjectTwo.next({name: 'Joe'}); // {name: 'Joe'} testSubjectTwo.next({age: 30}); // {name: 'Joe', age: 30} testSubjectTwo.next({favoriteLanguage: 'JavaScript'}); // {name: 'Joe', age: 30, favoriteLanguage: 'JavaScript'} ```
NewerOlder