RxJS -- (pluck、distinctUntilChanged、distinct)

已于 2023-07-20 19:50:18 修改
阅读量160 收藏
点赞数
分类专栏： rxjs 文章标签： rxjs
于 2020-11-08 21:34:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43964866/article/details/109553706
版权
本文介绍了RxJS中三个重要的操作符：pluck用于提取对象的特定属性值，distinctUntilChanged在当前值与前一个值不同时发出，而distinct则只发送未出现过的数据。文章通过多个示例详细解释了它们的工作原理，并提到了内存管理和可选参数的使用。对于distinct，文章强调了在大数据量下可能出现的内存泄漏问题及其解决方案。
摘要由CSDN通过智能技术生成

碎碎念：知识点梳理归纳，如果有什么不对的感谢大家指正一起学习！

  • 版本为6

🔸图文说明🔸

操作符 描述
pluck 提取数据流中每个数据的某个字段
distinctUntilChanged 删除重复的连续数据
distinct 删除重复的数据

① pluck

  • 把上游数据中特定字段的值"拔"出来
  • 将每个源值(对象)映射成它指定的嵌套属性。
  • 选择属性来发出值

例1：提取name属性的值
在这里插入图片描述
例1：提取name属性的值。如果没有就返回undefined
在这里插入图片描述

② distinctUntilChenged

  • 当当前值与前一个值不同时才发出
  • 返回 Observable，它发出源 Observable 发出的所有与前一项不相同的项(与前一值比较)
  • 这个操
