RXJS部分操作符解释
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div><label for='length'>长</label><input id='length' type='number'></div>
<div><label for='width'>宽</label><input id='width' type='number'></div>
<div id='area'></div>
<script src="https://unpkg.com/@reactivex/rxjs@5.0.3/dist/global/Rx.js"></script>
</body>
</html>
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) => {return l*w} );
area$.subscribe(val => {area.innerHTML = val});
//但两个输入的流都有新值出现的时候进行计算,注意不是取最新值，第二次变化的值只匹配第二次变化的值
//const area$ = Rx.Observable.zip(length$, width$, (l,w) => {return l*w} );
//area$.subscribe(val => {area.innerHTML = 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 => {
// console.log(logMessage + v);
// logMessage = "当前";
//})
.scan( (x, y) => {return 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) => {return [...x, y]}, [])
interval2$.subscribe(
val => console.log(val)
)
//.never不会终止 .throw会抛出err .empty会直接结束
const errObs$ = Rx.Observable.throw('出错了');
errObs$.subscribe(
val => console.log(val),
err => {
console.log('Error:' + err)
},
() => {
console.log('I am complete')
}
)
//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({id:1, value:10},{id:2, value:20}, {id:3, value:'dwd'})
//操作符：
//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) => {return 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) => {return x+y})和scan差不多，不过reduce是发射scan的最终值
//特性：
//next:
//error:
//complete:
