RXJS部分操作符解釋

2021-09-14 07:41:38 字數 3045 閱讀 9861

rxjs部分操作符解釋

長寬

const length = document.getelementbyid('length');

const width = document.getelementbyid('width');

const area = document.getelementbyid('area');

//所有的rx資料流後面加$,約定規範

const length$ = rx.observable.fromevent(length, 'keyup').pluck('target', 'value');

const width$ = rx.observable.fromevent(width, 'keyup').pluck('target', 'value');

//height$.subscribe(val => console.log(val.target.value + ' ' + new date()));

//但兩個輸入的流都有值時對流中最新的值進行計算

const area$ = rx.observable.combinelatest(length$, width$, (l,w) => );

area$.subscribe(val => );

//但兩個輸入的流都有新值出現的時候進行計算,注意不是取最新值,第二次變化的值只匹配第二次變化的值

//const area$ = rx.observable.zip(length$, width$, (l,w) => );

//area$.subscribe(val => );

//interval 0.1秒發射乙個值 val其實就相當於next,err和complete是可選項

//let logmessage = "當前的值是"

const interval1$ = rx.observable.interval(200)

//.map(val => val * 2)

.filter(val => val % 2 === 0)

//.do(v => )

.scan( (x, y) => )

.take(4);

interval1$.subscribe(

val => console.log(val),

err => console.log(err),

() => console.log('i am complete')

);//因為reduce取得是最終值,而interval是沒有最終值的,所以要把take放在reduce前面,不然會沒有輸出

const interval2$ = rx.observable.interval(100)

.filter(val => val %2 === 0)

.take(4)

.reduce( (x, y) => , )

interval2$.subscribe(

val => console.log(val)

)//.never不會終止 .throw會丟擲err .empty會直接結束

const errobs$ = rx.observable.throw('出錯了');

errobs$.subscribe(

val => console.log(val),

err => ,

() =>

)//timer接收兩個引數,第乙個是一開始的延遲時間,第二個發射引數的間隔時間,

//如果沒有第二個引數則只輸出乙個值,與interval相比多了乙個開始的延遲時間

//const timer$ = rx.observable.timer(100);

//timer$.subscribe(v => console.log(v))

//observable:

//from:把陣列,promise,以及itreable轉化成observable rx.observable.form([1,2,3,4]) -1-2-3-4-

//fromevent:把事件轉化成observable

//of:接收一系列的資料並把他們emit出去 rx.observable.of(,, )

//操作符:

//map:將傳入的值對映成另乙個值

//mapto:用於不關心傳入的值的時候使用,比如計數什麼的,.mapto(1)相當於.map( _ => 1)

//pluck: .pluck("target", "value")相當於.map(val => val.target.value)

//take: 取流當中的前幾個值

//filter:過濾流中的資料.filter(val => val %2 === 0)相當於過濾得到偶數

//do: .do在流處理的過程中進行一些操作

//last: .last()取最後乙個值,注意如果是乙個無窮序列last會取不到值

//skip: .skip(2)過濾掉前兩個值

//scan: .scan((x,y) => ) x是每上一次scan的值,初始值是0,y是本次序列的值 所以在要記住之前的計算結果的時候用scan是很好用的

// 0--------1----------2----------3----------4----------5-----------6------

// 0-------------------2---------------------4----------------------6------

// 0-------------------2---------------------6----------------------12-----

//reduce: .reduce((x,y) => )和scan差不多,不過reduce是發射scan的最終值

//特性:

rxjs過濾操作符

一 take操作符 只發出源 observable 最初發出的的n個值 n count 如果源發出值的數量小於 count 的話,那麼它的所有值都將發出。然後它便完成,無論源 observable 是否完成。import from angular core import from rxjs obse...

Rxjs中的操作符

去除重複資料,和所有的資料進行對比。示例一 rx.observable.of 1,2,3,4,1 distinct subscribe x console.log x 輸出為 1,2,3,4 示例二 當然,也可以為distinct傳遞方法,rx.observable.of distinct p p....

c 操作符過載(部分概念解釋)

這裡主要講了c 操作符重載重編譯器對成員函式和全域性函式的不同解釋,並且介紹了輸入輸出操作符的過載 單目操作符 成員函式 單目操作符 全域性函式 雙目操作符 成員函 數 雙目操作符 全域性函式 不難看出如果操作符過載函式是成員函式的話,左運算元是呼叫物件本身,這也正是因為成員函式有this指標。其實...