{"id":22903447,"url":"https://github.com/sawyerbutton/rxjs-season3","last_synced_at":"2025-04-01T07:23:24.852Z","repository":{"id":120750724,"uuid":"169935690","full_name":"sawyerbutton/RxJS-Season3","owner":"sawyerbutton","description":"RxJS presentation Season 3","archived":false,"fork":false,"pushed_at":"2019-02-14T02:03:29.000Z","size":16054,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-07T04:40:30.050Z","etag":null,"topics":["javascript","rxjs6"],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sawyerbutton.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-02-10T02:30:09.000Z","updated_at":"2020-07-15T11:15:43.000Z","dependencies_parsed_at":null,"dependency_job_id":"c0de2527-edc4-4d69-a369-d9e9bd1dca2b","html_url":"https://github.com/sawyerbutton/RxJS-Season3","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sawyerbutton%2FRxJS-Season3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sawyerbutton%2FRxJS-Season3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sawyerbutton%2FRxJS-Season3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sawyerbutton%2FRxJS-Season3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sawyerbutton","download_url":"https://codeload.github.com/sawyerbutton/RxJS-Season3/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246598905,"owners_count":20803108,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","rxjs6"],"created_at":"2024-12-14T02:36:45.410Z","updated_at":"2025-04-01T07:23:24.847Z","avatar_url":"https://github.com/sawyerbutton.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# RxJS-Season3\n\nRxJS presentation Season 3\n\n## RxJS 技术分享第三季\n\n1. 高阶操作符\n2. 辅助类操作符\n3. 过滤操作符\n4. [代码地址](https://stackblitz.com/edit/rxjs-season3?file=index.ts)\n5. [玩具地址1](https://stackblitz.com/edit/rxjs-reactive-scroll?file=index.ts)\n6. [玩具地址2](https://stackblitz.com/edit/rxjs-fake-search-engine?file=index.ts)\n7. [玩具地址3](https://stackblitz.com/edit/rxjs-save-note?file=index.ts)\n\n### 高阶操作符\n\n1. 高阶Observable 的概念\n2. `concatAll` 操作符\n3. `mergeAll` 操作符\n4. `zipAll` 操作符\n5. `combineAll` 操作符\n\n### 辅助类操作符\n\n1. `count` 统计数据流中产生的所有数据个数\n2. `max/min` 获得数据流中最大或最小的数据\n3. `reduce` 对数据流中所有数据进行规约操作\n4. `every` 判断是否所有数据满足某个判定条件\n5. `find` 和 findIndex 找到第一个满足判定条件的数据\n6. `isEmpty` 判断一个数据流是否不包含任何数据\n7. `defaultIfEmpty` 如果一个数据流为空就默认产生一个指定数据\n\n### 过滤数据流\n\n1. `filter` 过滤掉不满足判定条件的数据\n2. `first` 获得满足判定条件的第一个数据\n3. `last` 获得满足判定条件的最后一个数据\n4. `take` 从数据流中选择去最先出现的若干数据\n5. `takeLast` 从数据流中选取最后出现的若干数据\n6. `takeWhile/takeUntil` 从数据流种选取数据直到某种情况发生\n7. `skip` 从数据流中忽略最先出现的若干数据\n8. `skipWhile/skipUntil` 从数据流中的忽略数据直到某种情况发生\n\n### future\n\n1. `throttleTime/debounceTime/auditTime` 基于时间的数据流量筛选\n2. `throttle/debounce/audit` 基于数据内容的数据流量筛选\n3. `sample/sampleTime` 基于采样方式的数据流量筛选\n4. `distinct` 删除重复的数据\n5. `distinctUntilChanged/distinctUntilKeyChanged` 删除重复的连续数据\n6. `ignoreElements` 忽略数据流中的所有数据\n7. `elementAt` 只选取指定出现位置的数据\n8. `single` 判断是否只有一个数据满足判定条件\n\n### exhaust 的使用场景\n\n\n### throttleTime 配合 debounceTime 参与进用户笔记及时存储\n\n```typescript\nimport { of, fromEvent } from 'rxjs'; \nimport { map,throttleTime,debounceTime,tap,merge,distinctUntilChanged,switchMap } from 'rxjs/operators';\n\nconsole.clear();\nconst source$ = fromEvent(document.getElementById('type-ahead'),'keyup');\n\nconst throttleSource$ = source$.pipe(\n  throttleTime(3000),\n  map((e:any) =\u003e e.target.value)\n);\n\nconst debounceSouce$ = source$.pipe(\n  debounceTime(500),\n  map((e:any) =\u003e e.target.value)\n);\n\nconst fakeRequest = key =\u003e of(key).pipe(\n  tap(() =\u003e console.log(`查询 ${key} 的请求发送于 ${new Date()}`))\n);\n\nconst subscription = debounceSouce$.pipe(\n  merge(throttleSource$),\n  distinctUntilChanged(),\n  switchMap(fakeRequest)\n).subscribe()\n```\n\n尝试使用 marble 图进行分析，理解并优化该功能\n\n### exhaustMap 操作符的使用场景\n\n存在网路延迟的情况下，用户过多次点击存储或其他功能性按钮，减少不必要的 http 请求，优化性能\n\n```typescript\nfromEvent(this.saveButton.nativeElement, 'click')\n.pipe(\n    exhaustMap(() =\u003e this.saveCourse(this.form.value))\n)\n.subscribe();\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsawyerbutton%2Frxjs-season3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsawyerbutton%2Frxjs-season3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsawyerbutton%2Frxjs-season3/lists"}