在前端开发中，我们经常需要处理和操作异步数据，而 RxJS 就是一款强大的异步编程库，它提供了丰富的操作符来处理和操作数据流，其中 of 操作符就是一个快速创建数据流的方法。
of 操作符简介
RxJS 中的 of 操作符用于快速创建一个数据流，它将传入的参数转化为一个 Observable 对象，并发射每个参数。这个操作符在实际开发中非常有用，因为它可以将任何一个数据类型转化为一个 Observable 对象，进而支持各种异步操作。
of 操作符使用
使用 of 操作符非常简单，只需要使用 Rx.Observable.of 方法即可：
Rx.Observable.of(1, 2, 3).subscribe(console.log)
上面的代码中，我们使用 of 操作符创建了一个 Observable 对象，并将它打印到控制台中。
我们也可以使用 ES6 中的展开操作符，将一个数组转化为一系列参数：
const arr = [1, 2, 3] Rx.Observable.of(...arr).subscribe(console.log)
在实际开发中，我们通常会将一个 of 操作符与其他操作符结合使用，以构建更为复杂的数据流。例如，我们可以使用 map 操作符将数据流中的数据进行转换，如下所示：
const arr = [1, 2, 3] Rx.Observable.of(...arr) .map(x => x * 2) .subscribe(console.log)
上面的代码中，我们使用 map 操作符将数据流中的每个元素都乘以 2，然后打印这些元素。
of 操作符的使用场景
of 操作符在前端开发中有很多使用场景，其中包括：
快速创建一个的 Observable 对象
当我们需要快速创建一个数据流时，of 操作符是非常有用的。例如，我们需要向服务器发起多个 HTTP 请求，并将这些请求合并到一个数据流中进行处理，就可以使用 of 操作符，如下所示：
const obs1 = this.http.get('http://example.com/data1')
const obs2 = this.http.get('http://example.com/data2')
const obs3 = this.http.get('http://example.com/data3')
Rx.Observable.of(obs1, obs2, obs3)
.mergeAll()
.subscribe(console.log)上面的代码中，我们使用 of 操作符将三个 HTTP 请求转化为一个 Observable 对象，然后使用 mergeAll 操作符合并这些请求，最后订阅这个数据流并打印返回结果。
将任何数据类型转化为 Observable 对象
当我们需要将任何类型的数据转化为 Observable 对象时，of 操作符也非常有用。例如，我们需要将用户输入的数据转化为数据流，并在数据变化时进行处理，就可以使用 of 操作符，如下所示：
const input = document.querySelector('input')
Rx.Observable.fromEvent(input, 'keyup')
.map(event => event.target.value)
.filter(value => value.length >= 3)
.distinctUntilChanged()
.switchMap(value => this.http.get(`http://example.com/search?q=${value}`))
.subscribe(console.log)上面的代码中，我们使用 fromEvent 操作符将输入框的 keyup 事件转化为一个数据流，然后使用 map 操作符将事件对象转化为输入框的值，使用 filter 操作符过滤长度小于 3 的值，使用 distinctUntilChanged 操作符去除重复的值，使用 switchMap 操作符将每个值转化为一个 HTTP 请求，最后订阅这个数据流并打印返回结果。
总结
of 操作符是 RxJS 中的一个非常有用的操作符，它可以快速创建一个数据流，将任何类型的数据转化为一个 Observable 对象，并支持各种异步操作。在实际开发中，我们可以结合其他操作符使用 of 操作符，构建出更为复杂的数据流，以处理和操作异步数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646d1b8a968c7c53b0bea05e