歡迎指導與討論 :）
前言
本文是筆者翻譯 RxJS 5.X 官網各類operation操作系列的的第二篇 —— filter過濾。如有錯漏，希望大家指出提醒O(∩_∩)O。更詳細的資料盡在rxjs官網 【http://reactivex.io/rxjs/manual/overview.htm】與帶有demo例子的網站【http://xgrommx.github.io/rx-book/content/observable】。
本文有關filter操作的內容有：debounce、debounceTime、distinct、distinctKey、distinctUntilChanged、distinctUntilKeyChanged、elementAt、filter、first、ignoreElements、audit、auditTime、last、sample、sampleTime、single、skip、skipUntil、skipWhile、take、takeLast、takeUntil、takeWhile、throttle、throttleTime
一、debounce
防抖動，只有當另一個Observable發射值時，才取源Obervable的最新數據進行發射，其他數據取消發射。
// 每次點擊，且當計時器的最新值未被發射時，才從計時器發射一個值
Rx.Observable.interval( 1000 ) .debounce(( ) => Rx.Observable.fromEvent(document, 'click')) .subscribe(x => console.log( x ));
二、debounceTime
防抖動，一段時間內，只取最新數據進行發射，其他數據取消發射。
// 每隔一秒，輸出一個計時器的值
Rx.Observable.interval( 1000 ) .debounceTime( 500 ) .subscribe(x => console.log( x ));
三、distinct
去除重復的值。
// 去除重復的值，輸出A,B,C,b
Rx.Observable.of('A', 'B', 'C', 'A', 'b', 'B') .distinct( ) .subscribe( x => console.log( x ))
四、distinctUntilChanged
去除連續重復的值
// 去除連續重復的元素，輸出A,B,A,B,A
Rx.Observable.of('A', 'B', 'B', 'A', 'B', 'A', 'A') .distinctUntilChanged( ) .subscribe( x => console.log( x ))
五、distinctKeyUntilChanged
去除連續項中，擁有相同給予key值的value的項（有點拗口..請看例子）
let items = [ { age: 4, name: 'Foo'}, { age: 7, name: 'Bar'}, { age: 5, name: 'Foo'}, { age: 6, name: 'Foo'} ] Rx.Observable.of( ...items ) .distinctUntilKeyChanged('name') .subscribe( x => console.log( x )) // 輸出 // { age: 4, name: 'Foo'} // { age: 7, name: 'Bar'} // { age: 5, name: 'Foo'}
六、ElementAt
只發射指定位置的元素
// 下標從0開始，輸出 ‘A’
Rx.Observable.of('A', 'B', 'B', 'A', 'B', 'A', 'A') .elementAt( 3 ) .subscribe( x => console.log( x ))
七、Filter
自定義過濾規則，符合才把該值進行發射
// 輸出奇數：1,2,5,7,9,1
Rx.Observable.of(1,3,2,5,4,7,6,9,1) .filter( x => x % 2 !== 0 ) .subscribe( x => console.log( x ))
八、First
只輸出第一個元素
// 只輸出第一個元素，輸出：1
Rx.Observable.of(1,3,2,5,4,7,6,9,1) .first( ) .subscribe( x => console.log( x ))
九、ignoreElement
忽略所有值，一個也不發射
// 啥也不輸出
Rx.Observable.of(1,3,2,5,4,7,6,9,1) .ignoreElements( ) .subscribe( x => console.log( x ))
十、audit、auditTime
audit：當另一個Observable發射值前，源Observable的值會被忽略，當另一個Observable發射值時，才從源Observable發射一個最新值，然后重復上述過程。
auditTime：在指定等待時間內，源Observable的值會被忽略，等待結束后，發射一個源Observable的最新值，然后重復上述過程。
他們與throttle的區別是，第一個值的發射，是先等待再發射，而throttle是先發射第一個值，然后再等待。
// auditTime // 輸出2,5,8,11,13...
Rx.Observable.interval( 1000 ) .auditTime( 2000 ) .subscribe( x => console.log( x ))
十一、last
返回源數據集的最后一個條目
// 返回最后一個條目，輸出：5
Rx.Observable.of(1,2,3,4,5) .last( ) .subscribe( x => console.log( x ))
十二、sample
當另一個Observable發射值時，才從源Observable數據集發射一個最新值。
// 每次點擊輸出一個計時器的最新值
Rx.Observable.interval( 1000 ) .sample( Rx.Observable.fromEvent( document, 'click' )) .subscribe( x => console.log( x ))
十三、sampleTime
每隔一定的時間間隔，發射一個源Observable數據集的最新值。
// 每隔2秒，分別輸出 0,2,4,6,8....
Rx.Observable.interval( 1000 ) .sampleTime( 2000 ) .subscribe( x => console.log( x ))
十四、single
若源Observable數據集只有一個數據項，則輸出該項。若多於一個數據項，則報錯
// 輸出 1
Rx.Observable.of( 1 ) .single( ) .subscribe( x => console.log( x ))
十五、skip
跳過源Observable數據集的n個數據，然后才發射值。
// 跳過開頭2個，輸出3,4
Rx.Observable.of(1,2,3,4) .skip( 2 ) .subscribe( x => console.log( x ))
十六、skipUntil
忽略源Observable開頭的一系列值，直到當另一個Observable開始發射值，才會從源Observable開始發射值
// 3秒后，才每秒發射計時器的值，輸出：2,3,4,5,6.....
Rx.Observable.interval( 1000 ) .skipUntil( Rx.Observable.of( 1 ).delay( 3000 )) .subscribe( x => console.log( x ))
十七、skipWhile
忽略源Observable開頭的一系列值，直到有一項符合條件，才開始從源Observable的該值開始，開始發射值。
// 輸出4,5,3,2,1
Rx.Observable.of( 1, 2, 3, 4, 5, 3, 2, 1) .skipWhile( x => x < 4 ) .subscribe( x => console.log( x ))
十八、take
從源Obervable的開頭開始，拿到n個數據項進行發射，其余的數據項將被忽略。
// 每秒輸出：0,1,2 后結束
Rx.Observable.interval( 1000 ) .take( 3 ) .subscribe( x => console.log( x ))
十九、takeLast
從源Obervable的倒數第一個向前數，拿到n個數據項並進行發射，從開頭開始的的數據項將被忽略。
// 輸出5,6,7
Rx.Observable.of( 1,2,3,4,5,6,7 ) .takeLast( 3 ) .subscribe( x => console.log( x ))
二十、takeUtil
從源Observable數據集的第一項開始進行發射，直到另一個Observable開始發射第一個值時，源Observable停止發射值。
// 3秒后停止計時器的值輸出
Rx.Observable.interval( 1000 ) .takeUntil( Rx.Observable.of( 1 ).delay( 3000 )) .subscribe( x => console.log( x ))
二十一、takeWhile
從源Observable數據集的第一個數據項開始發射值，直到遇到符合條件的第一個數據項后，停止源Observable數據集的發射
// 輸出：1,2,3
Rx.Observable.of( 1,2,3,4,3,2,1) .takeWhile( x => x < 4 ) .subscribe( x => console.log( x ))
二十二、throttle
每當源Observable數據集發射一個數據項時，會等待另一個Observable發射值，在等待期間源Observable的值將被忽略並不會發射，直到另一個Observable發射了一個值時，才把源Observable的最新值進行發射
// 輸出0,3,6,9,12..... // 每次輸出一個值，至少等待兩秒后，才輸出最新值
Rx.Observable.interval( 1000 ) .throttle( x => Rx.Observable.interval( 2000 )) .subscribe( x => console.log( x ))
二十三、throttleTime
每當源Observable數據集發射一個數據項時，會等待n秒，n秒后輸出源Observable的最新值。
// 輸出0,3,6,9,12..... Rx.Observable.interval( 1000 ) .throttleTime( 2000 ) .subscribe( x => console.log( x ))