最低0.47元/天 解锁文章
某些开发
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
（六）温故知新系列之RXJS——RXJS操作符基础(转化类)
军火库
12-19 1073
合并类操作符把多个数据流汇合为⼀个数据 流，但是汇合之前数据是怎样，在汇合之后还是那样；过滤类操作符可以 筛选掉⼀些数据，其中回压控制的过滤类操作符还可以改变数据传递给下 游的时间，但是数据本⾝不会变化，怎么进就怎么出。这⼀章会介绍RxJS 对于数据的转化处理，也就是让数据管道中的数据发⽣变化。转化类和过滤类操作符都对数据做⼀些处理，但是过滤类做的处理是 筛选，决定哪些数据传递给下游，并不对数据本⾝做处理；⽽转化类操作 符不做过滤，会对每个具体数据做⼀些转化。
RXJS中的操作符distinctUntilChanged
Tonghanhan的博客
04-10 466
返回一个 Observable，它发出源 Observable 发出的所有项目，这些项目与上一个项目相比是不同的。
Angular基础篇 —— Rxjs之二：distinct, distinctUtilChanged, filter
KenkoTech的博客
02-28 876
RxJS简介 Reactive Extensions for JavaScript RxJS 是一个库，它通过使用 observable 序列来编写异步和基于事件的程序。它提供了一个核心类型Observable，附属类型 (Observer、 Schedulers、 Subjects) 和受 [Array#extras] 启发的操作符 (map、filter、reduce、every, 等等)，这些数组操作符可以把异步事件作为集合来处理。 RxJS核心概念 Observable (可观...
rxjs操作符
jenniferzgh的博客
11-06 346
类型 操作符 用处 实例 操作类 from （数组，Promise，Iterable）转化为Observable fromEvent （事件）转化为Observable of 接收一系列数据，emit出去 转换类 map mapTo 定义固定值 pluck ...
构建流式应用—RxJS详解
热门推荐
zhoulu001的专栏
11-07 1万+
最近在 Alloyteam Conf 2016 分享了《使用RxJS构建流式前端应用》，会后在线上线下跟大家交流时发现对于 RxJS 的态度呈现出两大类:有用过的都表达了 RxJS 带来的优雅编码体验，未用过的则反馈太难入门。所以，这里将结合自己对 RxJS 理解，通过 RxJS 的实现原理、基础实现及实例来一步步分析，提供 RxJS 较为全面的指引，感受下使用 RxJS 编码是怎样的体验。
rxjs-hooks：RxJS的React钩子
02-05
RxJS的React挂钩 安装使用npm： $ npm i --save rxjs-hooks或纱线： $ yarn add rxjs-hooks快速浏览import React from "react" ;import ReactDOM from "react-dom" ;import { useObservable } from "rxjs-hooks" ;...
rxjs-grpc:TypeScript中带有RxJS的Typesafe gRPC
05-02
rxjs-grpc安装$ npm install rxjs-grpc rxjs grpc快速开始创建您的protobuf定义文件sample.proto ： syntax = "proto3" ;package sample ;service Greeter { rpc SayHello (HelloRequest) returns (HelloReply) {}}...
rxjs-practice-master.zip
07-13
标题“rxjs-practice-master.zip”表明这是一个关于RxJS实践的项目，可能包含了作者或团队在学习和应用RxJS过程中编写的示例代码。这个压缩包可能是为了帮助开发者更好地理解和掌握RxJS的工作原理以及在实际项目中的...
rxjs-example:RxJS使用快速入门
05-14
rxjs-example 通过构建一个简单的 github 应用，学习 RxJS 的快速入门教程。线上 DEMO 可戳 开始前的准备 使用 ES6 语法 通过 webpack/webpack-dev-server 进行编译 通过学习 RxJS 的核心概念 本地跑起来 $ git ...
rxjs-spy:RxJS的调试库
05-08
rxjs-spy它是什么？ rxjs-spy是rxjs-spy的调试库。您为什么需要它？ 调试基于RxJS的代码的常用方法包括散布do操作符并记录整个组合的可观察对象。 我觉得这很乏味，因此我编写了此库并实现了一种不干扰机制，用于...
rxjs 筛选类操作符
yanyi24的博客
03-29 322
这一节我们介绍筛选类操作符 筛选操作符 在基于推送的方式下，选择接受项的方式和时间很重要。这些操作符提供了从 observable源中接受值和处理backpressure(背压)的技术。 audit 在目标 observable发出值之前，会忽略所有源 observable发出的值，直到目标 observable发出值，会推送源 observable最近发出的一次值。 import { interval, fromEvent } from 'rxjs'; import { audit, pluck } .
rxjs -- 响应式编程
JUSTIN的博客
08-06 1304
1. 响应式编程英文原文：In computing, reactive programming is a programming paradigm oriented around data flows and the propagation of change. This means that it should be possible to express static or dynamic da
rxjs6 常用引入方式整理
往前跑
03-20 3289
创建 Observable 的方法、types、schedulers 和一些工具方法: import { Observable, Subject, asapScheduler, pipe, of, from, interval, merge, range, timer, empty, never, throwError, fromEvent, fromEventPattern, Subscr...
RxJS沉浸式入门教程
最新发布
IMSI的博客
04-14 545
rxjs
RxJS入门（9）----调度（Bending Time with Schedulers）
tianjun2012的专栏
05-10 4438
如题，感觉题目没有翻译好，见英文知其义。 我一知道RxJS，我们开始把它用到我的项目中了。在一段时间后，我想，我知道能如何有效的使用它了，但是这里有一个令人心烦的问题：我如何知道使用的操作符是异步的还是同步的？换句话说，什么时候利用操作符准确的发送通知？这看起来是正确使用RxJs的机器重要的部分，但是这让我感觉很模糊。 interval很明显是异步的，所以它必须在像setTimeout内部使用来发射
rxjs 转换类操作符
yanyi24的博客
03-29 387
这一节我们介绍转换类操作符 转换操作符 顾名思义，转换即是返回你需要的新的值。在通过操作符链时进行值的转换是一个常见的任务。这些操作符提供了转换技术几乎可以涵盖你所能遇到的任何场景。 buffer 用数组收集一个流发出的值，直到另一个流发出值，就把当前已收集到的值发出并释放。 import { interval, fromEvent } from 'rxjs'; import { buffer } from 'rxjs/operators'; const myInterval = interval(1.
Rxjs--转换操作符
weixin_34405332的博客
01-13 251
2019独角兽企业重金招聘Python工程师标准>>> ...
rxjs distinct 数组去重
榴莲不好吃的专栏
03-15 1679
distinct 操作符可以用来去重，将上游重复的数据过滤掉。 import { of,from } from 'rxjs'; import { distinct} from 'rxjs/operators'; // 使用of操作符产生一些数据,去重,然后订阅 of(1, 1, 2, 2, 2, 1, 2, 3, 4, 3, 2, 1).pipe( distinct() ).sub...
RxJS——函数式编程
juan_lutter的博客
05-06 1386
本篇通过RxJS的实现原理、基础实现以及实例来一步步分析，提供RxJS较为全面的指引，感受一波使用RxJS编码是怎样的体验常规方式实现搜索功能搜索功能是前端开发经常做的，一般的实现方式是：监听文本框的输入事件，将输入的内容发送到后台，最终将后台返回的数据(搜索结果)在前端页面渲染处理上面的代码实现了我们要的搜索功能，但存在两个较大的问题：1.多余的请求    当我们想要搜索“笔记本”时，输入框可能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值