zoukankan      html  css  js  c++  java
  • RxJS操作符(一)

    https://rxmarbles.com/

    图解rxjs: https://reactive.how/

    rx相当于js里面的Loaddash或者underscore之类的。

    一、创建类操作符

    创建类操作符是连接传统编程和响应式编程的强梁

    from: 可以把数组、Promise、以及Iterable转化为Observable。

    fromEvent: 可以把事件转化为Observable

    of :接受一系列的数据,并把它们emit出去(不一定是数组)

    1、fromEvent

    把length的keyup事件转化为Observable对象。

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

    2、from

    输入数组,出来一个一个元素。

    发射出来很快,直接取到最后一个值。

    const length$=Rx.Observable.from([1,2,3,4]);  

    3、of

    把对象转化为Observable

    const length$=Rx.Observable.of({id:1,value:20}); 

    计算时候拿l.value计算

    const area$=Rx.Observable.combineLatest(length$,width$,(l,w)=>{return l.value*w});

    可以把任意多个,可以是不一样的对象转化

    const length$=Rx.Observable.of({id:1,value:20},{key:'xx',value:'blalala'}); 

    二、转换类操作符

    • map
    • mapTo
    • pluck

    mapTo和pluck都是map的一种变形。

    Marbles图:http://rxmarbles.com/

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

    等价于

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

    pluck是map的简化用法。

    mapTo

    mapTo成一个固定值,常量,

    使用场景:用于不关心值,button的click事件,只需要知道发生了点击事件。点击一次一个1,最后处理可能是累加起来。

    const length$ =Rx.Observable.fromEvent(length,'keyup').mapTo(1);
    const width$ =Rx.Observable.fromEvent(width,'keyup').mapTo(2);

    相当于是:两个序列的常数流

    const length$ =Rx.Observable.fromEvent(length,'keyup').map(_=>1);
    const width$ =Rx.Observable.fromEvent(width,'keyup').map(_=>2);

    只关心事件发生了,不关心值。

    map:原始流和转换后的流发生的时间点一样。 

    本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:https://www.cnblogs.com/starof/p/9114763.html 有问题欢迎与我讨论,共同进步。 

  • 相关阅读:
    云之家溢多利cloud审批提示"已绑定云之家,不能重复绑定"
    移动报表测试表单插件
    返回数据
    CRM发布菜单
    下推启动条件修改无效
    谷歌浏览器路径
    移动控件前端设置
    GridView中的数据导出为Excel【转】,和以前的有变化
    Ajax.net 错误 Could not load type 'Microsoft.Web.Extensions.Design.Dll'解决方法.
    WCF运行错误:“此集合已经包含方案 http 的地址”的解决办法
  • 原文地址:https://www.cnblogs.com/starof/p/9114763.html
Copyright © 2011-2022 走看看