时间戳

首页 > 解决方案 > Array map 和 rxjs map 有什么区别

javascript - Array map 和 rxjs map 有什么区别

问题描述

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

标签： javascriptarraysrxjs

解决方案

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

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

一般来说，RXJS Observables 更像是一个数据流，但每个数据都是它自己的实体。

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

// 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. 这种实现从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

推荐阅读