为什么 RxJS 操作符比 Javascript 数组方法更快地过滤和映射大尺寸数组？答案

【问题标题】：Why RxJS operators is faster than Javascript array method to filter and map array with large size?为什么 RxJS 操作符比 Javascript 数组方法更快地过滤和映射大尺寸数组？
【发布时间】：2019-11-25 09:32:00
【问题描述】：

import { of, from, asyncScheduler } from 'rxjs'; 
import { map, filter } from 'rxjs/operators';

let arr = [];
console.log("A");
console.log(new Date());
for(let i = 0; i < 10000000; i++){
  arr.push(i);
}

console.log("B");
console.log(new Date());

let arr2 = arr.filter(x => x%2 === 0)
  .map(x => x * 3)
  .map(x => x * 3)
  .map(x => x * 3);

console.log("C");
console.log(new Date());
console.log(arr2.length);

const source = from(arr).pipe(
  filter(x => x%2 === 0),
  map(x => x * 3),
  map(x => x * 3),
  map(x => x * 3)
);

console.log("D");
console.log(new Date());

let arr3 = [];

source.subscribe(x => arr3.push(x),
x => {},
() => { console.log("E");console.log(new Date()); }
);

console.log("F");
console.log(new Date());
console.log(arr3.length);

这是我的测试代码。

我测试了 RxJS 运算符和 Javascript 数组方法之间的数组过滤器和映射性能。

对于 10,000,000 大小的数组，我做了 1 个过滤器和 3 个映射。

JS 方法大约需要 3 秒（控制台日志 B 和 C 之间的时间间隔），

但是 RxJS 需要不到 1 秒（控制台日志 D 和 E 之间的时间间隔）

当我检查 100 大小的数组时，JS 显然更快，但对于大数组，RxJS 更快。

我想知道 RxJS 如何比原生 JS 实现更快。请帮帮我。

https://stackblitz.com/edit/rxjs-7qflvl?devtoolsheight=60

【问题讨论】：

我想这是因为 RxJS 在整个操作链上使用惰性求值，而普通 JS 将对 .filter 进行一次完整的遍历，然后对 .map 调用进行另外三次完整的遍历。跨度>

标签： javascript arrays rxjs

【解决方案1】：

你实际上没有相同的行为，所以这可能是它看起来像 RxJS 更快的原因。

特别是在这段代码中：

let arr2 = arr.filter(x => x%2 === 0)
  .map(x => x * 3)
  .map(x => x * 3)
  .map(x => x * 3);

对于每个 filter() 和 map()，您正在创建一个包含 10M 或 5M 项的新数组。因此，在这种情况下，您创建 10M 项，然后使用 .filter(x => x%2 === 0) 处理它，返回一个包含 5M 项的新数组，依此类推。

然而，RxJS from() 只会对数组进行一次迭代，并且不会创建任何新数组。它将获取每个项目并通过一个 filter() 和三个 map() 运算符运行它，因此效率更高。

【讨论】：

谢谢。我明白他们之间有什么完全不同。 ?

【解决方案2】：

我的电脑上的测试结果和你的不一样。我认为它可能会因 PC 环境而异。

Chrome v78.0.3904.97 64bit
- C-B：521 毫秒
- E-D：818 毫秒
火狐v70.0 64位
- C-B：369 毫秒
- E-D：493 毫秒

下面是我的PC环境。

CPU：英特尔 i7-8700
操作系统：Windows 10 64 位

【讨论】：

我在其他电脑上测试过。看来你是对的