2024年前端最全我每天都在使用的 10 个 RxJS 运算符_vue rxjs subject pipe map，大厂前端面试真题精选

文末

我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。

首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。

更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。

前端面试题汇总

JavaScript

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

性能

linux

前端资料汇总

#### **switchMap():**


每当源可观察对象发出新值时，此运算符用于切换到新的可观察对象。它以一个函数作为参数，它接收发出的值作为输入并返回一个新的可观察值。 


最新的 observable 发出的值由返回的 observable 发出。


例如，您可以使用 switchMap() 根据另一个可观察对象发出的 ID 获取用户数据：

import { switchMap } from ‘rxjs/operators’;
import { UserService } from ‘./user.service’;

constructor(private userService: UserService) {}

this.userId$.pipe(
  switchMap(userId => this.userService.getUser(userId))
).subscribe(user => console.log(user));

#### **catchError():**


此运算符用于处理可观察对象抛出的错误。它以一个函数作为参数，它接收错误作为输入并返回一个新的可观察对象。 


返回的可观察对象可以发出新值、完成或抛出另一个错误。例如，您可以使用 catchError() 重试失败的 HTTP 请求：

import { catchError } from ‘rxjs/operators’;
import { HttpClient } from ‘@angular/common/http’;

constructor(private http: HttpClient) {}

this.http.get(‘/api/data’).pipe(
  catchError(() => this.http.get(‘/api/fallbackData’))
).subscribe(data => console.log(data));

#### **tap():**


此运算符用于在不修改可观察对象的发射值的情况下执行副作用。它以一个函数作为参数，它接收发出的值作为输入并可以执行任何副作用。 


返回值被忽略，原始值不变。例如，您可以使用 tap() 来记录可观察对象发出的值：

import { tap } from ‘rxjs/operators’;
import { of } from ‘rxjs’;

of(1, 2, 3).pipe(
  tap(value => console.log(Emitting value: ${value}))
).subscribe();

#### **take():**


此运算符用于限制可观察对象发出的值的数量。这是一个例子：

import { take } from ‘rxjs/operators’;
import { of } from ‘rxjs’;

of(1, 2, 3, 4, 5).pipe(
  take(3)
).subscribe(value => console.log(value)); // output: 1, 2, 3

在此示例中，take(3) 用于将 of(1, 2, 3, 4, 5) 发出的数字流限制为前三个值。


#### **debounceTime():**


此运算符用于按指定的时间量对值流进行去抖动。这是一个例子：

import { debounceTime } from ‘rxjs/operators’;
import { fromEvent } from ‘rxjs’;

const input = document.getElementById(‘input’);

fromEvent(input, ‘input’).pipe(
  debounceTime(500)
).subscribe(event => console.log(input.value));

在此示例中，debounceTime(500) 用于将来自输入元素的输入事件流去抖动 500 毫秒。这意味着如果用户快速连续键入，则只会记录 500 毫秒不活动后的输入值。


#### **distinctUntilChanged():**


此运算符用于仅从值流中发出不同的值。这是一个例子：

import { distinctUntilChanged } from ‘rxjs/operators’;
import { of } from ‘rxjs’;

of(1, 2, 2, 3, 3, 3, 4).pipe(
  distinctUntilChanged()
).subscribe(value => console.log(value)); // output: 1, 2, 3, 4

在此示例中，distinctUntilChanged() 用于仅从 of(1, 2, 2, 3, 3, 3, 4) 发出的数字流中发出不同的值。


#### **merge():**


此运算符用于将多个可观察对象合并为一个可观察对象。这是一个例子：

import { merge } from ‘rxjs’;
import { interval } from ‘rxjs’;

const obs1 = interval(1000);
const obs2 = interval(2000);

总结

前端资料汇总

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

• 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
  喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！