JavaScript 是否优化了多个纯过滤器/映射/等?

Question

我有这个以函数式风格编写的JavaScript代码：

someArray
  .filter((element) => element)
  .map((element) => element.property)
  .map((property) => doSomethingWithIt)

现在，一个朴素的实现会在数组上循环三次——每个filter和map一次——但优化器应该能够将其优化为一个执行多个操作的循环，假设所有函数都是纯函数。

做(大多数？JavaScript引擎优化了这一点;还是需要手动优化？

编辑：我认为优化的是将其减少到一个循环：

someArray.reduce((acc, element) => {
  if(!element) {
    return acc
  }
  return acc.push(doSomethingWithIt(element.property))
}, [ ])

Answer 1

优化

器应该能够将其优化为执行多个操作的一个循环。

不，不应该！此优化可能会更改代码的行为。

考虑一个双map，其中每个map中的操作都有可观察到的副作用：

let arr = [1, 2, 3];
arr.map((x) => { console.log("foo", x); return x })
   .map((y) => { console.log("bar", y); return y });

记录与"优化"版本不同的消息序列：

let arr = [1, 2, 3];
arr.map((x) => {
    console.log("foo", x);
    console.log("bar", x);
    return x;
});

Answer 2

除非你想在你的数组中有undefined，否则你不能删除filter调用 - 你可以使用解构将两个map调用合二为一，但是：

someArray.filter(element => element).map(({ property }) => doSomething(property));