'of' 与 'from' 运算符

Question

Observable.of 和 Observable.from 参数格式之间的唯一区别是什么？喜欢Function.prototype.call 和Function.prototype.apply？

Observable.of(1,2,3).subscribe(() => {})
Observable.from([1,2,3]).subscribe(() => {})

Answer 1

不完全是。将数组传递给Observable.from 时，它与Observable.of 之间的唯一区别是传递参数的方式。

但是，Observable.from 将接受 argument，即

要转换的可订阅对象、Promise、Observable-like、Array、iterable 或类似数组的对象

Observable.of 没有类似的行为 - 它始终只接受值并且不执行转换。

Answer 2

在传递类似数组的结构（包括字符串）时，请注意of 和from 之间的区别：

Observable.of([1, 2, 3]).subscribe(x => console.log(x));

将一次打印整个数组。

另一方面，

Observable.from([1, 2, 3]).subscribe(x => console.log(x));

逐一打印元素。

对于字符串，行为是相同的，但在字符级别。

Answer 3

另一个有趣的事实是 Observable.of([]) 当你订阅它时将是一个空数组。 当您订阅 Observable.from([]) 时，您不会获得任何价值。

当您使用 switchmap 进行连续操作时，这一点很重要。

例如： 在下面的示例中，我先保存工作，然后保存站点，然后将 cmets 保存为流。

.do((data) => {
            this.jobService.save$.next(this.job.id);
        })
        .switchMap(() => this.jobService.addSites(this.job.id, this.sites)
            .flatMap((data) => {
                if (data.length > 0) {
                    // get observables for saving
                    return Observable.forkJoin(jobSiteObservables);
                } else {
                    **return Observable.of([]);**
                }
            })).do((result) => {
            // ..
        })
        .switchMap(() => this.saveComments())
....

如果没有要保存的站点，即； data.length = 0 在 addSite 部分，上面的代码返回 Observable.of([]) 然后去保存 cmets。但是如果你用 Observable.from([]) 替换它，后面的方法就不会被调用了。

rxfiddle

Answer 4

1. from 以块的形式返回通知，即一个接一个。 例如： from("abcde") 将返回 a => b => c => d => e
2. 的退货完成通知。 例如：of("abcde") 将返回 abcde。

https://stackblitz.com/edit/typescript-sckwsw?file=index.ts&devtoolsheight=100

Answer 5

一条线的区别：

       let fruits = ['orange','apple','banana']

from : 一个一个地发出数组中的项目。例如

    from(fruits).subscribe(console.log) // 'orange','apple','banana'

of ：一次发射整个数组。例如

 of(fruits).subscribe(console.log) //  ['orange','apple','banana']

注意： of 运算符可以表现为带有 spread 运算符

的 from 运算符

 of(...fruits).subscribe(console.log) //  'orange','apple','banana'

Answer 6

from: 从数组、promise 或 iterable 创建 observable。只取一个值。对于数组、可迭代对象和字符串，所有包含的值都将作为序列发出

const values = [1, 2, 3];
from(values); // 1 ... 2 ... 3

of：创建具有可变数量值的可观察对象，按顺序发出值，但数组作为单个值

const values = [1, 2, 3];
of(values, 'hi', 4, 5); // [1, 2, 3] ... 'hi' ... 4 ... 5

Answer 7

from 运算符获取事件源。 from(source)

let array = [1,2,3,4,5]
from(array); //where array is source of events, array[of events]


let promise = new Promise(function(resolve, reject) {
  // executor (the producing code, "singer")
});
from(promise); //where promise is source of event, promise(of event)





let observable = Observable.create(function(observer) {
  observer.next(1);
  observer.next(2);
  observer.next(3);
  observer.next(4);
  observer.next(5);
  observer.complete();
});
from(observable); // where obsservable is source of events. 

of 运算符接受个别事件。 of(event1, event2, event3)

of(1,2,3,4,5); // where 1,2,3,4,5 are individual events

Answer 8

from 运算符可以接受其中之一

承诺 可迭代的 数组 可观察的

from 从 observable 发出每个单独的项目，也可以进行转换。

of 运算符接受原始值并从 observable 发出值。

import {from, Observable, of} from 'rxjs';

const ofObs = of([1,2,3]);
const fromObs = from([2,3,4]);

const basicObs = Observable.create(observer=>{
    observer.next(100);
    observer.next(200);
    observer.next(300);
})
const promise = new Promise((resolve,reject)=>{
    resolve(100);
})

const array = [1,2,3];
const iterbale  = "Dhana";

// const myObs = from(ofObs);//possible and can emit individual item value everytime 1, then ,2 , then 3
// const myObs = from(fromObs);//possbile and can emit individual item value everytime 1, then ,2 , then 3
// const myObs = from(basicObs);//possbile and can emit individual item value everytime 100, then ,200 , then 300
const myObs = from(promise);//possible can emit value 100
// const myObs = array(promise);//possible and can emit individual item value everytime 1, then ,2 , then 3
// const myObs = iterable(promise);//possible and can emit individual item value everytime D then h then a then n then a


myObs.subscribe(d=>console.log(d))

import {from, of} from 'rxjs';

const basicOf1 = of([1,2,3,4,5,6]) // emits entire array of events
const basicfrom1 = from([1,2,3,4,5,6]) //emits each event at a time

const basicOf2 = of(1,2,3,4,5,6) // emits each event at a time
// const basicfrom2 = from(1,2,3,4,5,6) //throws error
//Uncaught TypeError: number is not observable

const basicOf3 = of(...[1,2,3,4,5,6]) // emits each event at a time
const basicfrom3 = from(...[1,2,3,4,5,6]) //throws error
//Uncaught TypeError: number is not observable
basicOf3.subscribe(d=>console.log(d))

Here is the link to codepen