-
-
Save musicq/686a53f68b4370ed5aae65a7cdbde777 to your computer and use it in GitHub Desktop.
Revisions
-
lyyourc revised this gist
May 17, 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 @@ -1585,5 +1585,5 @@ const exampleTwo = Rx.Observable iterval.take(2) ) // 输出:[0, 0]...[1,1] const subscribeTwo = exampleTwo.subscribe(console.log) ``` -
lyyourc revised this gist
May 17, 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 @@ - [windowToggle](#windowtoggle) - [windowWhen](#windowwhen) - [withLatestFrom](#withlastestFrom) - [zip](#zip) #### buffer ##### signature: `buffer<T>(closingNotifier: Observable<any>): Observable<T[]>` @@ -1550,4 +1551,39 @@ const exampleTwo = secondSource * Source(1s): 6 Latest Lastest from(5s): 0 */ const subscribeTwo = exampleTwo.subscribe(console.log) ``` #### zip ##### signature: `zip(observables: *): Observable` 等到所有的 Observable 都 emit 之后,才作为数组返回。 ([demo](http://jsbin.com/torusemimi/1/edit?js,console) | [docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-zip)) ```javascript const sourceOne = Rx.Observable.of('Hello') const sourceTwo = Rx.Observable.of('World') const sourceThree = Rx.Observable.of('Goodbye') const sourceFour = Rx.Observable.of('World!') // 等到所有的 Observable 都 emit 之后,才把它们作为数组 emit 出去 const example = Rx.Observable .zip( sourceOne, sourceTwo.delay(1000), sourceThree.delay(2000), sourceFour.delay(3000) ) // 输出:['Hello', 'World', 'Goodbye', 'World!'] const subscribe = example.subscribe(console.log) // 每隔1s emit const interval = Rx.Observable.interval(1000) // 当一个 Observable complete 后,再也不会 emit 任何值 const exampleTwo = Rx.Observable .zip( interval, iterval.take(2) ) // 输出:[0, 0]...[1,1] const subscribeTwo = exampleTwo.subscribe(console.lgo) ``` -
lyyourc revised this gist
May 16, 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 @@ -54,6 +54,7 @@ - [windowTime](#windowtime) - [windowToggle](#windowtoggle) - [windowWhen](#windowwhen) - [withLatestFrom](#withlastestFrom) #### buffer ##### signature: `buffer<T>(closingNotifier: Observable<any>): Observable<T[]>` @@ -1514,4 +1515,39 @@ const subscribe = example * 9 */ .subscribe(console.log) ``` #### withLatestFrom ##### signature: `withLatestFrom(other: Observable, project: Function): Observable` 当 source emit 的时候,同时也返回另一个 Obserable 最近 emit 的那个值。 ([demo](http://jsbin.com/xehucaketu/edit?js,console) | [docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-withLatestFrom)) ```javascript const source = Rx.Observable.interval(5000) const secondSource = Rx.Observable.interval(1000) const example = source .withLatestFrom(secondSource) .map(([first, second]) => `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(console.log) // withLastest 比 source 慢 const exampleTwo = secondSource .withLatestFrom(source) .map(([first, second]) => `Source(1s): ${first} Latest from(5s): ${second}`) /* * Source(1s): 4 Latest Lastest from(5s): 0 * Source(1s): 5 Latest Lastest from(5s): 0 * Source(1s): 6 Latest Lastest from(5s): 0 */ const subscribeTwo = exampleTwo.subscribe(console.log) ``` -
lyyourc revised this gist
May 15, 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 @@ -474,7 +474,7 @@ const subscribeThree = evensCount.subscribe(val => console.log(`Count of Even Nu #### debounce ##### signature: `debounce(durationSelector: function): Observable` 忽略 source Observable 某段时间内的 emit 的值。 ([demo](http://jsbin.com/cofofizopo/1/edit?js,console) | [docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-debounce)) @@ -489,7 +489,7 @@ const example = Rx.Observable.of('WAIT', 'ONE', 'SECOND', 'Last will display') const debouncedExmaple = example.debounce(() => Rx.Observable.timer(1000)) /* * 在这个例子中,所有的值除了最后一个之外全部都忽略掉 * 输出:'Last will display' */ const subscribe = deboundedExmaple.subscibe(val => console.log(val)) @@ -512,7 +512,7 @@ const subscribeTwo = debounceInterval.subscribe(val => console.log(`Example Two: #### debounceTime ##### signature: `debounceTime(dueTime: number, scheduler: Scheduler): Observable` 忽略 source Observable 某段时间内的 emit 的值。 ([demo](http://jsbin.com/kacijarogi/1/edit?js,console,output) | [docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-debounceTime)) -
lyyourc revised this gist
May 15, 2016 . 1 changed file with 10 additions and 10 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 @@ -384,7 +384,7 @@ const subscribeTwo = exampleTwo.subscribe(val => console.log('Exmaple w/ Promise // 第一个参数返回的值,会传给第二个参数 const exampleWithSelector = source.concatMap(val => examplePromise(val), result => `${result} w/ selector!`) // 输出:Example w/ Selector: 'Hello w/ Selector', Example w/ Selector: 'Goodbye w/ Selector' const subscribeThree = exampleWithSelector @@ -406,7 +406,7 @@ const interval = Rx.Observable.interval(2000) const message = Rx.Observable.of(`Second(s) elapsed!`) // 当 `interval` emit 时,subscribe `message` 直到他 complete ,最后合并结果 const example = interval.concatMapTo(message, (time, msg) => `${time} ${msg}`) // 输出:`0 Second(s) elapsed! 1 Second(s) elapsed!` const subscribe = example.subscribe(val => console.log(val)) @@ -588,7 +588,7 @@ const message = Rx.Observable.interval(3000) // 在5s后 emit 值 const delayForFiveSeconds = () => Rx.Observable.timer(5000) // 在5s后,开始 emit 值 const delayWhenExample = message.delayWhen(delayForFiveSeconds) // 输出:延迟5s后, // 5s....1...2...3 @@ -944,7 +944,7 @@ const example = Rx.Observable.merge( const subscribe = example.subscribe(val => console.log(val)) // merge 可以当作 Observable instance 的一个方法 const exampleTwo = first.merge(fourth) // 输出:0, 1, 0, 2... const subscribeTwo = exampleTwo.subscribe(val => console.log(val)) ``` @@ -976,7 +976,7 @@ const subscribeTwo = exampleTwo.subscribe(val => console.log(val)) const exampleThree = source .mergeMap(val => myPromise(val), (valueFromSource, valueFromPromise) => { return `Source: ${valueFromSource}, Promise: ${valueFromPromise}` } ) @@ -1044,7 +1044,7 @@ const subscribeTwo = example.subscribe(val => console.log(val)) // 5秒后调用 connect 方法,这会引起 source 开始 emit 值 setTimeout(() => { example.connect() }, 5000) ``` #### race @@ -1058,11 +1058,11 @@ setTimeout(() => { // 让第一个 Observable emit const example = Rx.Observable.race( Rx.Observable.interval(1500), Rx.Observable.interval(1000).mapTo('1s won!'), Rx.Observable.interval(2000), Rx.Observable.interval(2500) ) // 输出:'1s won!'...'1s won!'... const subscribe = example.subscribe(val => console.log(val)) ``` @@ -1339,7 +1339,7 @@ const subscribe = exmapleTwo.subscribe(console.log) #### switchMap ##### signature: `switchMap(a: Observable): Observable` 当 source emit 的时候,切换到 inner Observable ,并且 emit 他已经 emit 过的值。 ([demo](http://jsbin.com/decinatisu/1/edit?js,console,output) | [docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-switchMap)) @@ -1368,7 +1368,7 @@ const subscribeTwo = exampleTwo.subscribe(console.log) // 马上 emit ,然后每隔1s emit const source = Rx.Observable.timer(0, 1000) const example = source .window(Rx.Observable.interval(3000)) const count = example.scan((acc, curr) => acc + 1, 0) -
lyyourc revised this gist
May 15, 2016 . 1 changed file with 97 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,9 @@ - [switchMap](#switchmap) - [window](#window) - [windowCount](#windowcount) - [windowTime](#windowtime) - [windowToggle](#windowtoggle) - [windowWhen](#windowwhen) #### buffer ##### signature: `buffer<T>(closingNotifier: Observable<any>): Observable<T[]>` @@ -1417,4 +1420,98 @@ const subscribeTwo = example */ ``` #### windowTime ##### signature: `windowTime(windowTimeSpan: number, windowCreationInterval: number, scheduler: Scheduler): Observable` 跟 `bufferTime` 一样,除了 emit 的值是 nested Observable 而不是一个 array 。 ([demo](http://jsbin.com/mifayacoqo/1/edit?js,console) | [docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-windowTime)) ```javascript const source = Rx.Observable.timer(0, 1000) const example = source // 每隔3s开始一个新的 window .windowTime(3000) .do(() => console.log('New Window!')) const subscribe = example // window emit 的值为 nested Observable .mergeAll() /* * 输出 * New Window: * 0 * 1 * 2 * New Window: * 3 * 4 * 5 */ .subscribe(console.log) ``` #### windowToggle ##### signature: `windowToggle(openings: Observable, closingSelector: function(value): Observable): Observable` 跟 `bufferTime` 一样,除了 emit 的值是 nested Observable 而不是一个 array 。 ([demo](http://jsbin.com/xasofupuka/1/edit?js,console) | [docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-windowToggle)) ```javascript const source = Rx.Observable.timer(0, 1000) // 在第5s的时候 toggle window const toggle = Rx.Observable.interval(5000) const example = source // 每隔5s 打开 window .windowToggle(toggle, val => Rx.Observable.interval(val * 1000)) .do(() => console.log('New Window!')) const subscribe = example // window emit 的值为 nested Observable .mergeAll() /* * New Window! * New Window! * 10 * New Window! * 15 * 16 * ... */ ``` #### windowWhen ##### signature: `windowWhen(closingSelector: function(): Observable): Observable` 跟 `bufferWhen` 一样,除了 emit 的值是 nested Observable 而不是一个 array 。 ([demo](http://jsbin.com/tuhaposemo/edit?js,console) | [docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-windowWhen)) ```javascript const source = Rx.Observable.timer(0, 1000) const example = source // 每隔5s就关闭wndow,并且 emit 从 source 中缓冲好的值 .windowWhen(val => Rx.Observable.interval(5000)) .do(() => console.log('New Window!')) const subscribe = example .mergeAll() /* * New Window! * 0 * 1 * 2 * 3 * 4 * New Window! * 5 * 6 * 7 * 8 * 9 */ .subscribe(console.log) ``` -
lyyourc revised this gist
May 12, 2016 . 1 changed file with 35 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 @@ - [startWith](#startwith) - [switchMap](#switchmap) - [window](#window) - [windowCount](#windowcount) #### buffer ##### signature: `buffer<T>(closingNotifier: Observable<any>): Observable<T[]>` @@ -1382,4 +1383,38 @@ 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` source emit 的值是 Observable ,emit 的间隔是指定的时间。 ([demo](http://jsbin.com/nezuvacexe/1/edit?js,console) | [docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-windowCount)) ```javascript // 每隔1s emit const source = Rx.Observable.interval(1000) const example = source // 每隔4个值就开始新的 window .windowCount(4) .do(() => console.log('NEW WINDOW!')) const subscribeTwo = example // window emit 的是 nested Observable .mergeAll() .sbuscribe(console.log) /* * 输出: * NEW WINDOW! * 0 * 1 * 2 * 3 * NEW WINDOW! * 4 * 5 * 6 * 7 */ ``` -
lyyourc revised this gist
May 11, 2016 . 1 changed file with 27 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 @@ - [skipWhile](#skipwhile) - [startWith](#startwith) - [switchMap](#switchmap) - [window](#window) #### buffer ##### signature: `buffer<T>(closingNotifier: Observable<any>): Observable<T[]>` @@ -1352,7 +1353,33 @@ const exampleTwo = sourcwTwo.switchMap(val => Rx.Observable.interval(3000).mapTo const subscribeTwo = exampleTwo.subscribe(console.log) ``` #### window ##### signature: `window(windowBoundaries: Observable): Observable` 类似于 `buffer` ,但是返回的是 nested Observable 。 ([demo](http://jsbin.com/jituvajeri/1/edit?js,console) | [docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-window)) ```javascript // 马上 emit ,然后每隔1s emit 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)) ``` -
lyyourc revised this gist
May 10, 2016 . 1 changed file with 28 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 @@ -48,6 +48,7 @@ - [skipUntil](#skipuntil) - [skipWhile](#skipwhile) - [startWith](#startwith) - [switchMap](#switchmap) #### buffer ##### signature: `buffer<T>(closingNotifier: Observable<any>): Observable<T[]>` @@ -1328,4 +1329,30 @@ const exampleTwo = sourceTwo // Hello World! Goodybe // Hello World! Goodbye World! const subscribe = exmapleTwo.subscribe(console.log) ``` #### switchMap ##### signature: `switchMap(a: Observable): Observable` 当 source emit 的时候,切换到 innner Observable ,并且 emit 他已经 emit 过的值。 ([demo](http://jsbin.com/decinatisu/1/edit?js,console,output) | [docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-switchMap)) ```javascript const source = Rx.Observable.timer(0, 5000) // 切换到 inner Observable ,emit 已经 emit 过的值 const example = source.switchMap(() => Rx.Observable.interval(500)) // 输出:0,1,2,3,4,5,6,7,8,9.....0,1,2,3,4,5,6,7,8,9 const subscribe = example.subscribe(console.log) const sourceTwo = Rx.Observable.fromEvent(document, 'click') // 如果下一个 click 在 3s 内发生的话,不会产生新的 msg('Hello, I made it!') const exampleTwo = sourcwTwo.switchMap(val => Rx.Observable.interval(3000).mapTo('Hello, I made it!')) // 输出:(click)...3s...'Hello, I made it!'...(click)...2s(click)... const subscribeTwo = exampleTwo.subscribe(console.log) ``` -
lyyourc revised this gist
May 9, 2016 . 1 changed file with 10 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 @@ -1317,7 +1317,15 @@ const example = source.startWith(0) // 输出:0,1,2,3 const subscribe = example.subscribe(console.log) const sourceTwo = Rx.Observable.of('World! ', 'Goodbye', 'World!') const exampleTwo = sourceTwo .startWith('Hello') .scan((acc, curr) => `${acc} ${curr}`) // 输出: // Hello // Hello Wrold! // Hello World! Goodybe // Hello World! Goodbye World! const subscribe = exmapleTwo.subscribe(console.log) ``` -
lyyourc revised this gist
May 9, 2016 . 1 changed file with 19 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 @@ - [skip](#skip) - [skipUntil](#skipuntil) - [skipWhile](#skipwhile) - [startWith](#startwith) #### buffer ##### signature: `buffer<T>(closingNotifier: Observable<any>): Observable<T[]>` @@ -1301,4 +1302,22 @@ const source = Rx.Observable.interval(1000) const example = source.skipWhile(val => val < 5) // 输出:5...6...7...8....... const subscribe = example.subscribe(console.log) ``` #### startWith ##### signature: `startWith(an: Values): Observable` 指定第一个 emit 的值。 ([demo](http://jsbin.com/jeyakemume/1/edit?js,console) | [docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-startWith)) ```javascript const source = Rx.Observable.of([1, 2, 3]) const example = source.startWith(0) // 输出:0,1,2,3 const subscribe = example.subscribe(console.log) const sourceTwo = Rx.Observable.of('World!', Goodbye', 'World') const exampleTwo = sourceTwo.startWith('Hello') const subscribe = exmapleTwo.subscribe(console.log) ``` -
lyyourc revised this gist
May 8, 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 @@ -46,6 +46,7 @@ - [single](#single) - [skip](#skip) - [skipUntil](#skipuntil) - [skipWhile](#skipwhile) #### buffer ##### signature: `buffer<T>(closingNotifier: Observable<any>): Observable<T[]>` @@ -1286,4 +1287,18 @@ const source = Rx.Observable.interval(1000) const example = source.skipUntil(Rx.Observable.timer(6000)) // 输出:5...6...7...8... const subscribe = example.subscribe(console.log) ``` #### skipwhile ##### signature: `skipWhile(predicate: Function): Observable` 跳过 source emit 的值,直到给定的条件为 false 。 ([demo]() | [docs]()) ```javascript const source = Rx.Observable.interval(1000) const example = source.skipWhile(val => val < 5) // 输出:5...6...7...8....... const subscribe = example.subscribe(console.log) ``` -
lyyourc revised this gist
May 7, 2016 . 1 changed file with 16 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 @@ - [share](#share) - [single](#single) - [skip](#skip) - [skipUntil](#skipuntil) #### buffer ##### signature: `buffer<T>(closingNotifier: Observable<any>): Observable<T[]>` @@ -1270,4 +1271,19 @@ const source = Rx.Observable.interval(1000) const example = source.skip(5) // 输出:5..6..7..8... const subscribe = example.subscribe(console.log) ``` #### skipUntil ##### signature: `skipUntil(the: Observable): Observable` 跳过 source emit 的值,直到 inner Observable emit 。 ([demo](http://jsbin.com/tapizososu/1/edit?js,console) | [docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-skipUntil)) ```javascript const source = Rx.Observable.interval(1000) // 跳过 source emit 的值,直到 inner Observable emit 。 const example = source.skipUntil(Rx.Observable.timer(6000)) // 输出:5...6...7...8... const subscribe = example.subscribe(console.log) ``` -
lyyourc revised this gist
May 6, 2016 . 1 changed file with 12 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 @@ -44,6 +44,7 @@ - [scan](#scan) - [share](#share) - [single](#single) - [skip](#skip) #### buffer ##### signature: `buffer<T>(closingNotifier: Observable<any>): Observable<T[]>` @@ -1256,7 +1257,17 @@ const example = source.single(val => val === 4) const subscribe = example.subscribe(console.log) ``` #### skip ##### signature: `skip(the: Number): Observable` 跳过指定数量的 emitted value 。 ([demo](http://jsbin.com/hacepudabi/1/edit?js,console) | [docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-skip)) ```javascript const source = Rx.Observable.interval(1000) // 跳过前5个 emitted value const example = source.skip(5) // 输出:5..6..7..8... const subscribe = example.subscribe(console.log) ``` -
lyyourc revised this gist
May 5, 2016 . 1 changed file with 60 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 @@ -42,6 +42,8 @@ - [retryWhen](#retrywhen) - [sample](#sample) - [scan](#scan) - [share](#share) - [single](#single) #### buffer ##### signature: `buffer<T>(closingNotifier: Observable<any>): Observable<T[]>` @@ -1200,3 +1202,61 @@ testSubject.next({ age: 30 }) // { name: 'Joe', age: 30 } testSubject.next({ favoriteLanguage: 'JavaScript' }) // { name: 'Joe', age: 30, favoriteLanguage: 'JavaScript' } ``` #### share ##### signature: `share(): Observable` 在多个 subscriber 中共享 observable 。 ([demo](http://jsbin.com/jobiyomari/1/edit?js,console) | [dcos](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-share)) ```javascript const source = Rx.Observable.timer(1000) const example = source .do(() => console.log('*** SIDE EFFECT ***')) .mapTo('*** RESULT ***') /* * 如果不 share 的话,SIDE EFFECT 会执行两次 * 输出: * *** SIDE EFFET *** * *** RESULT *** * *** SIDE EFFET *** * *** RESULT *** */ const subscribe = example.subscribe(console.log) const subscribeTwo = example.subscribe(console.log) // 在 subscriber 中共享 observable const shareExample = example.share() /* * 如果 share 的话,SIDE EFFECT 只会执行一次 * 输出: * *** SIDE EFFECT *** * *** RESULT *** * *** RESULT *** */ const subscribeThree = shareExample.subscribe(console.log) const subscribeFour = shareExample.subscribe(console.log) ``` #### single ##### signature: `signature: single(a: Function): Observable` emit 符合条件的一个单独的值。 ([demo](http://jsbin.com/solecibuza/1/edit?js,console) | [docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-single)) ```javascript // emit (1,2,3,4,6) const source = Rx.Observable.of([1,2,3,4,5]) // emit 符合条件的一个 value const example = source.single(val => val === 4) // 输出:4 const subscribe = example.subscribe(console.log) ``` -
lyyourc revised this gist
May 4, 2016 . 1 changed file with 58 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 @@ -40,6 +40,8 @@ - [repeat](#repeat) - [retry](#retry) - [retryWhen](#retrywhen) - [sample](#sample) - [scan](#scan) #### buffer ##### signature: `buffer<T>(closingNotifier: Observable<any>): Observable<T[]>` @@ -1142,3 +1144,59 @@ const example = source */ const subscribe = example.subscribe(console.log) ``` #### sample ##### signature: `sample(sampler: Observable): Observable` 当给定的 Observable emit 的时候,返回 source 最新的一个样本(sample)。 ([demo](http://jsbin.com/wifaqipuse/1/edit?js,console) | [docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-sample)) ```javascript // 每隔1s emit 值 const source = Rx.Observable.interval(1000) // 每隔2s ,返回 source 最新的值 const example = source.sample(Rx.Observble.interval(2000)) // 输出:2..4..6..8 const subscribe = example.subscribe(val => console.log(val)) const sourceTwo = Rx.Observable.zip( Rx.Observable.from(['Joe', 'Frank', 'Bo']), Rx.Observable.interval(2000) ) // 每隔2.5s ,返回 sourceTwo 的最新值 const exampleTwo = sourceTwo.sample(Rx.Observable.interval(2500)) // 输出:['Joe', 0]...['Frank', 1]... const subscribeTwo = exampleTwo.subscribe(console.log) ``` #### scan ##### signature: `scan(accumulator: function, seed: any): Observable` reducer / 累加器 ([demo](http://jsbin.com/jopikihuvu/1/edit?js,console) | [docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-scan)) ```javascript const testSubject = new Rx.Subject() // 最简单的 scan 的例子,从零开始累加 const basicScan = testSubject .startWith(0) .scan((acc, curr) => acc + curr) // 输出累加后的值 const subscribe = basiScan.subscribe(val => console.log('Accumulated total: ', val)) testSubject.next(1) // 1 testSubject.next(2) // 3 testSubject.next(3) // 6 const testSubjectTwo = new Rx.Subject() const objectScan = testSubject.scan((acc, curr) => Object.assign({}, acc, curr), {}) const subscribe = objectScan.subscribe(val => console.log('Accumulated object: ', val)) testSubject.next({ name: 'Joe' }) // { name: 'Joe' } testSubject.next({ age: 30 }) // { name: 'Joe', age: 30 } testSubject.next({ favoriteLanguage: 'JavaScript' }) // { name: 'Joe', age: 30, favoriteLanguage: 'JavaScript' } ``` -
lyyourc revised this gist
May 2, 2016 . 1 changed file with 71 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 @@ -38,6 +38,8 @@ - [publish](#publish) - [race](#race) - [repeat](#repeat) - [retry](#retry) - [retryWhen](#retrywhen) #### buffer ##### signature: `buffer<T>(closingNotifier: Observable<any>): Observable<T[]>` @@ -1071,3 +1073,72 @@ const exampleTwo = source.take(5).repeat(2) // 输出:0,1,2,3,4 ... 0,1,2,3,4 const subscribeTwo = exampleTwo.subscribe(val => console.log(val)) ``` #### retry ##### signature: `retry(number: number): Observable` 当发生 error 的时候,指定 retry 的次数。 ([demo](http://jsbin.com/yovacuxuqa/1/edit?js,console) | [docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-retry)) ```javascript const source = Rx.Observable.interval(1000) const example = source .flatMap(val => { // 抛出 error if (val > 5) { return Rx.Observable.throw('Errro!') } return Rx.Observable.of(val) }) // retry 2 times on error .retry(2) /* * 输出: * 0..1..2..3..4..5.. * 0..1..2..3..4..5.. * 0..1..2..3..4..5.. * Error! Retried 2 times when quit! */ const subscribe = example .subscribe({ next: val => console.log(val), error: val => console.log(`${va}: Retried 2 times when quit!`) }) ``` #### retryWhen ##### signture: `etryWhen(receives: notificationHandler, the: scheduler): Observable` 在额外的逻辑的 retry 。 ([demo](http://jsbin.com/miduqexalo/1/edit?js,console) | [docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-retryWhen)) ```javascript const source = RxObservable.interval(1000) const example = source .map(val => { if (val > 5) { throw val } return val }) .retryWhen(errors => errors .do(val => console.log(`Value ${val} was too high!`) .delayWhen(val => Rx.Observable.timer(val * 1000)) ) /* * 输出: * 0 * 1 * 2 * 3 * 4 * 5 * Value 6 was too high! * ... wait 5s then repeat */ const subscribe = example.subscribe(console.log) ``` -
lyyourc revised this gist
May 2, 2016 . 1 changed file with 39 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,8 @@ - [mergeMap](#mergemap) - [pluck](#pluck) - [publish](#publish) - [race](#race) - [repeat](#repeat) #### buffer ##### signature: `buffer<T>(closingNotifier: Observable<any>): Observable<T[]>` @@ -1029,6 +1031,43 @@ setTimeout(() => { }, 1000) ``` #### race ##### signature: `race(): Observable` 让第一个 Observable emit 。 ([demo](http://jsbin.com/goqiwobeno/1/edit?js,console) | [docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-race)) ```javascript // 让第一个 Observable emit const example = Rx.Observable.race( Rx.Observable.interval(1500), Rx.Observable.interval(1000).mapTo('is won!'), Rx.Observable.interval(2000), Rx.Observable.interval(2500) ) // 输出:'is won!'...'is won!'... const subscribe = example.subscribe(val => console.log(val)) ``` #### repeat ##### signature: `repeat(scheduler: Scheduler, count: number): Observable` 指定 source 重复的次数。 ([demo](http://jsbin.com/lexabovuqa/1/edit?js,console) | [docs](http://reactivex-rxjs5.surge.sh/function/index.html#static-function-repeat)) ```javascript // emit 'Repeat this!' const source = Rx.Observable.of('Repeat this') // 重复 source emit 的值3次 const example = source.repeat(3) // 输出:Repeat this! ... Repeat this! ... Repeat this const subscribe = example.subscribe(val => console.log(val)) const sourceTwo = Rx.Observable.interval(1000) // 取前5个值,重复2次 const exampleTwo = source.take(5).repeat(2) // 输出:0,1,2,3,4 ... 0,1,2,3,4 const subscribeTwo = exampleTwo.subscribe(val => console.log(val)) ``` -
lyyourc revised this gist
May 1, 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 @@ -35,6 +35,7 @@ - [merge](#merge) - [mergeMap](#mergemap) - [pluck](#pluck) - [publish](#publish) #### buffer ##### signature: `buffer<T>(closingNotifier: Observable<any>): Observable<T[]>` @@ -994,7 +995,39 @@ const exampleTwo = sourceTwo.pluck('job', 'title') const subscribeTwo = exampleTwo.subscribe(val => console.log(val)) ``` #### publish ##### signature: `publish() : ConnectableObservable` 什么事情都不做,直到调用 `connect` ,共享 source 。 ([demo](http://jsbin.com/laguvecixi/edit?js,console) | [docs](http://reactivex-rxjs5.surge.sh/function/index.html#static-function-publish)) ```javascript const source = Rx.Observable.interval(1000) const example = source // side effect .do(() => console.log('Do something')) // 直到调用 connect() ,否则什么事情都不会发生 .publish() /* * source 不会 emit 值,直到调用 connect 方法 * 输出:(5s 后) * 'Do Something' * 'Subscriber One: 0' * 'Subscriber Two: 0' * 'Do something' * 'Subscriber One: 1' * 'Subscriber Two: 1' */ const subscribe = example.subscribe(val => console.log(val)) const subscribeTwo = example.subscribe(val => console.log(val)) // 5秒后调用 connect 方法,这会引起 source 开始 emit 值 setTimeout(() => { example.connect() }, 1000) ``` -
lyyourc revised this gist
May 1, 2016 . 1 changed file with 31 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 @@ -34,6 +34,7 @@ - [mapTo](#mapto) - [merge](#merge) - [mergeMap](#mergemap) - [pluck](#pluck) #### buffer ##### signature: `buffer<T>(closingNotifier: Observable<any>): Observable<T[]>` @@ -964,6 +965,36 @@ const exampleThree = source const subscribeThree = exampleThree.subscribe(val => console.log(val)) ``` #### pluck ##### signature: `pluck(properties: ...args): Observable` 挑选出嵌套的属性(nested property)。 ([demo](http://jsbin.com/netulokasu/1/edit?js,console) | [docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-pluck)) ```javascript const source = Rx.Observable.from([ { name: 'Joe', age: 30 }, { name: 'Sarah', age: 35 }, ]) // 抓取所有的名字(name) const example = source.pluck('name') // 输出:"Joe", "Sarch" const subscribe = example.subscribe(val => console.log(val)) const sourceTwo = Rx.Observable.from([ { name: 'Joe', age: 30, job: { title: 'Developer', language: 'JavaScript' }}, // 如果没有找到 `job` 的话,就会返回 undefined { name: 'Sarah', age: 25 }, ]) // 抓取在 `job` 里面的 `title` const exampleTwo = sourceTwo.pluck('job', 'title') // 输出:'Developer', undefined const subscribeTwo = exampleTwo.subscribe(val => console.log(val)) ``` -
lyyourc revised this gist
May 1, 2016 . 1 changed file with 32 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 @@ -33,7 +33,7 @@ - [map](#map) - [mapTo](#mapto) - [merge](#merge) - [mergeMap](#mergemap) #### buffer ##### signature: `buffer<T>(closingNotifier: Observable<any>): Observable<T[]>` @@ -932,6 +932,37 @@ const subscribeTwo = exampleTwo.subscribe(val => console.log(val)) #### mergeMap ##### signature: `mergeMap(project: function: Observable, resultSelector: function: any, concurrent: number): Observable` 把 source 的值先 map 到 inner Observable ,最后压扁返回。简而言之:`map` => `mergeAll` 。 ([demo](http://jsbin.com/haxobidino/1/edit?js,console) | [docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-mergeMap)) ```javascript const source = Rx.Observable.of('Hello') // map 到 inner Observable ,并且 flatten 。 const example = source.mergeMap(val => Rx.Observable.of(`${val} World!`) // 输出:Hello World! const subscribe = example.subscribe(val => console.log(val)) // mergeMap 也可以 emit Promise const myPromise = val => new Promise(resolve => resolve(`${val} World from Promise!`)) // map 到 promise ,然后 emit 最后结果 const exampleTwo = source.mergeMap(val => myPromise(val)) // 输出:Hello World From Promise! const subscribeTwo = exampleTwo.subscribe(val => console.log(val)) /* * 你提供第2个参数,他可以接收 source 传来的值,然后在 inner Observable emit */ const exampleThree = source .mergeMap(val => myPromise(val), (valueFromSource, valueFromPromise) => { return `Source: ${valueFromSource}, Promise: ${valeFromPromise}` } ) // 输出:Source: Hello, Promise: Hello World From Promise! const subscribeThree = exampleThree.subscribe(val => console.log(val)) ``` -
lyyourc revised this gist
Apr 29, 2016 . 1 changed file with 95 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 @@ -30,6 +30,10 @@ - [groupBy](#groupby) - [ignoreElements](#ignoreelements) - [last](#last) - [map](#map) - [mapTo](#mapto) - [merge](#merge) - [mergeTo](#mergeto) #### buffer ##### signature: `buffer<T>(closingNotifier: Observable<any>): Observable<T[]>` @@ -842,4 +846,94 @@ const subscribe = example.subscribe(val => console.log(`Last value: ${val}`)) const exampleTwo = source.last(num => num % 2 === 0) // 输出:Last to pass test: 4 const subscribeTwo = exampleTwo.subscribe(val => console.log(`Last to pass test: ${val}`)) ``` #### map #### signature: `map(project: Function, thisArg: any): Observable` 把每个值都应用到 project function ,映射为新的值。 ([demo](http://jsbin.com/vegagizedo/1/edit?js,console) | [docs](http://reactivex-rxjs5.surge.sh/function/index.html#static-function-map)) ```javascript // emit (1, 2, 3, 4, 5) const source = Rx.Observable.of([1, 2, 3, 4, 5]) // 每个值都加10 const example = source.map(val => val + 10) // 输出:11, 12, 13, 14, 15 const subscribe = example.subscribe(val => console.log(val)) // emit ({name: 'Joe', age: 30}, {name: 'Frank', age: 20},{name: 'Ryan', age: 50}) const sourceTwo = Rx.Observable.from([{name: 'Joe', age: 30}, {name: 'Frank', age: 20},{name: 'Ryan', age: 50}]); // 获取每个人的名字 const exmapleTwo = sourceTwo.map(person => person.name) // 输出:"Joe", "Frank", "Ryan" const subscribeTwo = exampleTwo.subscribe(val => console.log(val)) ``` #### mapTo ##### signature: `mapTo(value: any): Observable` 每一次都映射(map)为一个常量。 ([demo](http://jsbin.com/yazusehahu/1/edit?js,console,output) | [docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-mapTo)) ```javascript const source = Rx.Observable.interval(2000) // 每个值都映射为一个常量 const example = source.mapTo('HELLO WORLD!') // 输出:'HELLO WORLD!'...'HELLO WORLD!'...'HELLO WORLD!'... const subscribe = example.subscribe(val => console.log(val)) // 每次点击 document 时都 emit const clickSource = Rx.Observable.fromEvent(document, 'click') // 把所有的 emission 都设为一个值 const exampleTwo = clickSource.mapTo('GOODBYE WORLD!') // 输出:(click)'GOODBYE WORLD!'... const subscribeTwo = exampleTwo.subscribe(val => console.log(val)) ``` #### merge ##### signature: `merge(input: Observable): Observable` 把多个 Observable 压扁为一个 Observable 。 ([demo](http://jsbin.com/wicubemece/1/edit?js,console) | [docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-merge)) ```javascript // 每隔2.5s emit 值 const first = Rx.Observable.interval(2500) // 每隔2s emit 值 const second = Rx.Observable.interval(2000) // 每隔1.5s emit 值 const third = Rx.Observable.interval(1500) // 每隔1s emit 值 const fourth = Rx.Observable.interval(1000) // 把多个 Observable 合并为一个单独的 Observable const example = Rx.Observable.merge( first.mapTo('FIRST'), second.mapTo('SECOND'), third.mapTo('THIRD'), fourth.mapTo('FOURTH') ) // 输出:'FOURTH', 'THIRD', 'SECOND', 'FOURTH', 'FIRST', 'THIRD', 'FOURTH'... const subscribe = example.subscribe(val => console.log(val)) // merge 可以当作 Observable instance 的一个方法 const exampleTo = first.merge(fourth) // 输出:0, 1, 0, 2... const subscribeTwo = exampleTwo.subscribe(val => console.log(val)) ``` #### mergeMap ##### signature: `mergeMap(project: function: Observable, resultSelector: function: any, concurrent: number): Observable` -
lyyourc revised this gist
Apr 28, 2016 . 1 changed file with 59 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 @@ -28,6 +28,8 @@ - [filter](#filter) - [first](#first) - [groupBy](#groupby) - [ignoreElements](#ignoreelements) - [last](#last) #### buffer ##### signature: `buffer<T>(closingNotifier: Observable<any>): Observable<T[]>` @@ -783,4 +785,61 @@ const example = source */ const subscribe = example.subscribe(val => console.log(val)) ``` #### ignoreElements ##### signature: `ignoreElements(): Observable` 忽略所有的东西,除了 complete 和 error 。 ([demo](http://jsbin.com/luyufeviqu/1/edit?js,console) | [docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-ignoreElements)) ```javascript // 每隔500ms emit 值 const source = Rx.Observable.interval(100) // 忽略一切东西除了 complete const example = source .take(5) .ignoreElements() // 输出:'COMPLETE!' const subscribe = example.subscribe( val => console.log(`NEXT: ${val}`), val => console.log(`ERROR: ${val}`), () => console.log(`COMPLETE`) ) // 忽略一切东西除了 error const error = source .flatMap(val => { if (val === 4) return Rx.Observable.throw(`ERROR AT ${val}`) return Rx.Observable.of(val) }) .ignoreElements() // 输出:ERROR: ERROR at 4 const subscribeTwo = error.subscribe( val => console.log(`NEXT: ${val}`), err => console.log(`ERROR: ${err}`), () => console.log('SECOND COMPLETE') ) ``` #### last ##### signature: `last(predicate: function): Observable` emit 最后一个值,或者最后一个通过 test 的值。 ([demo](http://jsbin.com/xidufijuku/1/edit?js,console) | [docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-last)) ```javascript const source = Rx.Observable.from([1, 2, 3, 4, 5]) // 没有传参数,emit 最后一个值 const example = source.last() // 输出:"Last value: 5" const subscribe = example.subscribe(val => console.log(`Last value: ${val}`)) // emit 最后一个偶数 const exampleTwo = source.last(num => num % 2 === 0) // 输出:Last to pass test: 4 const subscribeTwo = exampleTwo.subscribe(val => console.log(`Last to pass test: ${val}`)) ``` -
lyyourc revised this gist
Apr 28, 2016 . 1 changed file with 28 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 @@ -27,6 +27,7 @@ - [expand](#expand) - [filter](#filter) - [first](#first) - [groupBy](#groupby) #### buffer ##### signature: `buffer<T>(closingNotifier: Observable<any>): Observable<T[]>` @@ -733,7 +734,7 @@ const subscribeTwo = exampleTwo.subscribe(val => console.log(`Over 30: ${val.nam #### first ##### signature: `first(predicate: function, select: function)` emit 第一个值,或者第一个符合给定条件的值。 ([demo](http://jsbin.com/poloquxuja/1/edit?js,console) | [docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-first)) @@ -756,4 +757,30 @@ const exampleThree = source.first( ) // 输出:First even: 2 is at index 1 const subscribeThree = exampleThree.subscribe(val => console.log(val)) ``` #### groupBy ##### signature: `groupBy(keySelector: Function, elementSelector: Function): Observable` 按照给定的值,分组到 Observable。 ([demo](http://jsbin.com/zibomoluru/1/edit?js,console) | [docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-groupBy)) ```javascript const people = [{name: 'Sue', age:25},{name: 'Joe', age: 30},{name: 'Frank', age: 25}, {name: 'Sarah', age: 35}]; const source = Rx.Observable.from(people) // 按年龄分组 const example = source .groupBy(person => person.age) // 每个分组作为数组返回 .flatMap(group => group.reduce((acc, curr) => [...acc, curr], [])) /* * 输出: * [{age: 25, name: 'Sue'}, {age: 25, name: 'Frank'}] * [{age: 30, name: 'joe'}] * [{age: 35, name: 'Sarah'}] */ const subscribe = example.subscribe(val => console.log(val)) ``` -
lyyourc revised this gist
Apr 27, 2016 . 1 changed file with 92 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 @@ -24,6 +24,9 @@ - [distinctUntilChanged](#distinctuntilchanged) - [do](#do) - [every](#every) - [expand](#expand) - [filter](#filter) - [first](#first) #### buffer ##### signature: `buffer<T>(closingNotifier: Observable<any>): Observable<T[]>` @@ -665,3 +668,92 @@ const exampleTwo = allEvens // 输出:true const subscribe = exampleTwo.subscribe(val => console.log(val)) ``` #### expand ##### signature: `expand(project: function, concurrent: number, scheduler: Scheduler): Observable` 递归地调用给定的函数。 ([demo](http://jsbin.com/fuxocepazi/1/edit?js,console) | [docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-expand)) ```javascript // emit 2 const source = Rx.Observable.of(2) const example = source .expand(val => { // 2, 3, 4, 5 console.log(`Passed value: ${val}`) // 3, 4, 5, 6 return Rx.Observable.of(1 + val) }) // 只调用 5 次 .take(5) /* * RESULT: 2 * Passed value: 2 * RESULT: 3 * Passed value: 3 * RESULT: 4 * Passed value: 4 * RESULT: 5 * Passed value: 5 * RESULT: 6 * Passes value: 6 */ // 输出:2, 3, 4, 5, 6 const subscribe = exmaple.subscribe(val => console.log(`RESULT: ${val}`)) ``` #### filter ##### signature: `filter(select: Function, thisArg: any): Observable` 只返回符合给定条件的值。 ([demo](http://jsbin.com/gaqojobove/1/edit?js,console) | [docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-filter)) ```javascript // emit (1, 2, 3, 4, 5) const source = Rx.Observable.from([1, 2, 3, 4, 5]) // 过滤掉不是偶数的值 const example = source.filter(num => num % 2 === 0) // 输出:Even Number: 2, Even Number: 4 const subscribe = example.subscribe(val => console.log(`Even number: ${val}`)) // emit ({ name: 'Joe', age: 31 }, { name: 'Bob', age: 25 }) const sourceTwo = Rx.Observable.from([{ name: 'Joe', age: 31 }, { name: 'Bob', age: 25 }] // 过滤掉30岁以下的 const exampleTwo = sourceTwo.filter(person => person.age >= 300) // 输出:Over 30: Joe const subscribeTwo = exampleTwo.subscribe(val => console.log(`Over 30: ${val.name}`)) ``` #### first ##### signature: `first(predicate: function, select: function)` emit 第一个值,后者第一个符合给定条件的值。 ([demo](http://jsbin.com/poloquxuja/1/edit?js,console) | [docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-first)) ```javascript const source = Rx.Observable.from([1, 2, 3, 4, 5]) // 没有传任何参数,那么就 emit 第一个值 const example = source.first() // 输出:First Value: 1 const subscribe = example.subscribe(val => console.log(`First Value: ${val}`)) // emit 第一个符合给定条件的值 const exampleTwo = source.first(num => num === 5) // 输出:First to pass test: 5 const subscribe = exampleTwo.subscribe(val => console.log(`First to pass test: ${val}`)) // 传递可选参数 project function const exampleThree = source.first( num => num % 2 === 0, (result, index) => `First even: ${result} is at index: ${index}` ) // 输出:First even: 2 is at index 1 const subscribeThree = exampleThree.subscribe(val => console.log(val)) ``` -
lyyourc revised this gist
Apr 26, 2016 . 1 changed file with 44 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 。 **原文链接:[RxJS 5 Operators By Example](https://gist.github.com/btroncone/d6cf141d6f2c00dc6b35)** by [@btroncone](https://github.com/btroncone) ### 目录 - [buffer](#buffer) @@ -22,6 +22,8 @@ - [delayWhen](#delaywhen) - [dematerialize](#dematerialize) - [distinctUntilChanged](#distinctuntilchanged) - [do](#do) - [every](#every) #### buffer ##### signature: `buffer<T>(closingNotifier: Observable<any>): Observable<T[]>` @@ -590,7 +592,7 @@ const subscriptionn = source.subscribe({ #### distinctUntilChanged ##### signature: `distinctUntilChanged(compare: function): Observable` 只有当前的值与上个值不同,才 emit 。 ([demo](http://jsbin.com/vafedocibi/1/edit?js,console) | [docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-dematerialize)) @@ -617,9 +619,49 @@ const nonDisinctObjects = myArrayWithDuplicateObjects .subscribe(val => console.log('DISTINCT OBJECTS', val)) ``` #### do ##### signature: `do(nextOrObserver: function, error: function, complete: function): Observable` 显式地进行某些 action ,比如 logging ([demo](http://jsbin.com/jimazuriva/1/edit?js,console) | [docs](https://github.com/ReactiveX/rxjs/blob/master/src/operator/do.ts)) ```javascript const source = Rx.Observable.of(1, 2, 3, 4, 5) // 通过 do ,显式地打印某些值 const example = source .do(val => console.log(`BEFORE MAP: ${val}`) .map(val => val + 10) .do(val => console.log(`AFTER MAP: ${val}`) // `do` 是不会 emit 值 const subscribe = example.subscribe(val => console.log(val)) ``` #### every ##### signature: `every(predicate: function, thisArg: any): Observable` 检测是否「所有 emit 的值」都符合某个条件。 ([demo](http://jsbin.com/mafacebuwu/1/edit?js,console) | [docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-every)) ```javascript // emit 5个值 const source = Rx.Observable.of(1, 2, 3, 4, 5) const example = source .every(val => val % 2 == 0) // 输出:false const subscribe = example.subscribe(val => console.log(val)) // emit 5个值 const allEvens = Rx.Observable.of(2, 4, 6, 8, 10) const exampleTwo = allEvens // 是否每个值都是偶数 .every(val => val % 2 === 0) // 输出:true const subscribe = exampleTwo.subscribe(val => console.log(val)) ``` -
lyyourc revised this gist
Apr 26, 2016 . 1 changed file with 65 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,5 +1,7 @@ 用例子讲解 RxJS 5 的 Operators 。 **[原文链接](https://gist.github.com/btroncone/d6cf141d6f2c00dc6b35)** by [@btroncone](https://github.com/btroncone) ### 目录 - [buffer](#buffer) - [bufferCount](#buffercount) @@ -18,6 +20,8 @@ - [defaultIfEmpty](#defaultifempty) - [delay](#delay) - [delayWhen](#delaywhen) - [dematerialize](#dematerialize) - [distinctUntilChanged](#distinctuntilchanged) #### buffer ##### signature: `buffer<T>(closingNotifier: Observable<any>): Observable<T[]>` @@ -558,3 +562,64 @@ const delayWhenExample = delayForFiveSeconds.delayWhen(delayForFiveSeconds) // 5s....1...2...3 const subscribe = delayWhenExample.subscribe(val => console.log(val)) ``` #### dematerialize ##### sigature: `dematerialize(): Observable` 把 notification object 变成 notification values ([demo](http://jsbin.com/vafedocibi/1/edit?js,console) | [docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-dematerialize)) ```javascript // emit next notification 和 error notification const source = Rx.Observable .from([ Rx.Notification.createNext('SUCCESS'), Rx.Notification.createError('ERROR!') ]) // 把 notification object 变成 notification values .dematerialize() // 输出:`NEXT VALUE: SUCCESS' 'ERROR VALUE: 'ERROR!' const subscriptionn = source.subscribe({ next: val => console.log(`NEXT VALUE: ${val}`), error: val => console.log(`ERROR VALUE: ${val}`), }) ``` #### distinctUntilChanged ##### signature: `distinctUntilChanged(compare: function): Observable` 只要当前的值与上个值不同,就 emit 。 ([demo](http://jsbin.com/vafedocibi/1/edit?js,console) | [docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-dematerialize)) ```javascript // 仅仅输出那些与上个值不同的值 const myArrayWithDuplicatesInARow = Rx.Observable .from([1, 1, 2, 2, 3, 1, 2, 3]) const distinctSub = myArrayWithDuplicatesInARow .distinctUntilChanged() // 输出:1, 2, 3, 1, 2, 3 .subscribe(val => console.log('DISTINCT SUB: ', val)) const nonDistinctSub = myArrayWithDuplicatesInARow // 输出:1, 1, 2, 2, 3, 1, 2, 3 .subscribe(val => console.log('NON DISTINCT SUB:', val)) const sampleObject = { name: 'Test' } const myArrayWithDuplicateObjects = Rx.Observable.from([sampleObject, sampleObject]) const nonDisinctObjects = myArrayWithDuplicateObjects .distinctUntilChanged() // 输出:`DISTINCT OBJECTS: { name: 'Test' }` .subscribe(val => console.log('DISTINCT OBJECTS', val)) ``` -
lyyourc revised this gist
Apr 25, 2016 . 1 changed file with 66 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 @@ -15,6 +15,9 @@ - [count](#count) - [debounce](#debounce) - [debounceTime](#debouncetime) - [defaultIfEmpty](#defaultifempty) - [delay](#delay) - [delayWhen](#delaywhen) #### buffer ##### signature: `buffer<T>(closingNotifier: Observable<any>): Observable<T[]>` @@ -492,4 +495,66 @@ const debouncedInput = example.debounceTime(500) const subscribe = debouncedInput.subscribe(val => { console.log(`Debounced Input: ${val}`) } ``` #### defaultIfEmpty ##### signature: `defaultIfEmpty(defaultValue: any): Observable` 当 Observable 为空时,使用这个设定的默认值,否则值为 `null` 。 ([demo](http://jsbin.com/ricotitasu/1/edit?js,console) | [docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-defaultIfEmpty)) ```javascript const empty = Rx.Observable.of() // 当 source Observable 的值为空时,使用这个默认值 const exampleOne = empty.defaultIfEmpty('Observable.of() Empty!') // 输出:'Observable.of() Empty!' const subscribe = exampleOne.subscribe(val => console.log(val)) // 空的 Observable const emptyTwo = Rx.Observable.empty() const exampleTwo = emptyTwo.defaultIfEmpty('Observable.empty()!') // 输出:'Observable.empty()!' const subscribe = exampleTwo.subscribe(val => console.log(val)) ``` #### delay ##### signature: `delay(delay: number | Date, scheduler: Scheduler): Observable` 延迟 Observable emit 的时间。 ([demo](http://jsbin.com/zebatixije/1/edit?js,console) | [docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-delay)) ```javascript const example = Rx.Observable.of(null) const merge = example.merge( example.mapTo('Hello'), example.mapTo('World').delay(1000), example.mapTo('Goodbye').delay(2000), example.mapTo('World!').delay(3000) ) // 输出:'Hello'...'World'...'Goodbye'...'World!' const subscribe = merge.subscribe(val => console.log(val)) ``` #### delayWhen ##### signature: `delayWhen(selector: Function, sequence: Observable): Observable` 根据指定的函数,延迟 emit 的时间。 ([demo](http://jsbin.com/topohekuje/edit?js,console) | [docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-delayWhen)) ```javascript // 每隔1s emit 一个值 const message = Rx.Observable.interval(3000) // 在5s后 emit 值 const delayForFiveSeconds = () => Rx.Observable.timer(5000) // 在5s后,开始 emit 值 const delayWhenExample = delayForFiveSeconds.delayWhen(delayForFiveSeconds) // 输出:延迟5s后, // 5s....1...2...3 const subscribe = delayWhenExample.subscribe(val => console.log(val)) ``` -
lyyourc revised this gist
Apr 23, 2016 . 1 changed file with 96 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 @@ -12,6 +12,9 @@ - [concatAll](#concatall) - [concatMap](#concatmap) - [concatMapTo](#concatmapto) - [count](#count) - [debounce](#debounce) - [debounceTime](#debouncetime) #### buffer ##### signature: `buffer<T>(closingNotifier: Observable<any>): Observable<T[]>` @@ -397,3 +400,96 @@ const exampleTwo = interval const subscribe = exampleTwo.subscribe(val => console.log(val)) ``` #### count ##### signature: `count(predicate: function): Observable` 计算 source emit 值的数量,直到 complete 。 ([demo](http://jsbin.com/hitemoxica/1/edit?js,console) | [docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-count)) ```javascript // emit 1,2,3 然后 complete const threeItems = Rx.Observable.of(1, 2, 3) // 当 `threeItems` complete 的时候,计算他 emit 值得数量 const exampleOne = threeItems.count() // 输出:`Count from Example One: 3' const subscribe = exampleOne.subscribe(val => console.log(`Count from Example One: `, val)) // 数组的计数 const myArray = [1, 2, 3, 4, 5] const myObsArray = Rx.Observable.from(myArray) const exampleTwo = myObsArray.count() // 输出:'Count of Basic Array: 5' const subscribeTwo = exampleTwo.subscribe(val => console.log(`Count of Basic Array: ${val}`)) // 可选参数:计数符合 predicate function 的值 const evensCount = myObsArray.count(val => val % 2 === 0) // 输出:'Count of Even Numbers: 2' const subscribeThree = evensCount.subscribe(val => console.log(`Count of Even Number: ${val}`)) ``` #### debounce ##### signature: `debounce(durationSelector: function): Observable` 丢掉所有比指定时间慢的值 ([demo](http://jsbin.com/cofofizopo/1/edit?js,console) | [docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-debounce)) ```javascript // emit 4个字符串 const example = Rx.Observable.of('WAIT', 'ONE', 'SECOND', 'Last will display') /* * 仅仅 emit 最后一个 emission 过后的1s的值 * 其他的值丢掉 */ const debouncedExmaple = example.debounce(() => Rx.Observable.timer(1000)) /* * 在上面的例子中,所有的值除了最后一个之外全部都忽略掉 * 输出:'Last will display' */ const subscribe = deboundedExmaple.subscibe(val => console.log(val)) // 每隔1s emit 一个值 const interval = Rx.Observable.interval(1000) // 每隔1s 增加我们的 dobounce time const debouncedInterval = interval.debounce(val => Rx.Observable.timer(val * 200)) /* * 在5s后,debounce time 就大于 interval time * 因此,未来的值都会被丢掉 * 输出:0...1...2...3...4......(此时 debounce time 大于1s ,再也没有值 emit) */ const subscribeTwo = debounceInterval.subscribe(val => console.log(`Example Two: ${val}`)) ``` #### debounceTime ##### signature: `debounceTime(dueTime: number, scheduler: Scheduler): Observable` 丢掉所有比指定时间慢的值 ([demo](http://jsbin.com/kacijarogi/1/edit?js,console,output) | [docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-debounceTime)) ```javascript const input = document.getElementById('example') // 对于每个 keyup 事件,映射为当前 input 的值 const example = Rx.observable .fromEvent(input, 'keyup') .map(i => i.currentTarget.value) // 在 keyups 和 emit 当前值之间,等待 .5s const debouncedInput = example.debounceTime(500) // 输出 const subscribe = debouncedInput.subscribe(val => { console.log(`Debounced Input: ${val}`) } ``` -
lyyourc revised this gist
Apr 22, 2016 . 1 changed file with 84 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 @@ -10,11 +10,13 @@ - [combineLatest](#combinelatest) - [concat](#concat) - [concatAll](#concatall) - [concatMap](#concatmap) - [concatMapTo](#concatmapto) #### buffer ##### signature: `buffer<T>(closingNotifier: Observable<any>): Observable<T[]>` 缓冲所有输出的值,直到他们被提交。重复之。。。 ([demo](http://jsbin.com/fazimarajo/edit?js,console,output) | [official docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-buffer)) @@ -38,7 +40,7 @@ const subscribe = myBufferedInterval.subscribe(val => console.log('Buffered Valu #### bufferCount ##### signature: `bufferCount<T>(bufferSize: number, startBufferEvery: number = null): Observable<T[]>` 缓冲所有的输出值,直到某个数字被 fullfilled ,然后把它们 emit 。重复之。。。 ([demo](http://jsbin.com/xibixetiqa/edit?js,console) | [docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-bufferCount)) @@ -83,7 +85,7 @@ const secondSubscribe = bufferEveryOne.subscribe(val => console.log('Start Buffe #### bufferTime ##### signature: `bufferTime(bufferTimeSpan: number, bufferCreationInterval: number, scheduler: Scheduler): Observable<T[]>` 缓冲输出的值,直到达到指定的时间点,然后把他们 emit 。重复之。。。 ([demo](http://jsbin.com/gixarikeme/edit?js,console) | [docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-bufferTime)) @@ -311,8 +313,87 @@ const exampleTwo = sourceOne const subscribeTwo = exampleTwo.subscribe(val => console.log('Example with Promise', val)) ``` #### concatMap ##### signature: `concatMap(project: function, resultSelector: function): Observable` 把 source Observable 的值映射到 inner Observable ,接着按顺序 subscribe 和 emit inner Observable 的值 相等于:`map` -> `concat` ([demo](http://jsbin.com/dekadarube/1/edit?js,console) | [docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-concatMap)) ```javascript // emit 'Hello' 和 'Goodbye' const source = Rx.Observable.of('Hello', 'Goodbye') // 把 source value 映射到 inner Observable ,当 complete 时,emit 结果,接着下一个。 const exampleOne = source.concatMap(val => Rx.Observable.of(`${val} World!`)) // 输出:`Example One: 'Hello World', Example One: 'Goodbye World' const subscribe = exampleOne.subscribe(val => console.log('Example One:', val)) // 结合 promise 的例子 const examplePromise = val => new Promise(resolve => resolve(`${val} World`)) // 把 source value 映射到 inner Observable ,当 complete 时,emit 结果,接着下一个。 const exampleTwo = source.concatMap(val => examplePromise(val)) // 输出:`Example w/ Promise: 'Hello World', Exmaple w/ Promise: 'Goodbye World' const subscribeTwo = exampleTwo.subscribe(val => console.log('Exmaple w/ Promise', val)) // 第一个参数返回的值,会传给第二个参数 const exampleWithSelector = source.concatMap(val => promiseExample(val), result => `${result} w/ selector!`) // 输出:Example w/ Selector: 'Hello w/ Selector', Example w/ Selector: 'Goodbye w/ Selector' const subscribeThree = exampleWithSelector .delay(2000) .subscribe(val => console.log('Exmaple w/ Selector', val)) ``` #### concatMapTo ##### signature: `concatMapTo(observable: Observable, resultSelector: function): Observable` 当 source emit 的时候,总是 subscribe 相同的 Observable ,当 complete 时合并结果 ([demo](http://jsbin.com/caqiruqula/1/edit?js,console) | [docs](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-concatMapTo)) ```javascript // 每隔2s emit 一个值 const interval = Rx.Observable.interval(2000) const message = Rx.Observable.of(`Second(s) elapsed!`) // 当 `interval` emit 时,subscribe `message` 直到他 complete ,最后合并结果 const example = interval.eoncatMapTo(message, (time, msg) => `${time} ${msg}`) // 输出:`0 Second(s) elapsed! 1 Second(s) elapsed!` const subscribe = example.subscribe(val => console.log(val)) // 每隔1s emit 一个值,取前5个 const basicTimer = Rx.Observable.interval(1000).take(5) /* * ***注意*** * 像这种 source Observable emit 的速度比 inner Observable complete 快的情景下, * 就会出现内存问题 * (`interval` emit 时间间隔为1s ,而 `basicTimer` complete 则需要5s) */ // `basicTimer` 会在 5s 后 complete ,emit 的值有:0,1,2,3,4 const exampleTwo = interval .concatMapTo(basicTimer, (firstInterval, secondInterval) => `${fisrtInterval} ${secondInterval}`) /* 输出: * 0 0 * 0 1 * 0 2 * 0 3 * 0 4 * 1 0 * 1 1 * continue... */ const subscribe = exampleTwo.subscribe(val => console.log(val)) ```
NewerOlder