最近項目不太忙,有時間系統學習了一下rxjs的一些知識,將其中個人認為比較常用的一些操作符mark下來,分享學習 ...
本文使用的是angular6內置的rxjs,版本號為6.3.3
concat
通過順序地發出多個 Observables 的值將它們連接起來,一個接一個的。
參數:
名稱 | 類型 | 屬性 | 描述 |
---|---|---|---|
other | ObservableInput | 等待被連接的 Observable。 可以接受多個輸入 Observable。 | |
scheduler | Scheduler | 可選的,預設值: null | 可選的調度器,控制每個輸入 Observable 的訂閱。 |
const timer1 = interval(1000).pipe(take(10));
const timer2 = interval(2000).pipe(take(6));
const timer3 = interval(500).pipe(take(10));
const result = timer1.pipe(concat(timer2, timer3), toArray());
result.subscribe(x => console.log(x));
// 將Observable轉換為數組之後的結果
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
count
計算源的發送數量,並當源完成時發出該數值。
當源完成的時候,告知總共發送了多少個值。
參數:
名稱 | 類型 | 屬性 | 描述 |
---|---|---|---|
predicate | function(value: T, i: number, source: Observable |
可選的 | A boolean 函數,用來選擇哪些值會被計數。 參數如下:value: 來自源的值;index: 來自投射的 Observable 的值的 "index"(從0開始);source: 源 Observable 自身實例。 |
// 記錄1到7之間有幾個奇數
const numbers = range(1, 7);
numbers.pipe(count(i => i % 2 === 1))
.subscribe(x => console.log(x));
// 結果
// 4
// 返回數組的長度
const arr = [12, 9, 2, 21, 11];
from(arr).pipe(count(x => true))
.subscribe(x => console.log(x));
// 結果
// 5
delay
通過給定的超時或者直到一個給定的時間來延遲源 Observable 的發送。
每個數據項的發出時間都往後推移固定的毫秒數.
如果延時參數是數字, 這個操作符會將源 Observable 的發出時間都往後推移固定的毫秒數。 保存值之間的相對時間間隔.
如果延遲參數是日期類型, 這個操作符會延時Observable的執行直到到了給定的時間.
參數:
名稱 | 類型 | 屬性 | 描述 |
---|---|---|---|
delay | number或Date | 延遲時間(以毫秒為單位的數字)或 Date 對象(發送延遲到這個時間點)。 | |
scheduler | Scheduler | 可選的,預設值: async | 調度器,用來管理處理每項時延的定時器。 |
// 每次點擊延遲1秒
var clicks = Rx.Observable.fromEvent(document, 'click');
var delayedClicks = clicks.delay(1000); // each click emitted after 1 second
delayedClicks.subscribe(x => console.log(x));
// 延時所有的點擊直到到達未來的時間點
var clicks = Rx.Observable.fromEvent(document, 'click');
var date = new Date('March 15, 2050 12:00:00'); // in the future
var delayedClicks = clicks.delay(date); // click emitted only after that date
delayedClicks.subscribe(x => console.log(x));
distinct
可以用來做數組去重
返回 Observable,它發出由源 Observable 所發出的所有與之前的項都不相同的項。
如果提供了 keySelector 函數,那麼它會將源 Observable 的每個值都投射成一個新的值,這個值會用來檢查是否與先前投射的值相等。如果沒有提供 keySelector 函數,它會直接使用源 Observable 的每個值來檢查是否與先前的值相等。
const arr = [1, 1, 2, 2, 2, 1, 2, 3, 4, 3, 2, 1];
from(arr).pipe(distinct(), toArray())
.subscribe(x => console.log(x));
// 結果
// [1, 2, 3, 4]
// 對象數組
const arr1 = [{ age: 4, name: 'Foo' },
{ age: 7, name: 'Bar' },
{ age: 5, name: 'Foo' }];
from(arr1).pipe(distinct(item => item.name), toArray())
.subscribe(x => console.log(x));
// 結果
// [{ age: 4, name: 'Foo' },
{ age: 7, name: 'Bar' }]
every
功能類似於lodash的every
返回的 Observable 發出是否源 Observable 的每項都滿足指定的條件。
參數:
名稱 | 類型 | 屬性 | 描述 |
---|---|---|---|
predicate | function | 用來確定每一項是否滿足指定條件的函數。 | |
thisArg | any | 可選的 | 可選對象,作為回調函數中的 this 使用。 |
const users = [
{ 'user': 'barney', 'age': 36, 'active': false },
{ 'user': 'fred', 'age': 40, 'active': false }
];
from(users).pipe(
every(item => !item.active)
)
.subscribe(x => console.log(x));
// 結果
// true
from(users).pipe(
every(item => item.user === 'barney' && item.active === false)
)
.subscribe(x => console.log(x));
// 結果
// false
filter
通過只發送源 Observable 的中滿足指定 predicate 函數的項來進行過濾。
類似於 Array.prototype.filter(), 它只會發出源 Observable 中符合標準函數的值。
參數:
名稱 | 類型 | 屬性 | 描述 |
---|---|---|---|
predicate | function(value: T, index: number): boolean | 評估源 Observable 所發出的每個值的函數。如果它返回 true,就發出值,如果是 false 則不會傳給輸出 Observable 。index 參數是自訂閱開始後發送序列的索引,是從 0 開始的。 | |
thisArg | any | 可選的 | 可選參數,用來決定 predicate 函數中的 this 的值。 |
const users = [
{ 'user': 'barney', 'age': 36, 'active': false },
{ 'user': 'fred', 'age': 40, 'active': true },
{ 'user': 'ckdf', 'age': 24, 'active': false },
{ 'user': 'gdfg', 'age': 31, 'active': false }
];
from(users).pipe(
filter(item => item.active)
)
.subscribe(x => console.log(x));
// 結果
// {user: "fred", age: 40, active: true}
find
只發出源 Observable 所發出的值中第一個滿足條件的值。
找到第一個通過測試的值並將其發出。
參數:
名稱 | 類型 | 屬性 | 描述 |
---|---|---|---|
predicate | function(value: T, index: number, source: Observable |
使用每項來調用的函數,用於測試是否符合條件。 | |
thisArg | any | 可選的 | 可選參數,用來決定 predicate 函數中的 this 的值。 |
const users = [
{ 'user': 'barney', 'age': 36, 'active': true },
{ 'user': 'fred', 'age': 40, 'active': true },
{ 'user': 'ckdf', 'age': 24, 'active': false },
{ 'user': 'gdfg', 'age': 31, 'active': false }
];
from(users).pipe(
find(item => item.active)
)
.subscribe(x => console.log(x));
// 結果
// {user: "barney", age: 36, active: true}
findIndex
只發出源 Observable 所發出的值中第一個滿足條件的值的索引。
它很像 find , 但發出的是找到的值的索引, 而不是值本身。
參數:
名稱 | 類型 | 屬性 | 描述 |
---|---|---|---|
predicate | function(value: T, index: number, source: Observable |
使用每項來調用的函數,用於測試是否符合條件。 | |
thisArg | any | 可選的 | 可選參數,用來決定 predicate 函數中的 this 的值。 |
const users = [
{ 'user': 'barney', 'age': 36, 'active': false },
{ 'user': 'fred', 'age': 40, 'active': true },
{ 'user': 'ckdf', 'age': 24, 'active': false },
{ 'user': 'gdfg', 'age': 31, 'active': false }
];
from(users).pipe(
findIndex(item => item.active)
)
.subscribe(x => console.log(x));
// 結果
// 1
first
只發出由源 Observable 所發出的值中第一個(或第一個滿足條件的值)。
只發出第一個值。或者只發出第一個通過測試的值。
參數:
名稱 | 類型 | 屬性 | 描述 |
---|---|---|---|
predicate | function(value: T, index: number, source: Observable |
可選的 | 使用每項來調用的函數,用於測試是否符合條件。 |
resultSelector | function(value: T, index: number): R | 可選的 | 函數,它基於源 Observable 的值和索引來生成輸出 Observable 的值。傳給這個函數的參數有:value: 在源 Observable 上發出的值。index: 源值的索引。 |
defaultValue | R | 可選的 | 假如在源 Observable 上沒有找到有效值,就會發出這個 預設值。 |
const users = [
{ 'user': 'barney', 'age': 36, 'active': false },
{ 'user': 'fred', 'age': 40, 'active': true },
{ 'user': 'ckdf', 'age': 24, 'active': false },
{ 'user': 'gdfg', 'age': 31, 'active': false }
];
from(users).pipe(
first(item => item.active)
)
.subscribe(x => console.log(x));
// 結果
// {user: "fred", age: 40, active: true}
from(users).pipe(
first()
)
.subscribe(x => console.log(x));
// 結果
// {user: "barney", age: 36, active: false}
isEmpty
如果源 Observable 是空的話,它返回一個發出 true 的 Observable,否則發出 false 。
const users = [
{ 'user': 'barney', 'age': 36, 'active': false },
{ 'user': 'fred', 'age': 40, 'active': true },
{ 'user': 'ckdf', 'age': 24, 'active': false },
{ 'user': 'gdfg', 'age': 31, 'active': false }
];
from(users).pipe(
isEmpty()
)
.subscribe(x => console.log(x));
// 結果
// false
last
返回的 Observable 只發出由源 Observable 發出的最後一個值。它可以接收一個可選的 predicate 函數作為 參數,如果傳入 predicate 的話則發送的不是源 Observable 的最後一項,而是發出源 Observable 中 滿足 predicate 函數的最後一項。
const users = [
{ 'user': 'barney', 'age': 36, 'active': false },
{ 'user': 'fred', 'age': 40, 'active': true },
{ 'user': 'ckdf', 'age': 24, 'active': true },
{ 'user': 'gdfg', 'age': 31, 'active': false }
];
from(users).pipe(
last(item => item.active)
)
.subscribe(x => console.log(x));
// 結果
// {user: "ckdf", age: 24, active: true}
map
將給定的 project 函數應用於源 Observable 發出的每個值,並將結果值作為 Observable 發出。
類似於 Array.prototype.map(), 它把每個源值傳遞給轉化函數以獲得相應的輸出值。
參數:
名稱 | 類型 | 屬性 | 描述 |
---|---|---|---|
project | function(value: T, index: number): R | 應用於由源 Observable 所發出的每個值的函數。index 參數是自訂閱開始後發送序列的索引,是從 0 開始的。 | |
thisArg | any | 可選的 | 可選參數,定義在 project 函數中的 this 是什麼。 |
const users = [
{ 'user': 'barney', 'age': 36, 'active': false },
{ 'user': 'fred', 'age': 40, 'active': true },
{ 'user': 'ckdf', 'age': 24, 'active': true },
{ 'user': 'gdfg', 'age': 31, 'active': false }
];
from(users).pipe(
map(item => 'hello' + item.user),
toArray()
)
.subscribe(x => console.log(x));
// 結果
// ["hellobarney", "hellofred", "hellockdf", "hellogdfg"]
mapTo
每次源 Observble 發出值時,都在輸出 Observable 上發出給定的常量值。
類似於 map,但它每一次都把源值映射成同一個輸出值。
參數:
名稱 | 類型 | 屬性 | 描述 |
---|---|---|---|
value | any | 將每個源值映射成的值。 |
const users = [
{ 'user': 'barney', 'age': 36, 'active': false },
{ 'user': 'fred', 'age': 40, 'active': true },
{ 'user': 'ckdf', 'age': 24, 'active': true },
{ 'user': 'gdfg', 'age': 31, 'active': false }
];
from(users).pipe(
mapTo('hello'),
toArray()
)
.subscribe(x => console.log(x));
// 結果
// ["hello", "hello", "hello", "hello"]
max
max 操作符操作的 Observable 發出數字(或可以與提供的函數進行比較的項)並且當源 Observable 完成時它發出單一項:最大值的項。
參數:
名稱 | 類型 | 屬性 | 描述 |
---|---|---|---|
comparer | Function | 可選的 | 可選的比較函數,用它來替代預設值來比較兩項的值。 |
const users = [
{ 'user': 'barney', 'age': 36, 'active': false },
{ 'user': 'fred', 'age': 40, 'active': true },
{ 'user': 'ckdf', 'age': 24, 'active': true },
{ 'user': 'gdfg', 'age': 31, 'active': false }
];
from(users).pipe(
max((a, b) => a.age < b.age ? -1 : 1)
)
.subscribe(x => console.log(x));
// 結果
// {user: "fred", age: 40, active: true}
merge
創建一個輸出 Observable ,它可以同時發出每個給定的輸入 Observable 中的所有值。
通過把多個 Observables 的值混合到一個 Observable 中 來將其打平。
const users = [
{ 'user': 'barney', 'age': 36, 'active': false },
{ 'user': 'fred', 'age': 40, 'active': true },
{ 'user': 'ckdf', 'age': 24, 'active': true },
{ 'user': 'gdfg', 'age': 31, 'active': false }
];
from(users).pipe(
merge(interval(1000)),
take(10),
toArray()
)
.subscribe(x => console.log(x));
// 結果
// [
{ 'user': 'barney', 'age': 36, 'active': false },
{ 'user': 'fred', 'age': 40, 'active': true },
{ 'user': 'ckdf', 'age': 24, 'active': true },
{ 'user': 'gdfg', 'age': 31, 'active': false },
0,
1,
2,
3,
4,
5
];
min
min 操作符操作的 Observable 發出數字(或可以使用提供函數進行比較的項)並且當源 Observable 完成時它發出單一項:最小值的項。
參數:
名稱 | 類型 | 屬性 | 描述 |
---|---|---|---|
comparer | Function | 可選的 | 可選的比較函數,用它來替代預設值來比較兩項的值。 |
const users = [
{ 'user': 'barney', 'age': 36, 'active': false },
{ 'user': 'fred', 'age': 40, 'active': true },
{ 'user': 'ckdf', 'age': 24, 'active': true },
{ 'user': 'gdfg', 'age': 31, 'active': false }
];
from(users).pipe(
min((a, b) => a.age < b.age ? -1 : 1)
)
.subscribe(x => console.log(x));
// 結果
// {user: "ckdf", age: 24, active: true}
reduce
在源 Observalbe 上應用 accumulator (累加器) 函數,然後當源 Observable 完成時,返回 累加的結果,可以提供一個可選的 seed 值。
使用 accumulator (累加器) 函數將源 Observable 所發出的所有值歸併在一起, 該函數知道如何將新的源值納入到過往的累加結果中。
參數:
名稱 | 類型 | 屬性 | 描述 |
---|---|---|---|
accumulator | function(acc: R, value: T, index: number): R | 調用每個 源值的累加器函數。 | |
seed | R | 可選的 | 初始累加值。 |
const arr = [1, 2, 3, 4];
from(arr).pipe(
reduce((acc, curr) => acc + curr, 0)
)
.subscribe(x => console.log(x));
// 結果
// 10
repeat
返回的 Observable 重覆由源 Observable 所發出的項的流,最多可以重覆 count 次。
參數:
名稱 | 類型 | 屬性 | 描述 |
---|---|---|---|
count | number | 可選的 | 源 Observable 項重覆的次數,如果 count 為0則產生一個空的 Observable 。 |
const arr = [1, 2, 3, 4];
from(arr).pipe(
repeat(3),
toArray()
)
.subscribe(x => console.log(x));
// 結果
// [1, 2, 3, 4, 1, 2, 3, 4, 1, 2, 3, 4]
startWith
返回的 Observable 會先發出作為參數指定的項,然後再發出由源 Observable 所發出的項。
參數:
名稱 | 類型 | 屬性 | 描述 |
---|---|---|---|
values | ...T | 你希望修改過的 Observable 可以先發出的項。 | |
scheduler | Scheduler | 可選的 | 用於調度 next 通知發送的 IScheduler 。 |
const users = [
{ 'user': 'barney', 'age': 36, 'active': false },
{ 'user': 'fred', 'age': 40, 'active': true },
{ 'user': 'ckdf', 'age': 24, 'active': true },
{ 'user': 'gdfg', 'age': 31, 'active': false }
];
from(users).pipe(
startWith({ 'user': 'jokl', 'age': 28, 'active': false }),
toArray()
)
.subscribe(x => console.log(x));
// 結果
//[
{ 'user': 'jokl', 'age': 28, 'active': false },
{ 'user': 'barney', 'age': 36, 'active': false },
{ 'user': 'fred', 'age': 40, 'active': true },
{ 'user': 'ckdf', 'age': 24, 'active': true },
{ 'user': 'gdfg', 'age': 31, 'active': false }
]
take
只發出源 Observable 最初發出的的N個值 (N = count)。
接收源 Observable 最初的N個值 (N = count),然後完成。
參數:
名稱 | 類型 | 屬性 | 描述 |
---|---|---|---|
count | number | 發出 next 通知的最大次數。 |
const users = [
{ 'user': 'barney', 'age': 36, 'active': false },
{ 'user': 'fred', 'age': 40, 'active': true },
{ 'user': 'ckdf', 'age': 24, 'active': true },
{ 'user': 'gdfg', 'age': 31, 'active': false }
];
from(users).pipe(
startWith({ 'user': 'jokl', 'age': 28, 'active': false }),
take(3),
toArray()
)
.subscribe(x => console.log(x));
// 結果
//[
{ 'user': 'jokl', 'age': 28, 'active': false },
{ 'user': 'barney', 'age': 36, 'active': false },
{ 'user': 'fred', 'age': 40, 'active': true }
]
takeLast
只發出源 Observable 最後發出的的N個值 (N = count)。與take類似
記住源 Observable 的最後N個值 (N = count),然後只有當 它完成時發出這些值。
參數:
名稱 | 類型 | 屬性 | 描述 |
---|---|---|---|
count | number | 從源 Observable 的值序列的末尾處,要發出的值的最大數量。 |
const users = [
{ 'user': 'barney', 'age': 36, 'active': false },
{ 'user': 'fred', 'age': 40, 'active': true },
{ 'user': 'ckdf', 'age': 24, 'active': true },
{ 'user': 'gdfg', 'age': 31, 'active': false }
];
from(users).pipe(
startWith({ 'user': 'jokl', 'age': 28, 'active': false }),
takeLast(3),
toArray()
)
.subscribe(x => console.log(x));
// 結果
//[
{ 'user': 'fred', 'age': 40, 'active': true },
{ 'user': 'ckdf', 'age': 24, 'active': true },
{ 'user': 'gdfg', 'age': 31, 'active': false }
]
toArray
將源 Observable轉換為數組
const arr = [1, 2, 3, 4];
from(arr).pipe(
toArray()
)
.subscribe(x => console.log(x));
// 結果
// [1, 2, 3, 4]
toPromise
將 Observable 序列轉換為符合 ES2015 標準的 Promise 。
const users = [
{ 'user': 'barney', 'age': 36, 'active': false },
{ 'user': 'fred', 'age': 40, 'active': true },
{ 'user': 'ckdf', 'age': 24, 'active': true },
{ 'user': 'gdfg', 'age': 31, 'active': false }
];
from(users).pipe(
startWith({ 'user': 'jokl', 'age': 28, 'active': false }),
takeLast(3),
toArray()
)
.toPromise()
.then(x => console.log(x))
.catch(err => console.log(err));
// 結果
//[
{ 'user': 'fred', 'age': 40, 'active': true },
{ 'user': 'ckdf', 'age': 24, 'active': true },
{ 'user': 'gdfg', 'age': 31, 'active': false }
]