rx《二》 流的合并

merge 字面意思合并,可以理解为对数据源的合并

    <div><input type="text" id="length"></div>//1222333
    <div><input type="text" id="width"></div>//2244444
      <div id="area"></div>

<script>
const length=document.getElementById('length');
const width=document.getElementById('width');
const area=document.getElementById('area');
const width$=Rx.Observable.fromEvent(width,'keyup').pluck('target','value');
const length$=Rx.Observable.fromEvent(length,'keyup').pluck('target','value');
const area$=Rx.Observable.merge(width$,length$);
area$.subscribe(val=>{
  console.log(val)
})
</script>

输入1，2，12，122.。。。
   2，24，244，2444.。。
可以看出length的值并没有和width的值混合到一起，所以可以称为对数据源的合并

concat

    也是流的合并
    必须在第一个流结束之后 才会对第二个流进行合并
    const length=document.getElementById('length');
const width=document.getElementById('width');
const area=document.getElementById('area');

const width$=Rx.Observable.fromEvent(width,'keyup').pluck('target','value');
const length$=Rx.Observable.fromEvent(length,'keyup').pluck('target','value');

const first$=Rx.Observable.from([1,2,3,4])
const area$=Rx.Observable.concat(first$,width$);
area$.subscribe(val=>{
  console.log(val)
})
1
2
3
4
'1'
'12'
。。。。

startWith(x) 相当于在数组之前添加一个值

const first$=Rx.Observable.from([1,2,3,4]).startWith(0);//用于赋予初值
0
1
2
3
4

combineLatest

const length=document.getElementById('length');
const width=document.getElementById('width');
const area=document.getElementById('area');

const width$=Rx.Observable.fromEvent(width,'keyup').pluck('target','value');
const length$=Rx.Observable.fromEvent(length,'keyup').pluck('target','value');
const area$=Rx.Observable.combineLatest(length$,width$);
area$.subscribe(val=>{
  console.log(val)
})
['1','2']
['1','22']

combineLatest

const length=document.getElementById('length');
const width=document.getElementById('width');

const width$=Rx.Observable.fromEvent(width,'keyup').pluck('target','value');
const length$=Rx.Observable.fromEvent(length,'keyup').pluck('target','value');

const area$=Rx.Observable.combineLatest(length$,width$,
                                        (l,w)=>l*w
);
area$.subscribe(val=>{
  console.log(val)
})

zip和combineLatest的区别 zip中的值需要成对出现

const area$=Rx.Observable.zip(length$,width$,
                                        (l,w)=>l*w
);
area$.subscribe(val=>{
  console.log(val)
})

withLatestForm;

length$.withLatestForm(width$);
第一个为主，当都有初始值的时候，并且length$有变化时开始合并

过滤操作符 debounce debounceTime

debounce:只有当另一个Observable发射值时，才取源Obervable的最新数据进行发射，其他数据取消发射。
debounceTime:一段时间内，只取最新数据进行发射，其他数据取消发射。
.debounceTime(xxx)

distinct 去除重复的值

Rx.Observable.of('A', 'B', 'C', 'A', 'B')
    .distinct( )
    .subscribe( x => console.log( x ))
    ABC

distinctUntilChanged去除连续重复的值

// 去除连续重复的元素，输出A,B,A,B,A
Rx.Observable.of('A', 'B', 'B', 'A', 'B', 'A', 'A')
    .distinctUntilChanged( )
    .subscribe( x => console.log( x ))