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

这是我的测试代码

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

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

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

但RxJS在控制台日志D和E之间的时间间隔不到1秒

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

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

---

实际上，您没有相同的行为，所以这可能就是为什么RxJS看起来更快的原因

特别是在本规范中：

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);

使用每个过滤器和贴图，您将创建一个包含10米或5米项目的新阵列。因此，在本例中，您创建了1000万个项目，然后使用.filterx=>x%2===0对其进行处理，该值返回一个包含500万个项目的新数组，以此类推

---

但是，来自的RxJS将只迭代该数组一次，并且永远不会创建任何新数组。它将获取每个项目并通过一个过滤器和三个映射运算符运行，因此效率更高。

我的电脑中的测试结果与你的不同。 我认为它可能会因PC环境的不同而有所不同

Chrome v78.0.3904.97 64位 C-B:521毫秒 E-D:818毫秒 Firefox v70.0 64位 C-B:369毫秒 E-D:493毫秒 下面是我的PC环境

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

---

我想这是因为RxJS在整个操作链上使用惰性计算，而普通JS将对.filter执行一次完整遍历，然后对.map调用执行另外三次完整遍历。我在其他PC上进行了测试。看起来你是对的谢谢。我理解他们之间的根本区别。

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