Array map和rxjs map有什么区别

时间:2018-10-11 06:36:49

标签: javascript arrays rxjs

我想知道rxjs和array上的映射以相同的方式工作。数组映射方法和rxjs映射运算符的用法有什么区别?

3 个答案:

答案 0 :(得分:3)

Array.map转换单个数组的每个元素

console.log( [ 1, 2, 3 ].map(x => x * x) )
// log: [ 1, 4, 9 ]

通常,RXJS Observables更像是数据流,但是每个数据都是其自己的实体。

您可以选择将数组存储在Observable中,但是仍然将每个数组视为单个实体。每次调用Subject#next时,都会提供一个全新的数组。在这种情况下,RXJS不等于Array#push,因为RXJS不会关心观察对象的内容恰好是数组。

// Observable that holds an array as its type
const subject: Subject<number[]> = new Subject<number[]>();
subject.pipe(
  // the value here is a full array
  map(arr => arr.map(x => x * x))
).subscribe(arr => console.log(arr));

subject.next([ 1, 2, 3 ]);
// log: [ 1, 4, 9 ]

subject.next([ 7, 8, 9 ]);
// log: [ 49, 64, 81 ]

*奖励:如果您设置了ReplaySubject,则可以 kinda 使某些行为更像数组。 Subject的此实现从字面上重播提供给它的所有数据(或基于实例化它的子集)。就像您将看到的那样,它的局限性在于您只能推到最后,并且必须创建一个新的订阅才能看到整个“数组”,但这仍然是一个有趣的思想实验。

const subject: ReplaySubject<number> = new ReplaySubject<number>();
subject.next(1);
subject.next(2);
subject.next(3);

const transformed: Observable<number> = subject.pipe(
  map(x => x * x)
);

transformed.pipe(first()).subscribe(x => console.log(x));
// log: 1
// log: 4
// log: 9

subject.next(9);
transformed.pipe(first()).subscribe(x => console.log(x));
// log: 1
// log: 4
// log: 9
// log: 81

答案 1 :(得分:2)

它们的功能完全相同,它们分别给出一个新的Array / Observable,每个元素根据(通常)变换函数进行变换(技术计算机科学名称为 projection ) ,将修改后的对象及其索引作为参数。

Array.map是Array原型的一部分。您可以在任何JavaScript环境中的任何数组上使用它。 (当然,前提是您没有弄乱Array.prototype)

Observable.map必须导入。 (对于RxJS 6:import { map } from 'rxjs/operators';,对于旧版本:import { map } from 'rxjs/add/operator/map'


存在微小但显着的差异

Array.map转换函数可以访问要转换的整个数组(投影函数中的第三个参数)。

示例:

     let arr = ['a', 'b', 'c'];
     let arrResult = arr.map(
       (elem, index, wholeArray) => 'element ' + elem + ' was in position ' + index + ' in array ' + wholeArray);
     console.log(arrResult);

在Observable的上下文中,这(通常)是“当然”不可能的,因为发射每个元素时可能都不知道发射值的“整个列表”。


反之,还有另一个小区别:Observable.map运算符采用一个(可选)thisArg参数,因此转换函数可以访问某些指定的上下文。

我认为其他区别不明显:Array.map不需要此区别,因为它是一个函数,您还可以使用各种调用函数的方式来指定自己的“ this” JavaScript。 (我在这部分找不到很好的链接,欢迎任何想在此答案中为此添加参考的人。)

此外,无论如何,我还是觉得很有挑战。

答案 2 :(得分:0)

RxJS用于Observables,本机map用于Arrays。 那是我唯一能想到的。