Rxjs常用operators

本文使用的是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 ): boolean	可選的	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 ): boolean		使用每項來調用的函數，用於測試是否符合條件。
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 ): boolean		使用每項來調用的函數，用於測試是否符合條件。
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 ): boolean	可選的	使用每項來調用的函數，用於測試是否符合條件。
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 }
    ]